/* Mobile hardening — added after the main sheets so it always wins.
   1. Declare a light colour scheme: the page has no dark theme, and forced
      "auto dark" was inverting the composer pill and the market board.
   2. The composer pill is a fixed 40px flex row. With large system text it
      wrapped to three lines and spilled out of its own background.
   3. Listing thumbs keep their aspect box even when a photo is slow or dead,
      so no raw alt text is ever painted over a card. */
:root { color-scheme: light; }

/* One light appearance, on every phone and browser.
   Phones that force "auto dark" invert the page because there is no dark
   theme here. Declaring the scheme and re-asserting the paper colour inside
   a dark media query stops Chrome, Samsung Internet and WebView inverting it. */
html { color-scheme: light !important; }
html, body { background: #F6F3EC !important; color: #131E19 !important; }

@media (prefers-color-scheme: dark) {
  html, body { background: #F6F3EC !important; color: #131E19 !important; }
  .card, .composer, .feed-entry, .sheet, .modal, .topbar, .tabbar,
  .hscroll, .mini-lot, input, textarea, select { background-color: #FFFFFF !important; color: #131E19 !important; }
  input::placeholder, textarea::placeholder { color: #5F6C65 !important; }
}


.composer .fake {
  height: auto;
  min-height: 40px;
  padding: 9px 15px;
  white-space: normal;
  line-height: 1.3;
  align-items: center;
}

.lot-img { background: #efece4; }
.lot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lot-title, .feed-entry, .card, .h3 { overflow-wrap: anywhere; }
/* ================= profile form ergonomics ================= */
form[data-form="profile"] .field { margin-bottom: 16px; }
form[data-form="profile"] label {
  display: block; margin-bottom: 7px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #5D6B64;
}
form[data-form="profile"] .input {
  min-height: 50px; font-size: 16px; padding: 13px 14px; border-radius: 13px;
  background: #fff; border: 1px solid #E2DCCF;
}
form[data-form="profile"] .input:focus {
  border-color: #0E5A3A; box-shadow: 0 0 0 3px rgba(14,90,58,.12); outline: none;
}
form[data-form="profile"] textarea.input { min-height: 116px; line-height: 1.45; resize: vertical; }
form[data-form="profile"] .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { form[data-form="profile"] .grid2 { grid-template-columns: 1fr; } }
form[data-form="profile"] select.input { appearance: none; background-image: none; }
form[data-form="profile"] .btn.primary {
  position: sticky; bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 6; margin-top: 8px; border-radius: 14px; min-height: 52px;
  box-shadow: 0 8px 24px rgba(14,58,38,.22);
}
/* the moment a field has focus the button drops back into the flow, so the
   keyboard can never be covered by it (that was hiding the phone field) */
form[data-form="profile"]:focus-within .btn.primary {
  position: static; box-shadow: none; margin-top: 14px;
}
/* keep the field being typed in above the keyboard */
html { scroll-padding-bottom: 42vh; }
form[data-form="profile"] .input { scroll-margin-bottom: 42vh; }
html.dp-viewer-open, html.dp-viewer-open body {
  overflow: hidden; overscroll-behavior: none;
}
html.embed form[data-form="profile"] .btn.primary { bottom: 12px; }

/* ================= photo viewer ================= */
#dp-viewer {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
  background: radial-gradient(120% 90% at 50% 0%, rgba(16,44,31,.96), rgba(6,14,10,.985));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
  touch-action: none;
}
#dp-viewer[data-open="1"] { opacity: 1; pointer-events: auto; }
#dp-viewer .v-bar {
  display: flex; align-items: center; gap: 10px; padding: 14px 14px 6px;
  color: #F3F0E7; font: 600 13px Inter, system-ui, sans-serif; letter-spacing: .01em;
}
#dp-viewer .v-count { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .8; }
#dp-viewer .v-close {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.12); color: #fff; font-size: 20px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
#dp-viewer .v-stage {
  flex: 1; display: grid; place-items: center; overflow: hidden; padding: 4px 10px 10px;
}
#dp-viewer img {
  max-width: 100%; max-height: 100%; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5); will-change: transform;
  transition: transform .18s ease; user-select: none; -webkit-user-drag: none;
}
#dp-viewer[data-zoom="1"] img { transition: none; }
#dp-viewer .v-foot {
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  color: rgba(243,240,231,.72); font: 12.5px/1.5 Inter, system-ui, sans-serif; text-align: center;
}
#dp-viewer .v-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
#dp-viewer .v-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.28);
}
#dp-viewer .v-dots i[data-on="1"] { background: #8FD3AE; box-shadow: 0 0 0 3px rgba(143,211,174,.18); }
#dp-viewer .v-hint { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  #dp-viewer, #dp-viewer img { transition: none; }
}
/* caption / timestamp note inside the viewer */
#dp-viewer .v-meta {
  font: 600 12.5px/1.45 Inter, system-ui, sans-serif; color: rgba(255,255,255,.9);
  margin-bottom: 8px; padding: 0 8px;
}
#dp-viewer .v-meta:empty { display: none; }
#dp-viewer .v-who { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dp-viewer img { image-rendering: auto; backface-visibility: hidden; }
#dp-viewer[data-zoom="1"] { cursor: grab; }

/* ================= speed on cheap phones ================= */

/* 2. taps register on touchstart instead of waiting for a double-tap guess */
button, a, [role="button"], .tabbar a, .tabbar button, .chip, .tab, .card[data-act] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 3. page transitions.
      Tabs are siblings, so they move with a parallax depth shift: the new page
      glides over the old one while the old one drifts back and shrinks. Going
      deeper (a listing, a chat) rises instead, which reads as opening a page
      rather than turning one. Both use weighted easing and end without bounce. */
#view { backface-visibility: hidden; transform: translateZ(0); }
:root { --spring-smooth: cubic-bezier(.25, 1, .5, 1); }

/* --- tabs: parallax depth shift --- */
#view.view-p-enter {
  opacity: 0;
  transform: scale(.96) translate3d(var(--dp-dx, 20px), 0, 0);
}
#view.view-p-enter-active {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
  transition: opacity .3s var(--spring-smooth),
              transform .3s var(--spring-smooth);
}
.dp-ghost.view-p-exit {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
}
.dp-ghost.view-p-exit-active {
  opacity: 0;
  transform: scale(.96) translate3d(calc(var(--dp-dx, 20px) * -1), 0, 0);
  transition: opacity .26s var(--spring-smooth),
              transform .26s var(--spring-smooth);
}

/* --- deeper screens: soft vertical rise --- */
#view.view-v-enter {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
#view.view-v-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .3s var(--spring-smooth),
              transform .3s var(--spring-smooth);
}
.dp-ghost.view-v-exit {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.dp-ghost.view-v-exit-active {
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  transition: opacity .26s var(--spring-smooth),
              transform .26s var(--spring-smooth);
}

.dp-ghost {
  position: fixed; z-index: 60; pointer-events: none;
  background: #F6F3EC; overflow: hidden;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
  #view[class*="view-"], .dp-ghost[class*="view-"] {
    transition: none !important; transform: none !important; opacity: 1 !important;
  }
}

/* 2b. a press should feel like a press, not a jump */
button, a, [role="button"], .tabbar a, .tabbar button, .chip,
.nav-item, .market-card, .card[data-act], .hscroll .card {
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
button:active, .tabbar a:active, .chip:active,
.card[data-act]:active, .hscroll .card:active {
  transform: scale(.97);
}
@media (prefers-reduced-motion: reduce) {
  button:active, .tabbar a:active, .chip:active,
  .card[data-act]:active, .hscroll .card:active { transform: none; }
}


/* a photo attached to a community post */
.post-img { display: block; width: 100%; height: auto; max-height: 460px;
  object-fit: cover; border-radius: 12px; margin-top: 10px;
  background: #EDE8DC; }

/* 4b. a view that lands empty shows structure, not a blank page */
#view.view-shell { padding-top: 6px; }
.dp-skel { border-radius: 14px; background: #EDE8DC; margin: 0 0 12px;
  background-image: linear-gradient(100deg, #EDE8DC 30%, #F6F2E8 50%, #EDE8DC 70%);
  background-size: 200% 100%; animation: dpShimmer 1.1s linear infinite; }
.dp-skel.h1 { height: 22px; width: 52%; }
.dp-skel.row { height: 76px; }
.dp-skel.wide { height: 130px; }
@media (prefers-reduced-motion: reduce) { .dp-skel { animation: none; } }

/* 5. a skeleton instead of a blank box while a photo arrives */
.post-media img, .lot-img img, .hscroll img {
  background: linear-gradient(100deg, #EFEAE0 30%, #F8F5EE 50%, #EFEAE0 70%);
  background-size: 200% 100%;
  animation: dpShimmer 1.1s linear infinite;
}
img[data-dp-loaded="1"] { background: none; animation: none; }
@keyframes dpShimmer {
  from { background-position: 120% 0; }
  to   { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .post-media img, .lot-img img, .hscroll img { animation: none; }
}

/* ---- quick links: the first row under the market board ------------------ */
.quick-links{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 10px;
}
.quick-links .qlink{
  display:flex;align-items:center;gap:9px;min-height:46px;padding:0 13px;
  border-radius:14px;border:1px solid var(--line,#e7e1d6);background:#fff;
  font:600 14px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#14231c;text-decoration:none;letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(20,35,28,.05);
  transition:transform .12s cubic-bezier(.25,1,.5,1),box-shadow .12s ease,background .12s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.quick-links .qlink svg{width:18px;height:18px;flex:0 0 auto;color:#0E5A3A}
.quick-links .qlink:active{transform:scale(.975);box-shadow:none;background:#f3f7f4}
.quick-links .qlink.qlink-lead{
  border-color:#0E5A3A1f;background:linear-gradient(180deg,#f4faf6,#ffffff);
  box-shadow:0 1px 2px rgba(20,35,28,.06),0 6px 16px rgba(14,90,58,.10);
}
.quick-links .qlink.qlink-lead svg{color:#0E5A3A}
@media (max-width:360px){.quick-links{grid-template-columns:1fr}}

/* ---- bottom bar: steadier weight, honest pressed state ------------------ */
.tabbar a{
  font-weight:600;letter-spacing:-.01em;gap:4px;
  transition:color .15s ease,opacity .15s ease,transform .12s cubic-bezier(.25,1,.5,1);
  -webkit-tap-highlight-color:transparent;
}
.tabbar a svg{width:22px;height:22px;stroke-width:1.9}
.tabbar a:active{transform:translateY(1px) scale(.96);opacity:.75}
.tabbar a.on{font-weight:700}
.tabbar a.on svg{stroke-width:2.1}

/* ---- the sample-data notice closes the page instead of opening it ---- */
#view > .demo-strip:last-child {
  margin: 20px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FDF1E1;
  border-color: #F2DCC2;
  color: #6b4a20;
  font-size: 12px;
}
#view > .demo-strip:last-child svg { width: 15px; height: 15px; opacity: .8; }

/* ============================================================ the bottom bar
 * Seven items were being laid into a five-column grid, so the last two fell
 * off the right edge and every label lost its room: the bar read as faint grey
 * smudges. A flex row gives every tab an equal share of whatever count exists,
 * and the ink is dark enough to read in daylight.
 */
.tabbar {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: rgba(255, 253, 247, .97);
  border-top: 1px solid #E3DBC8;
  box-shadow: 0 -6px 18px -14px rgba(12, 40, 26, .55);
  padding: 0 2px;
}
.tabbar .tab {
  flex: 1 1 0;
  min-width: 0;
  gap: 3px;
  padding: 4px 0 2px;
  color: #4E5F55;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -.01em;
  height: 100%;
  justify-content: center;
}
.tabbar .tab svg {
  width: 21px; height: 21px;
  stroke-width: 1.85;
  color: #55665C;
  transition: color .15s ease, transform .15s ease;
}
.tabbar .tab > span:not(.n) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.tabbar .tab.on { color: #0A5334; font-weight: 750; }
.tabbar .tab.on svg { color: #0C6E42; stroke-width: 2.2; }
/* the pill behind the icon, not a hairline above it: a mark you can see at
   arm's length, which is how a phone is actually held */
.tabbar .tab.on::before {
  content: "";
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #E6F3EA, #DCEFE3);
  box-shadow: inset 0 0 0 1px #CBe3D4;
  z-index: 0;
}
.tabbar .tab svg, .tabbar .tab > span { position: relative; z-index: 1; }
.tabbar .tab.on svg { transform: translateY(-1px); }
.tabbar .tab .n {
  position: absolute; top: 3px; right: 50%; margin-right: -18px;
  background: #B4402F; color: #fff; font-size: 8.5px; font-weight: 700;
  min-width: 14px; height: 14px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 3px;
  box-shadow: 0 0 0 2px #FFFDF7;
}

/* ====================================================== the bottom shelf, v2
 * The bar is the last thing a thumb touches, so it should feel made rather
 * than defaulted: a cream shelf under a gold hairline, small caps labels, and
 * one deep-green seal behind the icon you are on. No translucency — over a
 * photograph a half-clear bar reads as a smudge.
 */
.tabbar {
  display: flex; align-items: stretch; justify-content: space-between;
  padding: 0 3px;
  background: linear-gradient(180deg, #FFFDF8 0%, #FBF5E7 100%);
  border-top: 1px solid #E7D9B6;
  box-shadow: 0 -10px 26px -20px rgba(12, 40, 26, .65), inset 0 1px 0 #FFFFFF;
}
.tabbar .tab {
  position: relative;
  flex: 1 1 0; min-width: 0;
  gap: 2px;
  padding: 6px 0 5px;
  color: #63736A;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  justify-content: center;
}
.tabbar .tab > span:not(.n) { line-height: 1.1; margin-top: 3px; }
.tabbar .tab svg {
  width: 21px; height: 21px;
  stroke-width: 1.8;
  color: #5F6E65;
  position: relative; z-index: 1;
  transition: color .16s ease, transform .16s cubic-bezier(.25, 1, .5, 1);
}
.tabbar .tab.on { color: #0A5334; font-weight: 750; }
.tabbar .tab.on svg { color: #FFFDF6; stroke-width: 2.05; }
.tabbar .tab.on::before {
  content: "";
  position: absolute;
  top: 3px; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 28px;
  border-radius: 11px;
  background: linear-gradient(180deg, #12915A 0%, #0B5B39 100%);
  box-shadow: 0 8px 14px -12px rgba(9, 50, 31, .95), inset 0 1px 0 rgba(255, 255, 255, .24);
  z-index: 0;
}
.tabbar .tab.on > span:not(.n) { color: #0A5334; }
.tabbar .tab.on svg { transform: translateY(-1px); }
.tabbar .tab:active svg { transform: scale(.94); }
/* the number rides on the seal, not on the shelf */
.tabbar .tab .n { top: 1px; right: 50%; margin-right: -20px; z-index: 2; }

/* ------------------------------------------------- stripes and shade, v3
 * The ribbon that runs along the top of the app now closes it at the bottom
 * too, drawn in the same four colours and the same order, so the screen is
 * framed rather than just cut off. Under it, a short fade gives the shelf an
 * edge instead of a line.
 */
.tabbar { padding-top: 3px; }
.tabbar::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg,
    #0C6E42 0 25%,
    #C8102E 25% 50%,
    #14110E 50% 75%,
    #DFA03C 75% 100%);
}
.tabbar::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 3px; height: 9px;
  background: linear-gradient(180deg, rgba(24, 48, 34, .10), rgba(24, 48, 34, 0));
  pointer-events: none;
}
.tabbar .tab { padding-top: 7px; }

/* a warmer shelf: cream at the top edge cooling into paper at the bottom */
.tabbar {
  background:
    linear-gradient(180deg, #FFFCF3 0%, #FDF8EC 46%, #F8F1DE 100%);
}

/* the seal gets depth rather than a flat fill, and a gold thread under the
   word it belongs to */
.tabbar .tab.on::before {
  background: linear-gradient(168deg, #17A16A 0%, #0E7A4B 46%, #08472C 100%);
  box-shadow:
    0 9px 16px -12px rgba(8, 44, 27, .95),
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -10px 14px -12px rgba(0, 0, 0, .55);
}
.tabbar .tab.on > span:not(.n)::after {
  content: "";
  display: block;
  width: 13px; height: 2px; border-radius: 2px;
  margin: 2px auto 0;
  background: linear-gradient(90deg, #E8B45C, #F6D79B);
}
.tabbar .tab [class="n"] { background: #C8102E; }

/* ------------------------------------------------------------- v4: the seal
 * Cream instead of green. A green block on a cream shelf competed with the
 * ribbon; a pressed cream seal with a gold edge sits in the same family as the
 * paper, and the green moves into the icon where it can be read.
 */
.tabbar .tab.on::before {
  background: linear-gradient(180deg, #FFFBEF 0%, #FBF1DA 62%, #F5E7C8 100%);
  box-shadow:
    inset 0 0 0 1px #E3C58A,
    inset 0 1px 0 #FFFFFF,
    0 6px 13px -11px rgba(120, 86, 20, .60);
}
.tabbar .tab.on svg {
  color: #0A5334;
  stroke-width: 2.05;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7));
}
.tabbar .tab.on > span:not(.n)::after {
  background: linear-gradient(90deg, #0C6E42, #17A16A);
}

/* ------------------------------------------------- v5: the ribbon, painted in
 * The stripe was drawn by a pseudo-element sitting on the bar's top edge. A
 * cached shell, an overflow rule or a stacking change anywhere above it could
 * erase it. It is now the first layer of the shelf's own background, so it
 * cannot be covered by anything short of the bar itself disappearing.
 */
.tabbar {
  background:
    linear-gradient(90deg, #0C6E42 0 25%, #C8102E 25% 50%, #14110E 50% 75%, #DFA03C 75% 100%) 0 0 / 100% 3px no-repeat,
    linear-gradient(180deg, #FFFCF3 0%, #FDF8EC 46%, #F8F1DE 100%);
  border-top: 0;
}
.tabbar::before { content: none; }

/* ---------------------------------------------------------- v6: the spacing
 * At 3x the label was sitting on the seal's bottom edge instead of under it:
 * the seal is 28 tall from top 3, and the word began at 30. The seal is now
 * 26 tall from top 2, the word starts at 33, and the seal carries a stronger
 * gold edge so it reads as a chosen tab on a cream shelf, not a faint smudge.
 */
.tabbar .tab { padding-top: 8px; }
.tabbar .tab.on::before {
  top: 2px;
  width: 46px;
  height: 26px;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFFAEA 0%, #F8EBCE 58%, #F1E0BB 100%);
  box-shadow:
    inset 0 0 0 1px #DBB878,
    inset 0 1px 0 #FFFFFF,
    0 5px 10px -9px rgba(120, 86, 20, .75);
}
.tabbar .tab.on > span:not(.n) { margin-top: 5px; }
.tabbar .tab.on > span:not(.n)::after { margin-top: 2px; }

/* ---------- first open: three things -------------------------------------- */
.orient{position:fixed;inset:0;z-index:1200;background:rgba(8,26,17,.55);display:flex;align-items:flex-end;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.orient__sheet{width:100%;max-width:560px;margin:0 auto;background:#FFFDF8;border-radius:20px 20px 0 0;
  padding:18px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -20px 50px -24px rgba(8,26,17,.7);
  border-top:3px solid #C9922E}
.orient__head{display:flex;align-items:center;justify-content:space-between}
.orient__k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#8A6A2F}
.orient__skip{border:0;background:none;color:#6B7A70;font-size:12px;font-weight:700;padding:6px 2px;cursor:pointer}
.orient__h{font-family:Fraunces,Georgia,serif;font-size:1.28rem;line-height:1.2;margin:8px 0 14px;color:#12301F;font-weight:500}
.orient__row{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid #EDE3CC}
.orient__row p{margin:0;font-size:12.5px;line-height:1.45;color:#3F4C42}
.orient__pill{flex:none;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 8px;border-radius:999px;white-space:nowrap;margin-top:1px}
.orient__pill--official{background:#12305E;color:#EAF1FA}
.orient__pill--dealer{background:#F6E3BC;color:#6B4A0B}
.orient__pill--count{background:#E4F1DA;color:#1C5A2B}
.orient__go{width:100%;margin-top:14px;border:0;border-radius:14px;background:#0E5B22;color:#FFFDF8;
  font-size:14px;font-weight:800;padding:15px;cursor:pointer;letter-spacing:.02em}

/* seven tabs on a narrow phone */
@media (max-width:360px){
  .tabbar .tab{font-size:8.6px;letter-spacing:.02em;padding:6px 0 5px}
  .tabbar .tab svg{width:19px;height:19px}
}
@media (max-width:330px){
  .tabbar .tab{font-size:8px;letter-spacing:0;gap:1px}
  .tabbar .tab svg{width:18px;height:18px}
}