/* App panel in the public site's "dark canvas" style. Loads after app.css and only re-points tokens and a few
   surfaces, so every page keeps its layout. Near-black canvas with hairline borders, a soft teal glow at the top,
   Geist headlines with tight tracking, mono labels, white pill primary buttons in dark mode (teal in light mode).
   Light mode uses the site's light canvas. Right-to-left pages keep Vazirmatn. */

:root {
  --bg: #f6f8f7; --surface: #ffffff; --surface-2: #eef2f1;
  --text: #0b1215; --text-2: #4f5c62; --text-3: #6b787d;
  --border: rgba(5, 7, 8, .1); --border-strong: rgba(5, 7, 8, .18);
  --primary: #026f7d; --primary-hover: #015a66; --primary-soft: rgba(2, 111, 125, .08); --primary-text: #ffffff;
  --line-soft: rgba(5, 7, 8, .06); --glow: rgba(2, 111, 125, .10); --hi-rgb: 2, 111, 125;
  --cta-bg: #0b1215; --cta-fg: #ffffff; --cta-hover: #1f2d33;
  --font-display: var(--font);
  --serif: "Instrument Serif", Georgia, serif;
  --radius-l: 18px; --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: #050708; --surface: #0b0f11; --surface-2: #10161a;
    --text: #f2f5f6; --text-2: #9aa7ab; --text-3: #6f7c81;
    --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .15);
    --primary: #2ad4e2; --primary-hover: #6fe4ee; --primary-soft: rgba(42, 212, 226, .1); --primary-text: #050708;
    --ok: #5be3a0; --ok-soft: rgba(91, 227, 160, .1); --danger: #ff8a7a; --danger-soft: rgba(255, 107, 107, .1);
    --warn: #f2b45a; --warn-soft: rgba(242, 180, 90, .1);
    --line-soft: rgba(255, 255, 255, .05); --glow: rgba(42, 212, 226, .13); --hi-rgb: 42, 212, 226;
    --cta-bg: #f2f5f6; --cta-fg: #050708; --cta-hover: #ffffff;
    --shadow-2: 0 24px 60px -20px rgba(0, 0, 0, .8);
    --focus: 0 0 0 2px #050708, 0 0 0 4px #2ad4e2;
  }
}
:root[data-theme=dark] {
  --bg: #050708; --surface: #0b0f11; --surface-2: #10161a;
  --text: #f2f5f6; --text-2: #9aa7ab; --text-3: #6f7c81;
  --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .15);
  --primary: #2ad4e2; --primary-hover: #6fe4ee; --primary-soft: rgba(42, 212, 226, .1); --primary-text: #050708;
  --ok: #5be3a0; --ok-soft: rgba(91, 227, 160, .1); --danger: #ff8a7a; --danger-soft: rgba(255, 107, 107, .1);
  --warn: #f2b45a; --warn-soft: rgba(242, 180, 90, .1);
  --line-soft: rgba(255, 255, 255, .05); --glow: rgba(42, 212, 226, .13); --hi-rgb: 42, 212, 226;
  --cta-bg: #f2f5f6; --cta-fg: #050708; --cta-hover: #ffffff;
  --shadow-2: 0 24px 60px -20px rgba(0, 0, 0, .8);
  --focus: 0 0 0 2px #050708, 0 0 0 4px #2ad4e2;
}
[dir=rtl] { --serif: "Vazirmatn", Tahoma, sans-serif; }

body { background: var(--bg); }
::selection { background: rgba(var(--hi-rgb), .3); }

/* Canvas: a soft teal glow behind the top of the page and faint column rails, like the site hero. */
.shell > div { position: relative; isolation: isolate; }
.shell > div::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 520px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% -10%, var(--glow), transparent 70%);
}
@media (min-width: 960px) {
  .content { position: relative; max-width: 960px; }
  .content::before, .content::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); pointer-events: none; }
  .content::before { inset-inline-start: 0; }
  .content::after { inset-inline-end: 0; }
}

/* Type: Geist headlines with tight tracking, mono labels. */
h1, h2, h3 { font-family: var(--font); color: var(--text); }
h1 { font-weight: 500; letter-spacing: -.04em; line-height: 1.05; font-size: 32px; }
@media (min-width: 960px) { h1 { font-size: 44px; } }
h2 { font-weight: 500; letter-spacing: -.03em; }
h3 { font-weight: 550; letter-spacing: -.015em; }
.card-title h2, .card > h2:first-child, .hero h2, .kpi strong { font-family: var(--font); font-weight: 500; letter-spacing: -.03em; }
.ser { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--primary); }
.eyebrow, .stat-card .label, .account-meta dt {
  font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--primary);
}
.page-head .lead { color: var(--text-2); font-size: 16px; }
.beta { font: 500 10.5px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; border-color: var(--border-strong); color: var(--text-2); }

/* Shell */
.topbar { background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom-color: var(--border); }
@media (min-width: 960px) {
  .sidebar { background: var(--bg); border-right-color: var(--border); padding: 22px 16px; }
  .sidebar .logo { padding: 4px 8px 20px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
  .nav-link { position: relative; font-weight: 500; border-radius: 10px; color: var(--text-2); }
  .nav-link:hover { background: rgba(var(--hi-rgb), .06); color: var(--text); }
  .nav-link.on { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
  .nav-link.on::before { content: ""; position: absolute; inset-inline-start: -16px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--primary); box-shadow: 0 0 12px var(--primary); }
  .nav-link.on .icon { color: var(--primary); }
  .sidebar .usage { background: var(--surface); border: 1px solid var(--border); }
  .sidebar .usage .meter { background: var(--surface-2); }
}
.tabbar { background: color-mix(in srgb, var(--bg) 86%, transparent); border-top-color: var(--border); }
.tabbar .fab { background: var(--cta-bg); color: var(--cta-fg); border-radius: 999px; box-shadow: 0 10px 30px -8px rgba(var(--hi-rgb), .6); }

/* Surfaces: flat panels, hairline borders, no drop shadows. */
.card, .kpi, .quick a, .access-item, .stat-card { background: var(--surface); border-color: var(--border); box-shadow: none; }
.card { border-radius: var(--radius-l); }
.quick a, .access-item { transition: border-color .2s, transform .2s, background .2s; }
.quick a:hover, .access-item:hover { border-color: rgba(var(--hi-rgb), .4); transform: translateY(-1px); }
.menu-panel { background: var(--surface-2); border-color: var(--border-strong); }
.menu-panel a:hover, .menu-panel button:hover { background: rgba(var(--hi-rgb), .07); }
.toast { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); }

/* The dashboard "today" card: a dark panel with the site's teal glow and fine grain instead of a flat teal block. */
.hero {
  color: var(--text); border: 1px solid rgba(var(--hi-rgb), .25);
  background:
    radial-gradient(70% 90% at 50% 120%, rgba(var(--hi-rgb), .28), transparent 70%),
    radial-gradient(40% 60% at 0% 0%, rgba(var(--hi-rgb), .10), transparent 70%),
    var(--surface);
}
.hero h2 { color: var(--text); }
.hero p, .hero .small { color: var(--text-2); }
.hero label.field-label { color: var(--text); }
.hero .pill { background: transparent; border-color: var(--border-strong); color: var(--text); }
.hero .pill:has(input:checked) { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg); }
.hero .btn.light { background: var(--cta-bg); color: var(--cta-fg); }
.hero .btn.light:hover { background: var(--cta-hover); }

/* Buttons: pill shapes; the main action is a white pill in dark mode, ink in light mode, like the site. */
.btn, .btn.small, .btn.lg { border-radius: 999px; font-weight: 500; letter-spacing: -.005em; transition: transform .2s, background .2s, box-shadow .2s, border-color .2s; }
.btn { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
.btn:hover { background: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 10px 30px -10px rgba(var(--hi-rgb), .55); }
.btn.secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn.secondary:hover { background: rgba(var(--hi-rgb), .06); box-shadow: none; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: rgba(var(--hi-rgb), .06); color: var(--text); box-shadow: none; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.sidebar .create { background: var(--cta-bg); color: var(--cta-fg); }

/* Forms */
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select, textarea {
  background: var(--surface); border-color: var(--border-strong); border-radius: 12px;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
label, .field-label { font-weight: 550; }
.choices label, .pill { background: transparent; border-color: var(--border-strong); font-weight: 500; }
.choices label:has(input:checked), .pill:has(input:checked) { background: var(--primary-soft); border-color: rgba(var(--hi-rgb), .6); color: var(--primary); }
.segmented { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.segmented label { border-radius: 999px; font-weight: 500; }
.segmented label:has(input:checked) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* Badges and tables */
.badge { font-weight: 600; border: 1px solid var(--border); background: transparent; }
.badge.primary { border-color: rgba(var(--hi-rgb), .3); }
table th { font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* Sign-in pages: same canvas, the aside becomes the site's glowing panel. */
.auth-aside {
  background: radial-gradient(70% 60% at 50% 115%, rgba(42, 212, 226, .3), transparent 70%), #050708 !important;
  border-inline-end: 1px solid rgba(255, 255, 255, .08);
}
@media (min-width: 960px) { .auth-aside h2 { font-family: var(--font); font-weight: 500; letter-spacing: -.045em; } }

/* ---------- Soft UI, matching the public site (2026-11): neutral canvas, raised docks and cards, pressed active
   states, a theme switch, square-ish buttons, light headlines with a teal accent in the same face. ---------- */
:root {
  --bg: #ededec; --surface: #f4f4f3; --surface-2: #e6e7e6;
  --dock-bg: #ededec; --dock-line: transparent;
  --dock-sh: -4px -4px 10px rgba(255, 255, 255, .95), 4px 4px 11px rgba(0, 0, 0, .13);
  --card-sh: -6px -6px 16px rgba(255, 255, 255, .9), 8px 10px 24px rgba(0, 0, 0, .09);
  --press-bg: #e7e7e6; --press-sh: inset 3px 3px 7px rgba(0, 0, 0, .12), inset -3px -3px 7px rgba(255, 255, 255, .9);
  --knob-bg: #f3f3f2; --knob-sh: -2px -2px 5px rgba(255, 255, 255, .9), 2px 2px 5px rgba(0, 0, 0, .16);
  --panel-sh: -6px -6px 18px rgba(255, 255, 255, .9), 10px 14px 34px rgba(0, 0, 0, .16);
  --border: rgba(5, 7, 8, .08); --fg-rgb: 11, 18, 21;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --surface: #0b0f11; --dock-bg: #0d1214; --dock-line: rgba(255, 255, 255, .07);
    --dock-sh: 0 12px 30px -14px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
    --card-sh: 0 20px 50px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
    --press-bg: #070a0b; --press-sh: inset 2px 2px 6px rgba(0, 0, 0, .7), inset -1px -1px 2px rgba(255, 255, 255, .04);
    --knob-bg: #1b2326; --knob-sh: 0 2px 6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1);
    --panel-sh: 0 30px 70px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .04);
    --border: rgba(255, 255, 255, .08); --fg-rgb: 255, 255, 255;
  }
}
:root[data-theme=dark] {
  --surface: #0b0f11; --dock-bg: #0d1214; --dock-line: rgba(255, 255, 255, .07);
  --dock-sh: 0 12px 30px -14px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
  --card-sh: 0 20px 50px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
  --press-bg: #070a0b; --press-sh: inset 2px 2px 6px rgba(0, 0, 0, .7), inset -1px -1px 2px rgba(255, 255, 255, .04);
  --knob-bg: #1b2326; --knob-sh: 0 2px 6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1);
  --panel-sh: 0 30px 70px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .04);
  --border: rgba(255, 255, 255, .08); --fg-rgb: 255, 255, 255;
}
:root[data-theme=light] { --bg: #ededec; }

/* Type: lighter headlines, the accent phrase only changes colour. */
h1 { font-weight: 300; letter-spacing: -.035em; }
@media (min-width: 960px) { h1 { font-size: 46px; } }
h2 { font-weight: 400; }
.ser { font: inherit; letter-spacing: inherit; color: var(--primary); }
[dir=rtl] h1 { font-weight: 500; letter-spacing: 0; }
[dir=rtl] h2 { font-weight: 600; letter-spacing: 0; }
.lab { display: flex; align-items: center; gap: 8px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin: 34px 0 14px; }
.lab .num { color: var(--primary); }
.lab .more { margin-inline-start: auto; font: 500 13px var(--font); letter-spacing: 0; text-transform: none; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.lab .more:hover { color: var(--text); text-decoration-color: var(--primary); }
[dir=rtl] .lab { letter-spacing: 0; }
.s-pill { display: inline-flex; align-items: center; gap: 9px; font: 500 13px/1 var(--font); color: var(--text-2); background: var(--dock-bg); border: 1px solid var(--border-strong); padding: 8px 14px; border-radius: 999px; }
.s-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px rgba(var(--hi-rgb), .7); animation: p-pulse 1.8s ease-in-out infinite; flex: none; }
@keyframes p-pulse { 50% { opacity: .35; } }

/* Shell: the sidebar floats as a raised dock; the top bar sits on the canvas. */
.shell > div::before { background: none; }
.content::before, .content::after { display: none; }
.topbar { background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom-color: transparent; }
@media (min-width: 960px) {
  .shell { grid-template-columns: calc(var(--sidebar) + 20px) 1fr; }
  .sidebar { margin: 14px 0 14px 14px; height: calc(100vh - 28px); top: 14px; border: 1px solid var(--dock-line) !important; border-radius: 24px; background: var(--dock-bg); box-shadow: var(--dock-sh); padding: 20px 14px; }
  [dir=rtl] .sidebar { margin: 14px 14px 14px 0; }
  .sidebar .logo { border-bottom: 0; padding: 4px 8px 12px; }
  .nav-link { border-radius: 12px; }
  .nav-link:hover { background: transparent; color: var(--text); }
  .nav-link.on { background: var(--press-bg); box-shadow: var(--press-sh); color: var(--text); }
  .nav-link.on::before { display: none; }
  .sidebar .usage { background: var(--press-bg); border: 0; box-shadow: var(--press-sh); border-radius: 16px; }
  .sidebar .usage .meter { background: rgba(var(--hi-rgb), .12); }
  .sidebar .create { border-radius: 14px; }
  .content { max-width: 1040px; }
  .topbar { padding: 14px 40px 6px; }
}

/* Header controls: theme switch with a sliding knob, language pill, avatar. */
.theme-switch { position: relative; width: 58px; height: 32px; flex: none; border-radius: 999px; border: 1px solid var(--dock-line); background: var(--press-bg); box-shadow: var(--press-sh); cursor: pointer; padding: 0; }
.theme-switch .knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--knob-bg); box-shadow: var(--knob-sh); color: var(--text-2); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.theme-switch .icon { width: 14px; height: 14px; }
:root[data-theme=dark] .theme-switch .knob { transform: translateX(26px); }
:root[data-theme=dark][dir=rtl] .theme-switch .knob { transform: translateX(-26px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-switch .knob { transform: translateX(26px); }
  :root:not([data-theme])[dir=rtl] .theme-switch .knob { transform: translateX(-26px); }
}
.lang-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--text-2); font: 500 12.5px var(--font-mono); cursor: pointer; }
.lang-pill:hover, .lang-pill[aria-expanded=true] { color: var(--text); background: var(--dock-bg); box-shadow: var(--dock-sh); border-color: var(--dock-line); }
.lang-pill .icon { width: 16px; height: 16px; }
.theme-switch:focus-visible, .lang-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.avatar { background: var(--dock-bg); box-shadow: var(--dock-sh); color: var(--primary); }
.menu-panel { background: var(--dock-bg); border-color: var(--dock-line); box-shadow: var(--panel-sh); border-radius: 16px; }

/* Surfaces: raised cards, no hairline borders in light mode. */
.card, .kpi, .quick a, .access-item, .stat-card, .feed a { background: var(--dock-bg); border-color: var(--dock-line); box-shadow: var(--card-sh); }
.card { border-radius: 22px; }
.feed a { border-radius: 16px; }
.feed a:hover, .quick a:hover, .access-item:hover { border-color: var(--dock-line); box-shadow: var(--card-sh), 0 0 0 1px rgba(var(--hi-rgb), .35); }
.feed .kind, .quick .ico, .kpi .ico { background: var(--press-bg) !important; box-shadow: var(--press-sh); color: var(--primary) !important; }

/* Buttons: ink primary, soft raised secondary, 12px corners like the site. */
.btn, .btn.small, .btn.lg { border-radius: 12px; }
.btn.lg { border-radius: 14px; }
.btn:hover { box-shadow: 0 10px 24px -10px rgba(var(--fg-rgb, 11, 18, 21), .45); }
.btn.secondary { background: var(--dock-bg); border-color: var(--dock-line); box-shadow: var(--dock-sh); }
.btn.secondary:hover { background: var(--dock-bg); box-shadow: var(--dock-sh), 0 0 0 1px rgba(var(--hi-rgb), .35); }
.btn.secondary:active { background: var(--press-bg); box-shadow: var(--press-sh); }

/* Choice pills: raised; the chosen one is pressed in, with a teal dot. */
.choices label, .pill { background: var(--dock-bg); border-color: var(--dock-line); box-shadow: var(--dock-sh); color: var(--text-2); }
.choices label:has(input:checked), .pill:has(input:checked) { background: var(--press-bg); box-shadow: var(--press-sh); border-color: transparent; color: var(--text); }
.choices label:has(input:checked)::before, .pill:has(input:checked)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px rgba(var(--hi-rgb), .8); flex: none; }
.segmented { background: var(--press-bg); box-shadow: var(--press-sh); border: 0; }
.segmented label:has(input:checked) { background: var(--dock-bg); box-shadow: var(--dock-sh); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select, textarea { background: var(--press-bg); box-shadow: var(--press-sh); border-color: transparent; }

/* ---------- Dashboard ---------- */
.dash-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.dash-head h1 { margin: 0; max-width: 20ch; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-kpis .kpi { flex-direction: column; align-items: flex-start; gap: 18px; padding: 18px 20px; border-radius: 20px; }
.dash-kpis .kpi strong { font-size: 40px; font-weight: 300; letter-spacing: -.04em; line-height: 1; display: block; }
.dash-kpis .kpi span:not(.ico) { display: block; margin-top: 6px; color: var(--text-2); font-size: 13.5px; }
.dash-today { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; padding: 0 !important; overflow: hidden; border: 1px solid var(--dock-line) !important; background: var(--dock-bg) !important; color: var(--text); }
.dash-today::after { display: none; }
.dash-today .today-form { padding: 28px; display: grid; gap: 12px; align-content: start; }
.dash-today h2 { font-size: 28px !important; margin: 0 !important; letter-spacing: -.03em; }
.dash-today p { margin: 0 0 6px; color: var(--text-2); }
.dash-today .field-label { margin-top: 6px; color: var(--text) !important; }
.dash-today .btn.light, .dash-today .btn { background: var(--cta-bg); color: var(--cta-fg); justify-self: start; margin-top: 10px; }
.dash-today .pill { background: var(--dock-bg); border-color: var(--dock-line); color: var(--text-2); }
.dash-today .pill:has(input:checked) { background: var(--press-bg); color: var(--text); border-color: transparent; }
.today-scene { position: relative; min-height: 320px; background: var(--press-bg); box-shadow: var(--press-sh); border-radius: 0 22px 22px 0; }
[dir=rtl] .today-scene { border-radius: 22px 0 0 22px; }
.today-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.today-scene .tag { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; z-index: 1; }
.dash-quick { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dash-quick a { border-radius: 18px; padding: 18px; gap: 10px; }
.dash-quick a:only-child, .dash-quick:has(a:nth-child(3):last-child) { }
.dash-quick:has(a:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.setup .done .dot { background: var(--primary); border-color: var(--primary); }
@media (max-width: 899px) {
  .dash-today { grid-template-columns: 1fr; }
  .today-scene { min-height: 220px; border-radius: 0 0 22px 22px !important; order: -1; }
  .dash-quick, .dash-quick:has(a:nth-child(3):last-child) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .dash-kpis { gap: 8px; }
  .dash-kpis .kpi { padding: 14px; gap: 12px; }
  .dash-kpis .kpi strong { font-size: 30px; }
  .dash-today .today-form { padding: 20px; }
}