/* Softnamic Hosting. Tokens and patterns from website-vercel (Morné's Vercel-style Softnamic site):
   monochrome first, colour means something (blue action/info, green done, amber needs a person),
   Geist, mono labels, hairlines and rails, pill buttons. Light and dark follow the system. */

@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --brand-ink: #101010; --brand-light: #e4e4e4; --brand-green: #92ce31; --brand-blue: #3170ce;
  --gradient: linear-gradient(120deg, var(--brand-green) 0%, var(--brand-blue) 100%);
  --bg: #ffffff; --bg-2: #fafafa; --fg: var(--brand-ink);
  --gray-100: #f2f2f2; --gray-200: #ebebeb; --gray-300: #e6e6e6; --gray-400: #d9d9d9; --gray-500: #c7c7c7; --gray-600: #a3a3a3; --gray-700: #8f8f8f; --gray-900: #5c5c5c;
  --line: rgba(16, 16, 16, 0.09); --line-strong: rgba(16, 16, 16, 0.16);
  --blue: #2b63b8; --blue-bg: rgba(49, 112, 206, 0.09); --green: #4f7a12; --green-solid: var(--brand-green); --green-bg: rgba(146, 206, 49, 0.16);
  --amber: #a35200; --amber-bg: rgba(255, 166, 0, 0.14); --red: #c9353a; --red-bg: rgba(229, 72, 77, 0.1);
  --shadow-card: 0 0 0 1px var(--line), 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 16px -4px rgba(0, 0, 0, 0.04);
  --shadow-menu: 0 0 0 1px var(--line), 0 4px 8px -4px rgba(0, 0, 0, 0.06), 0 16px 24px -8px rgba(0, 0, 0, 0.08);
  --accent: var(--brand-blue); --accent-ink: #fff;
  --page: 1200px; --nav-h: 64px; --radius: 6px; --radius-lg: 12px;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "DejaVu Sans Mono", "Noto Sans Mono", monospace;
  --fs-hero: clamp(2.6rem, 7vw, 5.5rem); --fs-h2: clamp(2rem, 4.2vw, 3.5rem); --fs-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--brand-ink); --bg-2: #0b0b0b; --fg: #ededed;
    --gray-100: #1a1a1a; --gray-200: #1f1f1f; --gray-300: #292929; --gray-400: #2e2e2e; --gray-500: #454545; --gray-600: #5e5e5e; --gray-700: #8f8f8f; --gray-900: #a1a1a1;
    --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16);
    --blue: #6d9be0; --blue-bg: rgba(49, 112, 206, 0.18); --green: var(--brand-green); --green-bg: rgba(146, 206, 49, 0.14);
    --amber: #ffb224; --amber-bg: rgba(255, 178, 36, 0.12); --red: #ff6369; --red-bg: rgba(229, 72, 77, 0.14);
    --shadow-card: 0 0 0 1px var(--line); --shadow-menu: 0 0 0 1px var(--line-strong), 0 16px 32px -8px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--brand-ink); --bg-2: #0b0b0b; --fg: #ededed;
  --gray-100: #1a1a1a; --gray-200: #1f1f1f; --gray-300: #292929; --gray-400: #2e2e2e; --gray-500: #454545; --gray-600: #5e5e5e; --gray-700: #8f8f8f; --gray-900: #a1a1a1;
  --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16);
  --blue: #6d9be0; --blue-bg: rgba(49, 112, 206, 0.18); --green: var(--brand-green); --green-bg: rgba(146, 206, 49, 0.14);
  --amber: #ffb224; --amber-bg: rgba(255, 178, 36, 0.12); --red: #ff6369; --red-bg: rgba(229, 72, 77, 0.14);
  --shadow-card: 0 0 0 1px var(--line); --shadow-menu: 0 0 0 1px var(--line-strong), 0 16px 32px -8px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
h3 { font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.3; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
code, kbd, pre, .mono { font-family: var(--font-mono); }
.mono { font-size: 0.92em; }
::selection { background: var(--brand-green); color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--radius); }

.label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--gray-900); }
.muted { color: var(--gray-900); }
.small { font-size: 0.875rem; }
.center { text-align: center; justify-content: center; }
.ok { color: var(--green); } .warn { color: var(--amber); } .err { color: var(--red); }
.link { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gradient-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; margin-right: -0.06em; }
.break { word-break: break-all; }
.hide-sm { }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 0.8125rem; }
.btn.lg { height: 48px; padding: 0 22px; font-size: 1rem; }
.btn.wide { width: 100%; }
/* the primary action is Softnamic blue; on hover it turns green with ink text (brand guide) */
.btn.primary { background: var(--brand-blue); color: #fff; }
.btn.primary:hover { background: var(--brand-green); color: var(--brand-ink); }
.app .btn.primary, .auth .btn.primary { background: var(--accent); color: var(--accent-ink); }
.app .btn.primary:hover, .auth .btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); color: var(--accent-ink); }
.btn.secondary { background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong); }
.btn.secondary:hover { background: var(--gray-100); }
.btn.tertiary { background: transparent; color: var(--gray-900); }
.btn.tertiary:hover { background: var(--gray-100); color: var(--fg); }
.btn.danger { color: var(--red); }
.btn .arrow { transition: transform .15s var(--ease); }
.btn:hover .arrow { transform: translateX(2px); }

/* ---------- test bar ---------- */
.testbar { white-space: nowrap; overflow: hidden; height: 34px; position: relative; z-index: 120; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 16px; background: color-mix(in srgb, #f97316 12%, var(--bg)); color: #ea580c; font-size: 0.8125rem; border-bottom: 1px solid rgba(249, 115, 22, 0.25); text-align: center; }
body:has(> .testbar) { --tb: 34px; }
.testbar .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.testbar a { text-decoration: underline; text-underline-offset: 2px; }
.public .testbar { position: fixed; inset: 0 0 auto; }
.public.has-testbar { --bar: 34px; }
.public .nav { top: var(--bar); }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); }
.logo-mark, .logo-word { display: block; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.logo-mark { --src: url("/brand/logo.svg"); width: 30px; height: 12.4px; }
.logo-word { --src: url("/brand/wordmark.svg"); width: 80px; height: 13px; }
span.product { margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line-strong); font-size: 0.875rem; font-weight: 500; color: var(--gray-900); }

/* ---------- public nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 100%; max-width: calc(var(--page) + 48px); margin: 0 auto; padding-inline: clamp(16px, 3vw, 24px); }
.home { flex: none; display: inline-flex; align-items: center; padding: 6px 0; }
.links { display: flex; gap: 2px; }
.links a { padding: 6px 12px; border-radius: 999px; font-size: 0.875rem; color: var(--gray-900); transition: color .15s var(--ease), background-color .15s var(--ease); }
.links a:hover, .links a[aria-current] { color: var(--fg); background: var(--gray-100); }
.nav .actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav .me { gap: 8px; padding-left: 4px; }
.me-chip { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-blue), var(--brand-green)); color: #fff; font-size: 0.6875rem; font-weight: 600; }
.menu-btn { display: none; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
/* outside .nav on purpose: the nav's backdrop-filter would make it the containing block and squash the panel */
.menu { position: fixed; inset: calc(var(--nav-h) + var(--bar, 0px)) 0 0; z-index: 99; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 16px 16px 32px; background: var(--bg); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.125rem; font-weight: 500; }
@media (max-width: 899px) { .links { display: none; } .menu-btn { display: grid; } .nav .actions .btn.primary { display: none; } }

/* ---------- page rails and bands ---------- */
.page { width: 100%; max-width: calc(var(--page) + 2px); margin-inline: auto; }
.rails { border-inline: 1px solid var(--line); }
main.page { padding-top: calc(var(--nav-h) + var(--bar, 0px)); }
.band { position: relative; border-top: 1px solid var(--line); }
.band.hero { border-top: 0; overflow: hidden; isolation: isolate; }
.cross { position: absolute; z-index: 2; top: -6px; width: 11px; height: 11px; pointer-events: none; background: linear-gradient(var(--gray-700), var(--gray-700)) center / 1px 100% no-repeat, linear-gradient(var(--gray-700), var(--gray-700)) center / 100% 1px no-repeat; }
.cross.l { left: -6px; } .cross.r { right: -6px; }
.band.hero .cross { display: none; }
@media (max-width: 1239px) { .rails { border-inline: 0; } .cross { display: none; } }
.pad { padding: 0 clamp(16px, 4vw, 48px) clamp(48px, 6vw, 80px); }
.pad.center { display: flex; }

.head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 24px 64px; padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 48px) clamp(36px, 5vw, 56px); }
.head .label { margin-bottom: 18px; }
.head h2 { font-size: var(--fs-h2); }
.quiet { color: var(--gray-700); }
.aside { max-width: 460px; font-size: var(--fs-lead); line-height: 1.5; color: var(--gray-900); display: grid; gap: 18px; justify-items: start; }
@media (max-width: 1023px) { .head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- hero ---------- */
.backdrop { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, var(--brand-blue) 16%, transparent), transparent 70%), radial-gradient(40% 30% at 30% 100%, color-mix(in srgb, var(--brand-green) 12%, transparent), transparent 70%), linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(to bottom, var(--line) 1px, transparent 1px) 0 0 / 64px 64px; -webkit-mask: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 55%, #000 100%); mask: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 55%, #000 100%); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: end; gap: 40px; padding: clamp(48px, 9vw, 112px) clamp(16px, 4vw, 48px) clamp(32px, 4vw, 48px); }
.copy { display: flex; flex-direction: column; align-items: flex-start; }
.badge { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--bg); box-shadow: 0 0 0 1px var(--line-strong); font-size: 0.8125rem; font-weight: 500; color: var(--gray-900); max-width: 100%; }
.badge:not(.static):hover { color: var(--fg); background: var(--gray-100); }
.badge-tag { padding: 3px 9px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 0.75rem; font-weight: 600; }
.hero-title { margin-top: 28px; font-size: var(--fs-hero); line-height: 1; letter-spacing: -0.055em; }
.hero-title.sm { font-size: clamp(2.4rem, 6vw, 4.5rem); margin-top: 16px; }
.hero-title.xs { font-size: clamp(2rem, 4.5vw, 3.25rem); margin-top: 16px; }
.lead { max-width: 600px; margin-top: 24px; font-size: var(--fs-lead); line-height: 1.5; color: var(--gray-900); }
/* same 18px gap as the toggle under the .aside text on the home page */
.lead + .seg { display: flex; width: fit-content; margin-top: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-aside ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.hero-aside a { display: block; padding: 6px 0; font-size: 0.9375rem; color: var(--gray-900); }
.hero-aside a:hover { color: var(--fg); }
.hero-search { padding: 0 clamp(16px, 4vw, 48px) clamp(48px, 7vw, 88px); }
.page-hero { padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 72px); }
.page-hero.tight { padding-bottom: 32px; }
.page-hero .dsearch { margin-top: 32px; }
.cta { padding: clamp(64px, 10vw, 128px) clamp(16px, 4vw, 48px); text-align: center; display: grid; justify-items: center; gap: 16px; }
.cta h1, .cta h2 { font-size: var(--fs-h2); }
@media (max-width: 1023px) { .hero-top { grid-template-columns: minmax(0, 1fr); } .hero-aside { display: none; } }
@media (max-width: 639px) { .hero-actions, .hero-actions .btn { width: 100%; } }

/* ---------- domain search ---------- */
.dsearch { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--bg); box-shadow: var(--shadow-menu); max-width: 720px; }
.dsearch.big { padding: 8px 8px 8px 20px; }
.dsearch-icon { color: var(--gray-700); flex: none; }
.dsearch input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; outline: none; font-size: 1rem; box-shadow: none !important; padding: 0 4px !important; }
.dsearch.big input { font-size: 1.125rem; height: 44px; }
.dresults { max-width: 720px; margin-top: 16px; display: grid; gap: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); background: var(--bg); }
.dresults:empty { display: none; }
.dres { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.dres:last-child { border-bottom: 0; }
.dres .name { font-family: var(--font-mono); overflow-wrap: anywhere; }
.dres.taken .name { color: var(--gray-700); }
.dres .p { font-family: var(--font-mono); font-size: 0.875rem; }
.dres.first { background: var(--bg-2); }
.dmsg { padding: 14px 16px; color: var(--gray-900); font-size: 0.9375rem; }
@media (max-width: 639px) { .dres { grid-template-columns: minmax(0, 1fr) auto; } .dres .btn, .dres .tagwrap { grid-column: 1 / -1; justify-self: start; } .dsearch .btn { padding: 0 14px; } }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 1px solid var(--line); }
.plan { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); border-right: 1px solid var(--line); }
.plan:last-child { border-right: 0; }
.plan.popular { background: var(--bg-2); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan h3 { font-size: 1.375rem; }
.price { font-size: 2.75rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1; margin-top: 8px; }
.price small { font-size: 0.9375rem; font-weight: 400; color: var(--gray-900); letter-spacing: 0; margin-left: 4px; }
.ticks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; font-size: 0.9375rem; }
.ticks li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; color: var(--gray-900); }
.ticks svg { margin-top: 4px; color: var(--green); }
.ticks li.inherit { grid-template-columns: 1fr; color: var(--fg); font-weight: 500; }
@media (max-width: 899px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan { border-right: 0; border-bottom: 1px solid var(--line); } }

/* plan carousel (every page but home): cards as wide as the home page's four, fewer plans stretch to fill, more scroll */
.carousel { position: relative; border-top: 1px solid var(--line); }
.plans.scroll { display: flex; border-top: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-top: 4px; margin-top: -4px; }
.plans.scroll::-webkit-scrollbar { display: none; }
.plans.scroll .plan { flex: 1 0 25%; scroll-snap-align: start; border-right: 1px solid var(--line); border-bottom: 0; }
.plans.scroll .plan:last-child { border-right: 0; }
.car-btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 999px; background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), 0 6px 20px rgba(0,0,0,.18); cursor: pointer; transition: background-color .15s var(--ease), opacity .2s var(--ease); }
.car-btn:hover { background: var(--gray-100); }
.car-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.car-btn.prev { left: -22px; }
.car-btn.next { right: -22px; }
@media (max-width: 1239px) { .car-btn.prev { left: 8px; } .car-btn.next { right: 8px; } }
.car-btn.prev .arrow { transform: rotate(180deg); }
.car-btn[hidden] { display: none; }
@media (max-width: 1023px) { .plans.scroll .plan { flex: 0 0 50%; } }
@media (max-width: 639px) { .plans.scroll .plan { flex: 0 0 86%; } .car-btn { width: 38px; height: 38px; margin-top: -19px; } .car-btn.prev { left: 4px; } .car-btn.next { right: 4px; } }

.seg { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line-strong); background: var(--bg); gap: 2px; }
.seg.wrap { flex-wrap: wrap; border-radius: 14px; }
.seg button, .seg label span { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--gray-900); font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.seg button[aria-pressed="true"], .seg input:checked + span { background: var(--fg); color: var(--bg); }
.seg label { display: inline-flex; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.save { font-size: 0.75rem; color: var(--green); font-weight: 600; }
.seg button[aria-pressed="true"] .save, .seg input:checked + span .save { color: inherit; opacity: .8; }

/* ---------- cells ---------- */
.cells { display: grid; border-top: 1px solid var(--line); }
.cells.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell { padding: clamp(24px, 3vw, 36px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; align-content: start; gap: 10px; }
.cells.c3 .cell:nth-child(3n), .cells.c4 .cell:nth-child(4n) { border-right: 0; }
.cell h3 { font-size: 1.1875rem; }
.cell .muted { font-size: 0.9375rem; }
.tld-name { font-size: 1.25rem; font-weight: 500; }
.tld-price { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.04em; }
.tld-price small { font-size: 0.875rem; font-weight: 400; color: var(--gray-900); letter-spacing: 0; }
.cells + .pad { padding-top: 32px; }
@media (max-width: 899px) { .cells.c3, .cells.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cells .cell:nth-child(n) { border-right: 1px solid var(--line); } .cells .cell:nth-child(2n) { border-right: 0; } }
@media (max-width: 559px) { .cells.c3 { grid-template-columns: minmax(0, 1fr); } .cells.c3 .cell { border-right: 0; } }

/* ---------- product window (portal preview) ---------- */
.window { border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-menu); overflow: hidden; }
.chrome { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.chrome .crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.875rem; color: var(--gray-900); white-space: nowrap; overflow: hidden; }
.org { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #e8590c; }
.slash { color: var(--gray-500); }
.strong { color: var(--fg); font-weight: 500; }
.win-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.win-stats > div { padding: 16px; border-right: 1px solid var(--line); }
.win-stats > div:last-child { border-right: 0; }
.win-stats .v { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; margin-top: 4px; }
.win-stats .v small { font-size: 0.875rem; color: var(--gray-700); font-weight: 400; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 120px 70px; align-items: center; gap: 16px; min-height: 60px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.rows li:last-child { border-bottom: 0; }
.task { display: flex; flex-direction: column; min-width: 0; }
.task b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task small { color: var(--gray-900); }
@media (max-width: 719px) { .win-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .win-stats > div:nth-child(2) { border-right: 0; } .win-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .rows li { grid-template-columns: minmax(0, 1fr) auto; } .rows li > :nth-child(3) { display: none; } .rows li .status { grid-column: 1 / -1; } }

/* ---------- status ---------- */
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--gray-900); font-size: 0.875rem; white-space: nowrap; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-500); flex: none; }
.status.ok { color: var(--fg); } .status.ok .dot { background: var(--green-solid); }
.status.info { color: var(--blue); } .status.info .dot { background: var(--blue); }
.status.warn { color: var(--amber); } .status.warn .dot { background: var(--amber); }
.status.err { color: var(--red); } .status.err .dot { background: var(--red); }
.dot.pulse { animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line-strong); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--gray-900); white-space: nowrap; vertical-align: middle; }
.tag.ok { background: var(--green-bg); color: var(--green); box-shadow: none; }
.tag.info { background: var(--blue-bg); color: var(--blue); box-shadow: none; }
.tag.warn { background: var(--amber-bg); color: var(--amber); box-shadow: none; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare, .table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.compare th, .compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare thead th { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; color: var(--gray-900); }
.compare tbody th { font-weight: 500; color: var(--gray-900); }
.compare td svg { color: var(--green); }
.compare tr.group th { padding-top: 28px; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; color: var(--gray-700); font-weight: 500; }
.compare { min-width: 560px; }
.table { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); background: var(--bg); overflow: hidden; }
.table th { padding: 10px 14px; text-align: left; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; font-weight: 500; color: var(--gray-900); background: var(--bg-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[data-href] { cursor: pointer; }
.table tbody tr[data-href]:hover td { background: var(--bg-2); }
.table .r { text-align: right; }
.table.inv { box-shadow: none; border-radius: 0; margin-top: 24px; }
.table.inv tfoot td { padding: 14px; border-top: 1px solid var(--line-strong); }
.empty { padding: 32px; text-align: center; color: var(--gray-900); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line); background: var(--bg-2); font-size: 0.9375rem; }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; font-size: 0.875rem; min-width: 0; }
.field > span:first-child { font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
.field small { color: var(--gray-900); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 0.9375rem; transition: box-shadow .15s var(--ease); }
/* our own chevron, inset from the edge like the text (the native arrow hugs the border) */
select:not([multiple]) { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238f8f8f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
select:not([multiple])::-ms-expand { display: none; }
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input:hover, select:hover, textarea:hover { box-shadow: inset 0 0 0 1px var(--gray-600); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--fg), 0 0 0 3px var(--blue-bg); }
input[readonly] { background: var(--bg-2); }
/* sliders, like the coming-soon carousel bars: one brand gradient spans the track, full strength
   up to the thumb and faint (22%) beyond it (--pct is set by site.js) */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 10px 0; border-radius: 999px; cursor: pointer; background: linear-gradient(to right, transparent var(--pct, 50%), color-mix(in srgb, var(--bg) 78%, transparent) var(--pct, 50%)), var(--gradient); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px var(--brand-blue), 0 2px 6px rgba(0, 0, 0, 0.3); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px var(--brand-blue), 0 2px 6px rgba(0, 0, 0, 0.3); }
input[type="range"]::-moz-range-track { background: transparent; }
input[type="range"]:focus-visible { outline-offset: 6px; }
input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 0; border-radius: var(--radius); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; }
.affix { display: flex; align-items: center; gap: 8px; }
.affix > span { white-space: nowrap; font-size: 0.875rem; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--gray-900); margin-top: 8px; }
.check input { margin-top: 5px; accent-color: var(--fg); }
.stack { display: grid; gap: 16px; }
.stack.narrow { max-width: 420px; }
.stack-lg { display: grid; gap: 20px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row-in { display: flex; gap: 8px; }
.row-in input { flex: 1; }
.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.grid2, .grid3, .grid4 { display: grid; gap: 16px; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid3.end, .grid4.end { align-items: end; }
.span2 { grid-column: 1 / -1; }
@media (max-width: 899px) { .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); } .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-v { font-size: 1.375rem; } }
.filter { display: flex; gap: 8px; max-width: 480px; margin-bottom: 16px; }

/* ---------- notices ---------- */
.notice { display: block; padding: 12px 16px; border-radius: var(--radius-lg); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 16px; }
.notice .btn, .notice form { margin-left: 8px; vertical-align: middle; }
.notice.info { background: var(--blue-bg); color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 30%, transparent); }
.notice.ok { background: var(--green-bg); color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent); }
.notice.warn { background: var(--amber-bg); color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent); }
.notice.err { background: var(--red-bg); color: var(--fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 35%, transparent); }

/* ---------- calculator ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.calc-in { display: grid; gap: 22px; }
.calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.calc-out .stat { padding: 20px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.calc-out .stat:nth-child(2) { border-right: 0; }
.calc-out .stat.big { grid-column: 1 / -1; border-right: 0; }
.calc-out .stat.big .stat-v { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.calc-out > p { grid-column: 1 / -1; padding: 0 20px 16px; }
@media (max-width: 899px) { .calc { grid-template-columns: minmax(0, 1fr); } }

.steps { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.steps li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.steps .mono { color: var(--gray-700); font-size: 0.8125rem; }
@media (max-width: 899px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.faq { display: grid; max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: 18px 0; font-weight: 500; font-size: 1.0625rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--gray-700); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 20px; color: var(--gray-900); max-width: 720px; }

.prose { max-width: 760px; }
.prose h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 12px 0 8px; }
.prose h2 { font-size: 1.375rem; letter-spacing: -0.02em; margin: 36px 0 10px; }
.prose p, .prose li { color: var(--gray-900); margin-bottom: 12px; }
.prose { padding-top: clamp(40px, 6vw, 72px); }

/* ---------- order ---------- */
.order { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.order fieldset { border: 0; margin: 0 0 32px; padding: 0 0 32px; border-bottom: 1px solid var(--line); min-width: 0; }
.order legend { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 18px; padding: 0; display: flex; gap: 12px; align-items: baseline; }
.order legend .mono { font-size: 0.8125rem; color: var(--gray-700); font-weight: 400; }
.order .label { margin-bottom: 10px; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice-body { display: grid; gap: 4px; padding: 14px; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .15s var(--ease), background-color .15s var(--ease); height: 100%; }
.choice:hover .choice-body { background: var(--bg-2); }
.choice input:checked + .choice-body { box-shadow: inset 0 0 0 2px var(--fg); background: var(--bg-2); }
.choice input:focus-visible + .choice-body { outline: 2px solid var(--blue); outline-offset: 2px; }
.choice-top { display: flex; justify-content: space-between; gap: 8px; }
.choice-top small { color: var(--gray-900); }
.dbox { margin-top: 18px; display: grid; gap: 10px; }
.dbox[hidden] { display: none; }
.order-sum { position: sticky; top: calc(var(--nav-h) + var(--bar, 0px) + 20px); display: grid; gap: 14px; }
.sum-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.9375rem; }
.sum-lines li { display: flex; justify-content: space-between; gap: 12px; }
.sum-lines li span:last-child { font-family: var(--font-mono); white-space: nowrap; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.sum-total b { font-size: 1.75rem; letter-spacing: -0.03em; }
@media (max-width: 999px) { .order { grid-template-columns: minmax(0, 1fr); } .order-sum { position: static; } .choices { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 48px clamp(16px, 4vw, 48px) 32px; margin-bottom: 0; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
.foot-grid > div { display: grid; gap: 8px; align-content: start; }
.foot-grid a { font-size: 0.875rem; color: var(--gray-900); }
.foot-grid a:hover { color: var(--fg); }
.foot-grid .logo { margin-bottom: 8px; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.theme { display: inline-flex; padding: 2px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line-strong); }
.theme button { height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--gray-900); font-size: 0.75rem; cursor: pointer; }
.theme button[aria-pressed="true"] { background: var(--gray-200); color: var(--fg); }
@media (max-width: 799px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }

/* ---------- app shell ---------- */
.app { background: var(--bg-2); min-height: 100vh; display: flex; flex-direction: column; }
.appbar { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.appbar-inner { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 clamp(16px, 3vw, 24px); max-width: 1280px; margin: 0 auto; min-width: 0; }
.appbar .slash { font-size: 1.25rem; font-weight: 300; }
.appbar .crumbs { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--gray-900); min-width: 0; overflow: hidden; white-space: nowrap; }
.appbar .crumbs a:hover { color: var(--fg); }
.appbar .crumbs .strong { overflow: hidden; text-overflow: ellipsis; }
.appbar .actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.appbar .who { font-size: 0.8125rem; color: var(--gray-900); }
.app .logo-word { display: none; }
@media (min-width: 640px) { .app .logo-word { display: block; } }
.brand-chip { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; font-weight: 600; font-size: 0.8125rem; margin-right: 8px; flex: none; }
.brand-chip.lg { width: 40px; height: 40px; border-radius: 11px; font-size: 1.125rem; margin: 0; }
.tabs { display: flex; gap: 2px; padding: 0 clamp(8px, 2vw, 16px); max-width: 1280px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { position: relative; padding: 12px 10px; font-size: 0.875rem; color: var(--gray-900); white-space: nowrap; }
.tabs a:hover { color: var(--fg); }
.tabs a[aria-current] { color: var(--fg); }
.tabs a[aria-current]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--fg); }
.app-main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px clamp(16px, 3vw, 24px) 64px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); letter-spacing: -0.04em; overflow-wrap: anywhere; }
.page-head p { margin-top: 6px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.h2 { font-size: 1.25rem; letter-spacing: -0.02em; margin: 36px 0 14px; }
.card { background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px; min-width: 0; }
.card h3 { margin-bottom: 14px; }
.card > .notice:last-child { margin-bottom: 0; }
.app-main > .grid2, .app-main > .grid3, .app-main > .grid4 { margin-bottom: 16px; }
.stat { background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 20px; display: grid; gap: 6px; min-width: 0; }
.stat-v { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
.meter { display: grid; gap: 10px; }
.meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.875rem; flex-wrap: wrap; }
.meter-top span:first-child { font-weight: 500; }
.meter-bar { height: 6px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.meter-bar span { display: block; height: 100%; border-radius: inherit; background: var(--fg); }
.meter.hot .meter-bar span { background: var(--amber); }
.dl { display: grid; gap: 0; margin: 0 0 12px; font-size: 0.9375rem; }
.dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dl > div:last-child { border-bottom: 0; }
.dl dt { color: var(--gray-900); }
.dl dt { flex: none; }
.dl dd { margin: 0; text-align: right; overflow-wrap: break-word; min-width: 0; }
.subtabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.subtabs a { padding: 6px 12px; border-radius: 999px; font-size: 0.875rem; color: var(--gray-900); box-shadow: inset 0 0 0 1px var(--line); background: var(--bg); }
.subtabs a[aria-current] { background: var(--fg); color: var(--bg); box-shadow: none; }
.subtabs a[aria-current] .muted { color: inherit; opacity: .7; }
.app-main .table-wrap + .card, .app-main .empty + .card { margin-top: 16px; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 0.9375rem; }
.feed li { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.app-main > .feed { background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 4px 20px; }
@media (max-width: 599px) { .feed li { grid-template-columns: 1fr auto; } .feed li > :first-child { grid-column: 1 / -1; } }
.copyrow { display: flex; gap: 8px; margin-bottom: 14px; }
.copyrow input { flex: 1; min-width: 0; }
.paybar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--bg); box-shadow: inset 0 0 0 2px var(--fg); margin-bottom: 16px; }
.paybar b { font-size: 1.25rem; }
.inv-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.inv-head p:last-child { margin-top: 6px; }
.thread { display: grid; gap: 12px; margin-bottom: 16px; }
.msg { padding: 16px 20px; border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-card); }
.msg.staff { box-shadow: inset 0 0 0 1px var(--blue), var(--shadow-card); }
.msg .label { margin-bottom: 8px; }
.pkg-row { display: grid; grid-template-columns: 1.6fr repeat(3, 0.8fr) 1fr; gap: 12px; align-items: end; }
.pkg-row .row { grid-column: 1 / -1; }
@media (max-width: 899px) { .pkg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pkg-row > :first-of-type { grid-column: 1 / -1; } }
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.brand-preview { position: sticky; top: 130px; }
.bp { margin-top: 12px; padding: 20px; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; }
.bp-bar { display: flex; align-items: center; margin-bottom: 8px; }
.bp-input { height: 34px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-strong); }
.bp-btn { height: 36px; border-radius: 999px; color: #fff; display: grid; place-items: center; font-size: 0.875rem; font-weight: 500; }
@media (max-width: 899px) { .brand-grid { grid-template-columns: minmax(0, 1fr); } .brand-preview { position: static; } }
.viewas { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 8px 16px; background: var(--blue-bg); font-size: 0.875rem; flex-wrap: wrap; }
.appfoot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px clamp(16px, 3vw, 24px); max-width: 1280px; width: 100%; margin: 0 auto; font-size: 0.8125rem; color: var(--gray-900); border-top: 1px solid var(--line); }
@media (max-width: 639px) { .hide-sm { display: none !important; } .app-main { padding-top: 24px; } .inv-head { grid-template-columns: 1fr; } .appbar .tag { display: none; } }

/* ---------- auth ---------- */
.auth { background: var(--bg-2); min-height: 100vh; }
.auth-main { min-height: calc(100vh - 34px); display: grid; place-content: center; gap: 16px; padding: 32px 16px; }
.auth-card { width: min(400px, calc(100vw - 32px)); background: var(--bg); border-radius: 16px; box-shadow: var(--shadow-menu); padding: 32px; display: grid; gap: 18px; }
.auth-card h1 { font-size: 1.75rem; }
.auth-brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.125rem; margin-bottom: 8px; }
.auth-card .notice { margin: 0; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* =====================================================================
   Signed-in readability: sans labels, sentence-case headers, tabular numbers.
   Mono stays for IDs and technical values (usernames, DNS, IPs).
   ===================================================================== */
.num { font-variant-numeric: tabular-nums; }
.app .label { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gray-900); }
.app .table th { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--gray-900); background: transparent; padding: 12px 16px; }
.app .table td { padding: 14px 16px; font-size: 0.9375rem; }
.app .table td .mono { font-size: 0.8125rem; }
.app .stat-v { font-size: 1.875rem; letter-spacing: -0.03em; }
.app .stat { padding: 20px; }
.app .meter-top { font-size: 0.875rem; }
.app .meter-top b { font-weight: 600; }
.dom { font-weight: 500; overflow-wrap: anywhere; }
.sub { display: block; font-size: 0.8125rem; color: var(--gray-900); margin-top: 2px; }
.app .page-head h1 { font-size: clamp(1.625rem, 3vw, 2rem); }
.app .h2 { font-size: 1.125rem; margin: 32px 0 12px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-head h3 { margin: 0; }
.card-head a { font-size: 0.875rem; color: var(--gray-900); }
.card-head a:hover { color: var(--fg); }

/* ---------- reseller shell ---------- */
.reseller .shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: calc(100vh - var(--tb, 0px)); }
.reseller > .viewas, .reseller > .testbar { flex: none; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 8px; padding: 18px 12px; border-right: 1px solid var(--line); background: var(--bg); overflow-y: auto; }
.side-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.side-brand-text { display: grid; line-height: 1.25; min-width: 0; }
.side-brand-text b { font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-brand-text small { color: var(--gray-900); font-size: 0.8125rem; }
.side-nav { display: grid; gap: 14px; }
.nav-group { display: grid; gap: 2px; }
.nav-label { padding: 6px 10px 4px; font-size: 0.75rem; font-weight: 500; color: var(--gray-700); }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--gray-900); font-size: 0.9375rem; text-align: left; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.nav-item:hover { background: var(--gray-100); color: var(--fg); }
.nav-item[aria-current] { background: var(--gray-200); color: var(--fg); font-weight: 500; }
.nav-item[aria-current] .nicon { color: var(--brand-blue); }
.nicon { flex: none; }
.nav-count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--gray-200); color: var(--gray-900); font-size: 0.75rem; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.nav-count.warn { background: var(--amber-bg); color: var(--amber); }
.nav-count.info { background: var(--blue-bg); color: var(--blue); }
.side-foot { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.side-foot form { margin: 0; }
.side-by { display: flex; align-items: center; gap: 8px; padding: 12px 10px 2px; color: var(--gray-700); font-size: 0.75rem; }
.side-by .logo { color: var(--gray-700); }
.side-by .logo-mark { width: 20px; height: 8.3px; }
.side-by .logo-word { width: 56px; height: 9px; display: block; }
.shell-main { min-width: 0; display: flex; flex-direction: column; background: var(--bg-2); }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 clamp(16px, 3vw, 32px); background: color-mix(in srgb, var(--bg-2) 85%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .crumbs { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--gray-900); min-width: 0; overflow: hidden; white-space: nowrap; }
.topbar .crumbs a:hover { color: var(--fg); }
.topbar .crumbs .strong { overflow: hidden; text-overflow: ellipsis; }
.topbar .who { margin-left: auto; font-size: 0.8125rem; color: var(--gray-900); }
.reseller .app-main { max-width: 1240px; padding: 28px clamp(16px, 3vw, 32px) 64px; margin: 0; }
.reseller .appfoot { max-width: none; margin: 0; padding-inline: clamp(16px, 3vw, 32px); }
@media (max-width: 1023px) {
  .reseller .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: sticky; top: 0; z-index: 50; height: auto; flex-direction: row; align-items: center; gap: 4px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .side::-webkit-scrollbar { display: none; }
  .side-brand { padding: 0 8px 0 0; margin: 0; border: 0; flex: none; }
  .side-brand-text { display: none; }
  .side-nav { display: flex; gap: 2px; }
  .nav-group { display: flex; gap: 2px; }
  .nav-label, .side-foot .side-by, .side-foot a { display: none; }
  .nav-item { width: auto; white-space: nowrap; flex: none; }
  .side-foot { margin: 0; padding: 0; border: 0; display: flex; }
  .topbar { top: 53px; }
}

/* ---------- dashboard ---------- */
.hello h1 { letter-spacing: -0.035em; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi { position: relative; overflow: hidden; }
.kpi.feature { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand-green) 14%, transparent), transparent 60%), var(--bg); }
.kpi.feature::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gradient); }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 500; }
.delta.up { color: var(--green); } .delta.down { color: var(--red); }
.dash { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dash > .col { display: grid; gap: 16px; min-width: 0; }
@media (max-width: 1099px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash { grid-template-columns: minmax(0, 1fr); } }
.quick { display: flex; gap: 8px; flex-wrap: wrap; }

.bars { margin: 0; }
.bars-plot { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; align-items: end; height: 190px; padding-top: 8px; border-bottom: 1px solid var(--line-strong); }
.bars-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); pointer-events: none; }
.bars-ref { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--gray-700); z-index: 1; pointer-events: none; }
.bars-ref span { position: absolute; right: 0; bottom: 4px; padding: 1px 6px; border-radius: 4px; background: var(--bg); font-size: 0.75rem; color: var(--gray-900); }
.bar-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.bar { display: block; width: min(44px, 70%); min-height: 2px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--brand-blue) 55%, var(--bg)); transition: background-color .15s var(--ease); }
.bar.now { background: var(--brand-blue); }
.bar-col:hover .bar, .bar-col:focus-visible .bar { background: var(--brand-blue); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--brand-blue); }
.bars-x { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; margin-top: 8px; font-size: 0.8125rem; color: var(--gray-900); text-align: center; }
.tip { position: fixed; z-index: 300; padding: 6px 10px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: 0.8125rem; font-weight: 500; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; box-shadow: var(--shadow-menu); }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hb-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9375rem; margin-bottom: 6px; }
.hb-track { height: 8px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.hb-track span { display: block; height: 100%; border-radius: inherit; background: var(--brand-blue); }
/* progress and meters: one brand gradient spans the track, faint past the value (coming-soon bars) */
.prog, .app .meter-bar { height: 8px; border-radius: 999px; overflow: hidden; background: linear-gradient(to right, transparent var(--pct, 0%), color-mix(in srgb, var(--bg) 80%, transparent) var(--pct, 0%)), var(--gradient); }
.app .meter-bar span { display: none; }
.app .meter.hot .meter-bar { background: linear-gradient(to right, var(--amber) var(--pct, 0%), var(--gray-200) var(--pct, 0%)); }

.todo { list-style: none; margin: 0; padding: 0; display: grid; }
.todo li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.todo li:last-child { border-bottom: 0; padding-bottom: 0; }
.todo li:first-child { padding-top: 0; }
.todo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.todo .dot.err { background: var(--red); } .todo .dot.info { background: var(--blue); }
.todo small { display: block; color: var(--gray-900); font-size: 0.8125rem; }
.allclear { display: flex; gap: 12px; align-items: center; color: var(--gray-900); }
.allclear .ok-badge { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--green-bg); color: var(--green); flex: none; }

.checklist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.checklist li { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; }
.checklist li .ck { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-strong); flex: none; }
.checklist li.done { color: var(--gray-900); text-decoration: line-through; text-decoration-color: var(--gray-600); }
.checklist li.done .ck { background: var(--brand-green); color: var(--brand-ink); box-shadow: none; }

.avatar { --h: 210; width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.75rem; font-weight: 600; color: #fff; background: hsl(var(--h) 42% 42%); letter-spacing: 0.02em; }
.avatar.lg { width: 52px; height: 52px; font-size: 1.0625rem; }
.who-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who-cell > span:last-child { min-width: 0; }
.who-cell b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; background: var(--gray-100); color: var(--gray-900); }
.pill.ok { background: var(--green-bg); color: var(--green); }
.pill.warn { background: var(--amber-bg); color: var(--amber); }
.pill.err { background: var(--red-bg); color: var(--red); }
.pill.info { background: var(--blue-bg); color: var(--blue); }
.mini { width: 120px; }
.mini .meter-bar { height: 5px; margin-top: 6px; }

/* toolbar: filters on the left, actions on the right */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.toolbar form { display: flex; gap: 8px; flex: 1; max-width: 420px; min-width: 220px; margin: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 0.875rem; color: var(--gray-900); }
.chips a:hover { color: var(--fg); }
.chips a[aria-current] { background: var(--fg); color: var(--bg); box-shadow: none; }
.chips a .n { font-variant-numeric: tabular-nums; opacity: .7; }

/* dialogs */
dialog.modal { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; background: var(--bg); color: var(--fg); box-shadow: var(--shadow-menu); }
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); }
dialog.modal[open]:not(:modal) { position: relative; margin: 0 0 24px; width: 100%; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px 0; }
.modal-head h2 { font-size: 1.25rem; letter-spacing: -0.02em; }
.modal-body { padding: 16px 24px 24px; display: grid; gap: 16px; }
.modal-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--gray-100); color: var(--gray-900); font-size: 1.125rem; line-height: 1; cursor: pointer; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* packages */
.pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pkg { display: flex; flex-direction: column; gap: 14px; }
.pkg-price { font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.pkg-price small { font-size: 0.9375rem; font-weight: 400; color: var(--gray-900); letter-spacing: 0; }
.pkg-specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.9375rem; color: var(--gray-900); }
.pkg-specs li { display: flex; justify-content: space-between; gap: 8px; }
.pkg-specs b { color: var(--fg); font-weight: 500; }
.pkg-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.875rem; }
.pkg.add { align-items: center; justify-content: center; text-align: center; min-height: 260px; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: transparent; border: 0; border-radius: var(--radius-lg); cursor: pointer; color: var(--gray-900); font: inherit; }
.pkg.add:hover { color: var(--fg); background: var(--bg); }
.pkg.add .plus { font-size: 1.75rem; line-height: 1; }

/* detail pages: main column plus a side column of actions */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.detail > .side-col { display: grid; gap: 16px; position: sticky; top: 76px; }
@media (max-width: 1099px) { .detail { grid-template-columns: minmax(0, 1fr); } .detail > .side-col { position: static; } }
.danger { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent); }
.danger h3 { color: var(--red); }
.profile-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-head h1 { margin: 0; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
@media (max-width: 899px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.days { font-size: 0.8125rem; }

/* settings layout: description left, fields right */
.settings { display: grid; gap: 0; }
.set-row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.set-row:first-child { padding-top: 0; }
.set-row h3 { font-size: 1rem; margin-bottom: 6px; }
.set-row p { font-size: 0.875rem; color: var(--gray-900); }
@media (max-width: 899px) { .set-row { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.bp-portal { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; background: var(--bg-2); }
.bp-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg); border-bottom: 1px solid var(--line); font-weight: 600; font-size: 0.9375rem; }
.bp-body { padding: 16px; display: grid; gap: 10px; }
.bp-row { height: 12px; border-radius: 6px; background: var(--gray-200); }
.bp-row.short { width: 60%; }

/* support: activity, notes, tickets */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.timeline li:last-child { border-bottom: 0; }
.timeline .who-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 600; background: var(--gray-200); color: var(--gray-900); }
.timeline .who-dot.you { background: var(--blue-bg); color: var(--blue); }
.timeline small { display: block; color: var(--gray-900); font-size: 0.8125rem; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
.toggle-row:first-child { padding-top: 0; }
.toggle-row b { display: block; font-weight: 500; }
.toggle-row small { color: var(--gray-900); font-size: 0.8125rem; }
.switch { position: relative; width: 40px; height: 24px; border: 0; border-radius: 999px; background: var(--gray-400); cursor: pointer; flex: none; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s var(--ease); }
.switch[aria-checked="true"] { background: var(--brand-blue); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.log { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.8125rem; line-height: 1.7; overflow-x: auto; white-space: pre; color: var(--gray-900); }
.site-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-thumb { width: 64px; height: 44px; border-radius: 8px; background: var(--gradient); opacity: .85; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .8125rem; }

.app .table.flat { box-shadow: none; border-radius: 0; background: transparent; }
.app .table.flat td:first-child, .app .table.flat th:first-child { padding-left: 0; }
.app .table.flat td:last-child, .app .table.flat th:last-child { padding-right: 0; }
.card details > summary { list-style: none; }
.card details > summary::-webkit-details-marker { display: none; }
.card details > summary h3::after { content: " +"; color: var(--gray-700); font-weight: 400; }
.card details[open] > summary h3::after { content: " –"; }
.sub.warn { color: var(--amber); } .sub.err { color: var(--red); }
.page-actions .status { margin-right: 4px; }
.toolbar > .notice { margin: 0; flex: 1; }
.app .choices .choice-body { background: var(--bg); }
.app .choice input:checked + .choice-body { box-shadow: inset 0 0 0 2px var(--brand-blue); }
.kpis .stat .label, .facts .stat .label { margin-bottom: 2px; }
.app .feed li { grid-template-columns: 100px 1fr auto; }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.app-main > .detail .subtabs { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bars-ref span { right: auto; left: 0; }
.timeline .who-dot.ok { background: var(--green-bg); color: var(--green); }
.brand-grid.one { grid-template-columns: minmax(0, 1fr); }
.set-row .brand-preview { position: static; margin-top: 16px; padding: 0; box-shadow: none; background: transparent; }
.php-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 16px; }
.php-row .field { flex: 1; }

/* reseller logos sit on a white tile so dark logos read in dark mode too */
.brand-logo { display: block; height: 32px; width: auto; max-width: 160px; object-fit: contain; padding: 3px 8px; border-radius: 8px; background: #fff; }
.brand-logo.lg { height: 64px; max-width: 220px; padding: 6px 12px; }
.brand-logo.side { height: 40px; max-width: 64px; padding: 3px 5px; }
.logo-drop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-drop .brand-logo { height: 56px; max-width: 200px; }
.logo-empty { width: 120px; height: 56px; border-radius: 8px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--gray-700); font-size: 0.8125rem; }
.line-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; }
.side-brand { padding: 10px 10px 20px; }
.side-brand .product { margin-left: 10px; }
.side-account { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.side-account:hover { background: var(--gray-100); }
.side-account .brand-chip.lg { width: 34px; height: 34px; font-size: 0.9375rem; margin: 0; }
@media (max-width: 1023px) { .side-account { display: none; } .side-brand .product { display: none; } .side-brand .logo-word { display: none; } }
.shell-main { overflow-x: clip; }
.table.inv { min-width: 420px; }

.plan { border-bottom: 1px solid var(--line); }
.products .product { transition: background-color .15s var(--ease); }
.products .product:hover { background: var(--bg-2); }
.products h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
.products h3 small { font-size: 0.875rem; font-weight: 400; color: var(--gray-900); letter-spacing: 0; margin-left: 2px; }
.products .more { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; margin-top: 4px; }
.kinds { margin-bottom: 18px; }
.kinds button[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.js-kinds .kind-group:not(.on) { display: none; }
.kind-group + .kind-group { margin-top: 18px; }
.js-kinds .kind-group + .kind-group { margin-top: 0; }
[hidden] { display: none !important; }
.products h3 { color: var(--fg); }
.side-theme { padding: 6px 10px 8px; }
.side-theme .theme { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
.appfoot { align-items: center; }
.appfoot .row { gap: 16px; }
@media (max-width: 1023px) { .side-theme { display: none; } }

/* =====================================================================
   Viewport layout for the reseller portal (desktop): the page never scrolls.
   Top bar, content and bottom bar fill the height beside the sidebar; each
   page puts its content in a .fill region and the components inside it scroll.
   ===================================================================== */
.fill { min-width: 0; }
.fgrid { display: grid; gap: 16px; min-width: 0; }
.pane { display: flex; flex-direction: column; min-width: 0; }
.pane > .pane-body { min-width: 0; }
.table-card { padding: 0; overflow: hidden; }
.table-card > .card-head { padding: 16px 20px 0; margin-bottom: 8px; }
.table-card .table { box-shadow: none; border-radius: 0; }
.table-card .empty { margin: 0 20px 20px; }
.table-card .table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg); }
@media (min-width: 1024px) and (min-height: 620px) {
  /* the page is exactly one screen; bars on top (test banner, viewing as) take their room from the shell */
  .app.reseller { height: 100vh; min-height: 0; overflow: hidden; }
  .reseller .shell { flex: 1; min-height: 0; height: auto; overflow: hidden; }
  .reseller .side { height: auto; min-height: 0; }
  .reseller .shell-main { height: auto; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
  .reseller .topbar { position: static; }
  .reseller .app-main { max-width: none; width: 100%; padding: 20px 28px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .reseller .app-main:not(:has(.fill)) { overflow: auto; }
  .reseller .app-main > .page-head { margin-bottom: 16px; }
  .reseller .app-main > .notice { margin-bottom: 12px; flex: none; }
  .reseller .app-main > .facts, .reseller .app-main > .kpis, .reseller .app-main > .toolbar { flex: none; margin-bottom: 16px; }
  .reseller .fill { flex: 1; min-height: 0; }
  .reseller .fill.scroll, .reseller .pane > .pane-body, .reseller .scroll { overflow: auto; min-height: 0; }
  .reseller .pane { min-height: 0; height: 100%; }
  .reseller .pane > .pane-body { flex: 1; }
  .reseller .fgrid { height: 100%; min-height: 0; }
  .reseller .fgrid > * { min-height: 0; }
  .reseller .table-card { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  .reseller .table-card > .table-wrap { flex: 1; min-height: 0; overflow: auto; }
  .reseller .appfoot { padding-block: 10px; }
  .reseller .detail { height: 100%; align-items: stretch; }
  .reseller .detail > * { min-height: 0; overflow: auto; }
  .reseller .detail > .side-col { position: static; align-content: start; padding-right: 2px; }
  .reseller .bars { height: 100%; display: flex; flex-direction: column; }
  .reseller .bars-plot { flex: 1; height: auto; min-height: 120px; }
  .reseller .card.chart { display: flex; flex-direction: column; min-height: 0; }
  .reseller .card.chart > .bars { flex: 1; min-height: 0; }
}
/* dashboard grid: KPIs on top, then two rows of components that each scroll */
.dash2 { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); }
.dash2 > .chart { grid-column: span 6; }
.dash2 > .attn { grid-column: span 3; }
.dash2 > .act { grid-column: span 3; }
.dash2 > .bill, .dash2 > .mix, .dash2 > .pool, .dash2 > .top { grid-column: span 3; }
@media (max-width: 1279px) { .dash2 > .chart { grid-column: span 12; } .dash2 > .attn, .dash2 > .act { grid-column: span 6; } .dash2 > .bill, .dash2 > .mix, .dash2 > .pool, .dash2 > .top { grid-column: span 6; } .dash2 { grid-template-rows: none; } }
@media (max-width: 1279px) and (min-width: 1024px) and (min-height: 620px) { .reseller .app-main:has(.dash2) { overflow: auto; } .reseller .app-main:has(.dash2) .fill { flex: none; } .dash2 > * { min-height: 260px; } }
@media (max-width: 1023px) { .dash2 > * { grid-column: 1 / -1 !important; } }
.card.pane { padding: 18px 20px; }
.card.pane > .card-head { flex: none; margin-bottom: 12px; }
.pgrid { display: grid; gap: 16px; min-width: 0; }
.pgrid > .grid2, .pgrid > .grid3, .pgrid > .grid4 { margin: 0; }
.app-main .subtabs { margin-bottom: 16px; }

/* sign-in: everything centred except the field labels */
.auth-card { width: min(440px, calc(100vw - 32px)); padding: 36px 36px 30px; gap: 20px; }
.auth-brand { justify-content: center; margin: 0 0 4px; }
.auth-brand .brand-logo.lg { margin: 0 auto; }
.auth-head { text-align: center; display: grid; gap: 6px; }
.auth-foot { text-align: center; font-size: 0.875rem; color: var(--gray-900); line-height: 1.7; margin: 0; }
.auth-current { text-align: center; font-size: 0.875rem; color: var(--gray-900); padding: 10px 12px; border-radius: var(--radius-lg); background: var(--gray-100); margin: 0; }
.auth-card .btn.wide { justify-self: stretch; }
.auth-main > .muted.center { text-align: center; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.875rem; }
.auth-row .check { margin: 0; font-size: 0.875rem; align-items: center; }
.auth-row .check input { margin: 0; }
.auth-new { display: grid; gap: 10px; justify-items: center; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--gray-900); }
.auth-new .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.auth-foot button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

.todo.links li { display: block; padding: 0; border-bottom: 1px solid var(--line); }
.todo.links li:last-child { border-bottom: 0; }
.todo.links a { display: grid; grid-template-columns: 10px minmax(0, 1fr) 12px; align-items: center; gap: 12px; padding: 10px 6px; margin: 0 -6px; border-radius: 8px; }
.todo.links a:hover { background: var(--gray-100); }
.todo .chev { color: var(--gray-700); font-size: 1.25rem; line-height: 1; }
.meter-top span:first-child { white-space: nowrap; }
.who-cell b, .todo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-account { overflow: hidden; }
.side-account .brand-logo.side { flex: none; height: 34px; width: auto; max-width: 64px; }
.field { align-content: start; }
.todo li > div { min-width: 0; }
.todo li b { display: block; }

/* ---------- control panel (hosting account) ---------- */
.subtabs.scrollx { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: none; }
.subtabs.scrollx::-webkit-scrollbar { display: none; }
.subtabs a { white-space: nowrap; }
.panel { display: flex; flex-direction: column; min-width: 0; }
.panel > .notice { flex: none; }
.panel-body { min-width: 0; }
.psec { display: grid; gap: 16px; min-width: 0; }
.psec > * { min-width: 0; }
.psec.two { grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); }
.psec.one { grid-template-columns: minmax(0, 1fr); }
.psec.ov { grid-template-columns: minmax(0, 1fr) 340px; }
.psec.ov > .usage { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.psec.ov > .usage > .card { padding: 16px 18px; }
.psec.web { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.psec.web > .site-strip { grid-column: 1 / -1; padding: 14px 18px; }
.pstack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tool { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .15s var(--ease), box-shadow .15s var(--ease); }
.tool:hover { background: var(--gray-100); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tool .nicon { flex: none; color: var(--brand-blue); width: 22px; height: 22px; }
.tool b { display: block; font-weight: 500; }
.tool small { display: block; color: var(--gray-900); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool > span { min-width: 0; }
.live-toggle { gap: 8px; padding-right: 6px; }
.acct-head h1 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--gray-900); flex: none; }
.pager button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--gray-100); color: var(--fg); cursor: pointer; font-size: 1rem; line-height: 1; }
.pager button:disabled { opacity: .35; cursor: default; }
@media (max-width: 1099px) { .psec.two, .psec.ov, .psec.web { grid-template-columns: minmax(0, 1fr); } .psec.ov > .usage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (min-height: 620px) {
  .reseller .fill > .panel { height: 100%; }
  .reseller .panel-body { flex: 1; min-height: 0; }
  .reseller .psec { height: 100%; min-height: 0; }
  .reseller .psec.ov { grid-template-rows: auto minmax(0, 1fr); }
  .reseller .psec.web { grid-template-rows: auto minmax(0, 1fr); }
  .reseller .psec.two, .reseller .psec.one { grid-template-rows: minmax(0, 1fr); }
  .reseller .pstack, .reseller .ov-side, .reseller .tools-card { overflow: auto; min-height: 0; }
  .reseller .ov-side { display: grid; gap: 16px; align-content: start; }
  .reseller .pstack .table-card { height: auto; }
  .reseller .pstack .table-card > .table-wrap { flex: none; }
}
/* key/value rows: a long value moves under its label instead of breaking mid-word */
.dl > div { flex-wrap: wrap; row-gap: 2px; }
.dl dd { margin-left: auto; }
.dl dd .mono, .dl dd.mono { white-space: nowrap; }
.brand-logo.top { height: 40px; max-width: 170px; }
.side-brand:has(.brand-logo.top) { padding-bottom: 16px; }
.side-account .avatar { width: 34px; height: 34px; }

/* =====================================================================
   Public site visuals: tech logos, marquee, product pictures, reveals
   ===================================================================== */
.tech { display: inline-block; width: 28px; height: 28px; flex: none; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; color: var(--gray-900); transition: color .2s var(--ease), background-color .2s var(--ease); }
.tech-tile:hover .tech, .mq-item:hover .tech, .fnode .tech, .product:hover .tech { background: var(--brand); }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tech-tile { display: grid; justify-items: start; gap: 6px; padding: 20px; border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-card); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.tech-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-menu); }
.tech-tile .tech { width: 36px; height: 36px; margin-bottom: 6px; }
.tech-tile b { font-weight: 600; }
.tech-tile small { color: var(--gray-900); font-size: 0.8125rem; }
.tech-word { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--gray-900); height: 36px; display: grid; align-items: center; margin-bottom: 6px; }
.prod-ic .tech { width: 26px; height: 26px; margin-bottom: 6px; }

.mq-band { border-top: 0; }
.mq-wrap { padding: 28px 0 40px; display: grid; gap: 18px; overflow: hidden; }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq-track { display: flex; gap: 44px; width: max-content; animation: mq 45s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-item { display: inline-flex; align-items: center; gap: 10px; color: var(--gray-900); font-weight: 500; white-space: nowrap; }
.mq-item .tech { width: 24px; height: 24px; }
@keyframes mq { to { transform: translateX(calc(-50% - 22px)); } }

.page-hero.with-visual { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.hero-visual { min-width: 0; }
@media (max-width: 999px) { .page-hero.with-visual { grid-template-columns: minmax(0, 1fr); } }

.term, .inbox { border-radius: var(--radius-lg); background: #0b0b0c; color: #e4e4e4; box-shadow: var(--shadow-menu), 0 30px 60px -30px rgba(49, 112, 206, 0.35); overflow: hidden; font-size: 0.875rem; }
.inbox { background: var(--bg); color: var(--fg); }
.term-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #8f8f8f; font-size: 0.75rem; }
.inbox .term-bar { border-color: var(--line); color: var(--gray-900); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3c; }
.term-bar span { margin-left: 8px; font-family: var(--font-mono); }
.term pre { margin: 0; padding: 16px 18px 20px; font-size: 0.8125rem; line-height: 1.8; min-height: 190px; white-space: pre-wrap; }
.term pre span { display: block; opacity: 0; animation: tline .01s forwards; }
.term .t1 { animation-delay: .3s; } .term .t2 { animation-delay: 1.1s; color: #8f8f8f; } .term .t3 { animation-delay: 2s; } .term .t4 { animation-delay: 2.9s; color: var(--brand-green); } .term .t5 { animation-delay: 3.3s; color: var(--brand-green); } .term .t6 { animation-delay: 3.9s; }
.caret { display: inline-block; width: 8px; height: 15px; background: #e4e4e4; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes tline { to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }

.mail { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-8px); animation: mailin .5s var(--ease) forwards; animation-delay: calc(0.4s + (3 - var(--i)) * 0.7s); }
.mail:last-child { border-bottom: 0; }
.mail b { display: block; font-weight: 500; font-size: 0.875rem; }
.mail small { color: var(--gray-900); font-size: 0.8125rem; }
@keyframes mailin { to { opacity: 1; transform: none; } }

/* web hosting: a site going live, one step at a time, same rhythm as the inbox */
.launch .url { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--gray-100); color: var(--fg); }
.launch .url svg { color: var(--green); }
.lbar { height: 2px; background: var(--line); }
.lbar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--brand-blue), var(--brand-green)); animation: lfill 3.2s var(--ease) .3s forwards; }
@keyframes lfill { to { width: 100%; } }
.lstep { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-8px); animation: mailin .5s var(--ease) forwards; animation-delay: calc(0.4s + var(--i) * 0.7s); }
.lstep:last-child { border-bottom: 0; }
.lstep b { font-weight: 500; font-size: 0.875rem; }
.lstep .tick { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-bg); color: var(--green); }
.lstep .tick svg { width: 13px; height: 13px; }
.lstep.live { grid-template-columns: auto minmax(0, 1fr) auto; background: var(--bg-2); }
.lstep .dot.pulse { animation: pulse 1.6s ease-in-out infinite; }
/* once the steps are done, they make way for the site itself (its own beach colours, same in both themes) */
.lbody { position: relative; transition: opacity .6s var(--ease); }
.lbar { transition: opacity .6s var(--ease); }
/* site.js fades the finished site out, then swaps in a fresh copy so every animation starts over */
.launch.out .lbody, .launch.out .lbar { opacity: 0; }
.lsteps { animation: lout .4s var(--ease) 4.4s forwards; }
.lsite { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: #f6f1e7; color: #0f2d3a; opacity: 0; transform: scale(.98); animation: lin .6s var(--ease) 4.6s forwards; font-size: 0.75rem; overflow: hidden; }
@keyframes lout { to { opacity: 0; } }
@keyframes lin { to { opacity: 1; transform: none; } }
.lsite > *, .ls-card { opacity: 0; transform: translateY(6px); animation: mailin .5s var(--ease) forwards; }
.ls-nav { display: flex; align-items: center; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(15, 45, 58, .12); animation-delay: 4.8s !important; }
.ls-nav b { margin-right: auto; font-size: 0.8125rem; letter-spacing: -0.01em; }
.ls-nav span { color: #4f6b75; }
.ls-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: center; animation-delay: 5s !important; }
.ls-kicker { margin: 0; color: #0d8a8a; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ls-h { margin: 4px 0 8px; font-size: 1.25rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.ls-btn { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #0d8a8a; color: #fff; font-weight: 500; }
.ls-img { position: relative; height: 84px; border-radius: 10px; background: linear-gradient(#ffd9a0 0%, #f7b267 28%, #3fb6c4 52%, #0b6e8a 100%); overflow: hidden; }
.ls-img::before { content: ""; position: absolute; left: 62%; top: 14%; width: 22px; height: 22px; border-radius: 50%; background: #fff3d6; }
.ls-img i { position: absolute; left: -10%; right: -10%; bottom: -18px; height: 46px; border-radius: 50% 50% 0 0; background: #0a5c74; box-shadow: 0 -6px 0 rgba(255, 255, 255, .55); }
.ls-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; opacity: 1; transform: none; animation: none; }
.ls-card { display: grid; gap: 2px; padding: 6px; border-radius: 8px; background: #fff; box-shadow: 0 1px 0 rgba(15, 45, 58, .08); animation-delay: calc(5.2s + var(--i) * .15s); }
.ls-card i { height: 22px; border-radius: 5px; background: linear-gradient(135deg, #7fd3dc, #1b8aa3); }
.ls-card:nth-child(2) i { background: linear-gradient(135deg, #f9d9a6, #e9a85a); }
.ls-card:nth-child(3) i { background: linear-gradient(135deg, #5b7c8a, #1d3440); }
.ls-card b { font-weight: 500; font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-card span { color: #0d8a8a; font-weight: 600; }

.flow { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; gap: 0; padding: 28px 22px; border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-menu); }
.fnode { display: grid; justify-items: center; gap: 8px; padding: 14px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--bg-2); min-width: 78px; font-size: 0.75rem; color: var(--gray-900); }
.fnode .tech { width: 26px; height: 26px; }
.flink { position: relative; height: 2px; background: var(--line-strong); margin: 0 4px; }
.flink i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 10px var(--brand-green); animation: flowdot 2.4s var(--ease) infinite; }
.flink:nth-child(4) i { animation-delay: .8s; background: var(--brand-blue); box-shadow: 0 0 10px var(--brand-blue); }
.flink:nth-child(6) i { animation-delay: 1.6s; }
@keyframes flowdot { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; gap: 10px; } .flink { width: 2px; height: 22px; justify-self: center; } .flink i { display: none; } }

.pay-logos { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.pay-logos .tech { width: 30px; height: 20px; }
.paystack { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--gray-900); }
.pay-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* sections fade up as they come into view */
.js-reveal .band:not(.hero) { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal .band.in { opacity: 1; transform: none; }
.plan { transition: transform .25s var(--ease); }
.plan:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .mq-track, .term pre span, .mail, .lstep, .flink i, .caret { animation: none !important; opacity: 1 !important; transform: none !important; }
  .lbar i { animation: none !important; width: 100% !important; }
  .lsteps { animation: none !important; opacity: 0 !important; }
  .lsite, .lsite > *, .ls-card { animation: none !important; opacity: 1 !important; transform: none !important; }
  .js-reveal .band { opacity: 1 !important; transform: none !important; }
}
.term pre { white-space: normal; }
.term pre span { white-space: pre; }

/* file manager */
.fm .card-head { flex-wrap: wrap; gap: 10px; }
.fm-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.8125rem; min-width: 0; }
.fm-path a { color: var(--gray-900); } .fm-path a:hover { color: var(--fg); } .fm-path span { color: var(--gray-600); }
.fm-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-up { cursor: pointer; }
.fm-name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.8125rem; }
.fm-ico { flex: none; color: var(--gray-900); } .fm-ico.dir { color: var(--accent, var(--blue)); }
.fm-acts { display: flex; justify-content: flex-end; gap: 2px; flex-wrap: wrap; }
.fm td:last-child { text-align: right; }
.fm-msg { margin: 0 20px 8px; padding: 8px 12px; border-radius: var(--radius); background: var(--gray-100); }
.fm-msg.err { color: var(--red); background: var(--red-bg); }
.fm-where { display: grid; gap: 2px; min-width: 0; }
.fm .table td { padding-top: 6px; padding-bottom: 6px; }
.fm .table .btn.sm { height: 28px; }
.fm.dropping { box-shadow: inset 0 0 0 2px var(--accent, var(--blue)); }
.fm-edit { display: flex; flex-direction: column; min-height: 0; }
.fm-edit h3.mono { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; }
.fm-editor { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.fm-editor textarea { flex: 1; min-height: 320px; width: 100%; resize: none; padding: 14px 16px; border: 0; border-radius: var(--radius); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong); font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; tab-size: 2; white-space: pre; overflow: auto; color: var(--fg); }
.fm-edit-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (min-width: 1024px) and (min-height: 620px) { .reseller .fm-editor textarea { min-height: 0; } .reseller .fm-edit { height: 100%; } }

.fm-monaco { flex: 1; min-height: 360px; border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-strong); }
.fm-editor .row { display: flex; align-items: center; gap: 12px; }
.fm-status .bad { color: var(--red); } .fm-status .good { color: var(--green); } .fm-status .dirty { color: var(--amber); }
@media (min-width: 1024px) and (min-height: 620px) { .reseller .fm-monaco { min-height: 0; } }

/* ---------- webmail: one screen, Gmail-style, in the site's tokens ---------- */
.webmail { height: 100vh; overflow: hidden; background: var(--bg-2); }
#wm { height: 100vh; display: grid; grid-template-rows: 64px minmax(0, 1fr); }
.wm-top { display: grid; grid-template-columns: 240px minmax(0, 720px) 1fr; align-items: center; gap: 8px; padding: 0 16px 0 8px; }
.wm-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--fg); }
.wm-brand .brand-logo { max-height: 30px; max-width: 150px; object-fit: contain; }
.wm-app { font-size: 1.125rem; color: var(--gray-900); padding-left: 10px; border-left: 1px solid var(--line-strong); }
.wm-search { display: flex; align-items: center; height: 46px; border-radius: 999px; background: var(--gray-100); padding: 0 6px 0 4px; transition: background .15s, box-shadow .15s; }
.wm-search:focus-within { background: var(--bg); box-shadow: var(--shadow-menu); }
.wm-sic { display: grid; place-items: center; width: 40px; color: var(--gray-900); }
.wm-top .wm-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) { flex: 1; height: 44px; background: none; box-shadow: none; padding: 0 6px; font-size: 1rem; }
.wm-search input::-webkit-search-cancel-button { display: none; }
.wm-acct { justify-self: end; position: relative; }
.wm-me { border: 0; background: none; padding: 4px; border-radius: 50%; cursor: pointer; }
.wm-me:hover { background: var(--gray-100); }
.wm-av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 0.875rem; color: #fff; background: hsl(var(--h, 210) 45% 46%); }
.wm-pop { position: absolute; right: 0; top: 46px; z-index: 50; width: 300px; background: var(--bg); border-radius: 16px; box-shadow: var(--shadow-menu); padding: 16px; display: grid; gap: 14px; }
.wm-pop-who { display: flex; gap: 12px; align-items: center; } .wm-pop-who .wm-av { width: 40px; height: 40px; font-size: 1rem; }
.wm-pop-who small { display: block; color: var(--gray-900); font-size: 0.8125rem; word-break: break-all; }
.wm-theme { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--gray-100); }
.wm-theme button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 6px; font: inherit; font-size: 0.8125rem; color: var(--gray-900); cursor: pointer; }
.wm-theme button[aria-pressed="true"] { background: var(--bg); color: var(--fg); box-shadow: var(--shadow-card); }
.wm-keys-hint { font-size: 0.8125rem; color: var(--gray-900); }
.wm-out { justify-self: start; padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 0.875rem; }
.wm-out:hover { background: var(--gray-100); }
kbd { font-family: var(--font-mono); font-size: 0.75rem; padding: 1px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--bg); }

.wm-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 0; }
.wm-nav { padding: 6px 12px 16px 8px; overflow-y: auto; }
.wm-compose-btn { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px 0 18px; margin: 2px 0 14px; border: 0; border-radius: 16px; background: var(--blue-bg); color: var(--fg); font: inherit; font-weight: 500; cursor: pointer; transition: box-shadow .15s; }
.wm-compose-btn:hover { box-shadow: var(--shadow-menu); }
.wm-f { display: flex; align-items: center; gap: 16px; height: 34px; padding: 0 14px 0 18px; border-radius: 0 999px 999px 0; margin-left: -8px; color: var(--fg); font-size: 0.875rem; }
.wm-f:hover { background: var(--gray-200); }
.wm-f.on { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.wm-f.has span { font-weight: 600; }
.wm-f b, .wm-f small { margin-left: auto; font-size: 0.75rem; font-weight: 600; } .wm-f small { font-weight: 400; color: var(--gray-900); }
.wm-f .ic { flex: none; }

.wm-main { margin: 0 16px 16px 0; background: var(--bg); border-radius: 16px; box-shadow: var(--shadow-card); display: grid; grid-template-rows: 48px minmax(0, 1fr); min-height: 0; overflow: hidden; }
.wm-bar { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--line); }
.wm-acts { display: flex; gap: 2px; }
.wm-pager { margin-left: auto; display: flex; align-items: center; gap: 2px; font-size: 0.75rem; color: var(--gray-900); }
.wm-pager span { margin-right: 6px; }
.wm-ib { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; background: none; border-radius: 50%; color: var(--gray-900); cursor: pointer; }
.wm-ib:hover:not(:disabled) { background: var(--gray-200); color: var(--fg); }
.wm-ib:disabled { opacity: .35; cursor: default; }
.wm-check { display: grid; place-items: center; width: 36px; height: 36px; flex: none; cursor: pointer; }
.wm-check input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.wm-view { overflow-y: auto; min-height: 0; outline: none; }
.wm-empty { padding: 48px 24px; text-align: center; color: var(--gray-900); }
.wm-banner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; font-size: 0.875rem; color: var(--gray-900); background: var(--gray-100); }
.wm-banner button { border: 0; background: none; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; }

.wm-row { position: relative; display: grid; grid-template-columns: 36px 32px minmax(120px, 200px) minmax(0, 1fr) 24px 76px; align-items: center; height: 40px; padding: 0 12px 0 10px; border-bottom: 1px solid var(--line); font-size: 0.875rem; cursor: pointer; background: var(--bg-2); color: var(--gray-900); }
.wm-row.unread { background: var(--bg); color: var(--fg); }
.wm-row.unread .wm-from, .wm-row.unread .wm-subj, .wm-row.unread .wm-date { font-weight: 700; }
.wm-row:hover { box-shadow: inset 1px 0 0 var(--line-strong), inset -1px 0 0 var(--line-strong), 0 1px 3px rgba(0, 0, 0, .12); z-index: 1; }
.wm-row.sel { background: var(--blue-bg); }
.wm-row.cur::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); }
.wm-star { display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; color: var(--gray-600); cursor: pointer; border-radius: 50%; }
.wm-star .ic { width: 18px; height: 18px; } .wm-star:hover { color: var(--fg); }
.wm-star.on { color: #e8a700; } .wm-star.on .ic path { fill: currentColor; }
.wm-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 12px; }
.wm-n { font-weight: 400; font-size: 0.75rem; color: var(--gray-900); }
.wm-draft { color: var(--red); font-weight: 500; }
.wm-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wm-subj { color: var(--fg); } .wm-row:not(.unread) .wm-subj { color: inherit; }
.wm-snip { color: var(--gray-900); font-weight: 400; }
.wm-chip { display: inline-block; font-size: 0.6875rem; padding: 1px 6px; margin-right: 6px; border-radius: 4px; background: var(--gray-200); color: var(--gray-900); font-weight: 500; vertical-align: 1px; }
.wm-att { color: var(--gray-900); } .wm-att .ic { width: 16px; height: 16px; }
.wm-date { text-align: right; font-size: 0.75rem; white-space: nowrap; }
.wm-hover { display: none; position: absolute; right: 8px; top: 2px; background: inherit; gap: 0; }
.wm-row:hover .wm-hover { display: flex; } .wm-row:hover .wm-date { visibility: hidden; }

.wm-thread { padding: 20px 24px 32px 24px; max-width: 980px; }
.wm-thread h1 { font-size: 1.375rem; font-weight: 400; margin: 0 0 18px 48px; line-height: 1.35; }
.wm-msg { border-bottom: 1px solid var(--line); padding: 12px 0; }
.wm-mh { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: start; cursor: pointer; }
.wm-mh .wm-av { width: 40px; height: 40px; font-size: 1rem; }
.wm-mwho { min-width: 0; font-size: 0.875rem; line-height: 1.45; }
.wm-addr { color: var(--gray-900); font-size: 0.8125rem; }
.wm-to, .wm-sn { display: block; color: var(--gray-900); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-msg.open .wm-sn, .wm-msg:not(.open) .wm-to { display: none; }
.wm-mdate { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--gray-900); white-space: nowrap; }
.wm-mdate .ic { width: 15px; height: 15px; }
.wm-mb { display: none; padding: 12px 0 4px 48px; }
.wm-msg.open .wm-mb { display: block; }
.wm-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; line-height: 1.6; }
.wm-text a { color: var(--blue); text-decoration: underline; }
.wm-quote { color: var(--gray-900); }
.wm-ext { font-size: 0.8125rem; color: var(--amber); background: var(--amber-bg); padding: 6px 10px; border-radius: var(--radius); margin-bottom: 10px; }
.wm-atts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.wm-file { display: flex; align-items: center; gap: 10px; width: 240px; padding: 10px 6px 10px 12px; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.wm-file > .ic { color: var(--red); flex: none; }
.wm-file div { min-width: 0; flex: 1; } .wm-file b { display: block; font-size: 0.8125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-file small { font-size: 0.75rem; color: var(--gray-900); } .wm-file > span { display: flex; }
.wm-replyrow { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0 48px; }
.wm-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.wm-btn:hover { background: var(--gray-100); } .wm-btn .ic { width: 18px; height: 18px; }

.wm-dock { position: fixed; right: 16px; bottom: 0; z-index: 60; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; }
.wm-compose { pointer-events: auto; width: 520px; height: min(560px, calc(100vh - 80px)); display: flex; flex-direction: column; background: var(--bg); border-radius: 12px 12px 0 0; box-shadow: 0 8px 40px rgba(0, 0, 0, .28), 0 0 0 1px var(--line); overflow: hidden; }
.wm-compose.min { height: 42px; width: 300px; }
.wm-compose.max { position: fixed; inset: 6vh 8vw; width: auto; height: auto; border-radius: 12px; }
.wm-compose.drop { box-shadow: 0 0 0 2px var(--blue), 0 8px 40px rgba(0, 0, 0, .28); }
.wm-ch { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 6px 0 16px; background: var(--gray-100); cursor: pointer; flex: none; }
.wm-ch b { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-ch span { display: flex; } .wm-ch .wm-ib { width: 30px; height: 30px; } .wm-ch .ic { width: 16px; height: 16px; }
.wm-cbody { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0 16px; }
.wm-compose.min .wm-cbody { display: none; }
.wm-cf { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); font-size: 0.875rem; color: var(--gray-900); }
.wm-cf[hidden] { display: none; }
.wm-compose .wm-cf input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) { flex: 1; height: 38px; padding: 0; background: none; box-shadow: none; border-radius: 0; font-size: 0.875rem; color: var(--fg); }
.wm-cc-btn { border: 0; background: none; color: var(--gray-900); font: inherit; cursor: pointer; } .wm-cc-btn:hover { color: var(--fg); text-decoration: underline; }
.wm-cbody textarea { flex: 1; min-height: 120px; border: 0; resize: none; padding: 12px 0; background: none; box-shadow: none; font: inherit; font-size: 0.9375rem; line-height: 1.6; color: var(--fg); outline: none; }
.wm-catts { display: flex; flex-direction: column; gap: 6px; } .wm-catts:empty { display: none; }
.wm-catt { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border-radius: var(--radius); background: var(--gray-100); font-size: 0.8125rem; }
.wm-catt b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--blue); } .wm-catt small { color: var(--gray-900); margin-right: auto; }
.wm-catt .wm-ib { width: 26px; height: 26px; } .wm-catt .ic { width: 14px; height: 14px; }
.wm-cfoot { display: flex; align-items: center; gap: 6px; padding: 12px 0 14px; flex: none; }
.wm-send { height: 38px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer; margin-right: 6px; }
.wm-send:hover { filter: brightness(1.08); } .wm-send:disabled { opacity: .6; }
.wm-cstat { font-size: 0.75rem; color: var(--gray-900); margin-right: auto; }

.wm-toast { position: fixed; left: 24px; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 20px; border-radius: 8px; background: #1f1f1f; color: #f2f2f2; font-size: 0.875rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.wm-toast[hidden] { display: none; }
.wm-toast button[data-act="undo"] { border: 0; background: none; color: #8ab4f8; font: inherit; font-weight: 600; cursor: pointer; padding: 8px; }
.wm-toast .wm-ib { color: #c4c4c4; } .wm-toast .wm-ib:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.wm-keys { border: 0; border-radius: 16px; padding: 24px 28px; background: var(--bg); color: var(--fg); box-shadow: var(--shadow-menu); width: min(520px, calc(100vw - 32px)); }
.wm-keys::backdrop { background: rgba(0, 0, 0, .45); }
.wm-keys h2 { font-size: 1.125rem; margin-bottom: 14px; }
.wm-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 18px; font-size: 0.875rem; } .wm-keys dd { margin: 0; color: var(--gray-900); }
.wm-menu { display: none; }

@media (max-width: 900px) {
  .wm-top { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .wm-app { display: none; }
  .wm-menu { display: inline-grid; }
  .wm-body { grid-template-columns: minmax(0, 1fr); }
  .wm-nav { position: fixed; z-index: 55; top: 64px; bottom: 0; left: 0; width: 260px; background: var(--bg-2); transform: translateX(-100%); transition: transform .2s var(--ease); box-shadow: var(--shadow-menu); }
  .wm-nav.open { transform: none; }
  .wm-main { margin: 0 8px 8px; }
  .wm-row { grid-template-columns: 32px 28px minmax(0, 1fr) 62px; grid-template-rows: auto auto; height: auto; padding: 8px 10px 8px 4px; row-gap: 2px; }
  .wm-row .wm-check { grid-row: 1 / 3; } .wm-row .wm-star { grid-row: 1 / 3; }
  .wm-row .wm-line { grid-column: 3 / 5; } .wm-row .wm-att { display: none; } .wm-row .wm-date { grid-column: 4; grid-row: 1; }
  .wm-hover { display: none !important; }
  .wm-thread { padding: 16px; } .wm-thread h1 { margin-left: 0; } .wm-mb, .wm-replyrow { padding-left: 0; margin-left: 0; }
  .wm-dock { right: 0; left: 0; } .wm-compose:not(.min) { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; }
}
@media (max-width: 560px) { .wm-top { gap: 4px; padding: 0 8px 0 4px; } .wm-brand .brand-logo { max-width: 90px; } .wm-search { height: 40px; } .wm-pager span { display: none; } }

/* domain search results, GoDaddy-style: one big answer, then the rest streaming in */
.dx { display: grid; gap: 22px; text-align: left; margin-top: 18px; }
.dx-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-card); }
.dx-hero.available { box-shadow: 0 0 0 1.5px var(--green-solid), var(--shadow-card); }
.dx-hero.taken, .dx-hero.unknown { grid-template-columns: minmax(0, 1fr) auto; }
.dx-ok { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green-bg); color: var(--green); }
.dx-kicker { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-900); }
.dx-hero.available .dx-kicker { color: var(--green); }
.dx-name { font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; line-height: 1.25; }
.dx-hero.taken .dx-name { color: var(--gray-900); text-decoration: line-through; text-decoration-thickness: 1px; }
.dx-hero.pending { grid-template-columns: auto 1fr; }
.dx-spin { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--gray-300); border-top-color: var(--accent); animation: dxspin .8s linear infinite; }
@keyframes dxspin { to { transform: rotate(360deg); } }
.dx-sec h3 { font-size: 0.875rem; font-weight: 600; margin-bottom: 8px; }
.dx-list { border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-card); overflow: hidden; }
.dx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 92px; align-items: center; gap: 14px; min-height: 52px; padding: 6px 12px 6px 18px; border-top: 1px solid var(--line); animation: dxin .25s var(--ease); }
.dx-row:first-child { border-top: 0; }
.dx-row .btn { justify-self: end; }
.dx-n { font-weight: 500; overflow-wrap: anywhere; } .dx-row.taken .dx-n { color: var(--gray-900); }
.dx-p { font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-sk { width: 70px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--gray-200), var(--gray-100), var(--gray-200)); background-size: 200% 100%; animation: dxsk 1.2s linear infinite; }
@keyframes dxsk { to { background-position: -200% 0; } }
@keyframes dxin { from { opacity: .4; } to { opacity: 1; } }
.dx-more { display: inline-block; margin-top: 10px; }
@media (max-width: 640px) { .dx-hero, .dx-hero.taken, .dx-hero.unknown { grid-template-columns: minmax(0, 1fr); } .dx-ok { display: none; } .dx-hero .btn { justify-self: stretch; } .dx-row { grid-template-columns: minmax(0, 1fr) auto; } .dx-row .dx-p { grid-row: 2; } .dx-row .btn { grid-row: 1 / 3; grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .dx-spin, .dx-sk, .dx-row { animation: none; } }

/* ---------- loading screen (ported from the coming-soon site's Preloader) ----------
   The veil only appears after 0.35 s, so fast pages never flash it. Mark fades in, the
   wordmark pops out beside it, tucks back, the mark fades: a 3.8 s loop. */
.pl { position: fixed; inset: 0; z-index: 9000; transition: opacity .6s ease, visibility 0s linear .6s; animation: pl-failsafe .6s ease 15s forwards; }
.pl.done { opacity: 0; visibility: hidden; pointer-events: none; }
.pl-veil { display: grid; place-items: center; width: 100%; height: 100%; background: var(--bg); opacity: 0; animation: pl-appear .4s ease .35s forwards; }
.pl-logo { --loop: 3.8s; display: flex; align-items: center; color: var(--fg); }
.pl-mark, .pl-word { display: block; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.pl-mark { --src: url("/brand/logo.svg"); position: relative; z-index: 1; width: 64px; height: 26.5px; animation: pl-mark var(--loop) infinite; }
.pl-wrap { display: inline-flex; overflow: hidden; animation: pl-wrap var(--loop) infinite; }
.pl-word { --src: url("/brand/wordmark.svg"); flex-shrink: 0; width: 148px; height: 24px; animation: pl-word var(--loop) infinite; }
@keyframes pl-mark { 0% { opacity: 0; transform: scale(.9); animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 16%, 80% { opacity: 1; transform: scale(1); animation-timing-function: ease-in; } 94%, 100% { opacity: 0; transform: scale(.94); } }
@keyframes pl-wrap { 0%, 22% { width: 0; padding-left: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 40%, 62% { width: 173px; padding-left: 25px; animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 76%, 100% { width: 0; padding-left: 0; } }
@keyframes pl-word { 0%, 22% { opacity: 0; transform: translateX(-45%); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 40%, 62% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 76%, 100% { opacity: 0; transform: translateX(-45%); } }
@keyframes pl-appear { to { opacity: 1; } }
@keyframes pl-failsafe { to { opacity: 0; visibility: hidden; } }
/* a reseller's choice for their client portal: their logo breathing, or a spinner in their colour */
.pl-brand { max-width: 180px; max-height: 64px; object-fit: contain; animation: pl-breathe 1.8s ease-in-out infinite; }
@keyframes pl-breathe { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
.pl-spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: pl-turn .9s linear infinite; }
@keyframes pl-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pl-mark, .pl-wrap, .pl-word, .pl-brand, .pl-spin { animation: none !important; } .pl-wrap { width: auto; padding-left: 25px; } }

/* the Softnamic build-side band on public pages */
.soft { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.soft h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.03em; margin: 8px 0 10px; max-width: 22ch; }
.soft p.muted { max-width: 60ch; }
@media (max-width: 760px) { .soft { grid-template-columns: minmax(0, 1fr); } .soft .btn { justify-self: start; } }

/* ---------- database manager ---------- */
.dbm { display: grid; grid-template-columns: 240px minmax(0, 1fr); padding: 0; overflow: hidden; min-height: 520px; position: relative; }
.dbm-side { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px; border-right: 1px solid var(--line); background: var(--bg-2); min-height: 0; }
.dbm-db { display: grid; gap: 2px; padding: 0 6px; } .dbm-db b { font-size: 0.9375rem; overflow-wrap: anywhere; } .dbm-db small { font-size: 0.75rem; line-height: 1.4; }
.dbm-side .dbm-find:not([type="checkbox"]) { height: 32px; font-size: 0.8125rem; }
.dbm-tables { display: grid; align-content: start; gap: 1px; overflow-y: auto; min-height: 0; }
.dbm-tables button { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius); background: none; text-align: left; font-size: 0.8125rem; cursor: pointer; color: var(--fg); }
.dbm-tables button:hover { background: var(--gray-200); } .dbm-tables button.on { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.dbm-tables button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dbm-tables small { color: var(--gray-900); font-variant-numeric: tabular-nums; flex: none; }
.dbm-main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.dbm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.dbm-crumb { font-size: 0.875rem; overflow-wrap: anywhere; }
.dbm-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--gray-100); }
.dbm-tabs button { border: 0; background: none; padding: 5px 14px; border-radius: 999px; font: inherit; font-size: 0.8125rem; cursor: pointer; color: var(--gray-900); }
.dbm-tabs button[aria-selected="true"] { background: var(--bg); color: var(--fg); box-shadow: var(--shadow-card); font-weight: 500; }
.dbm-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dbm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); flex: none; }
.dbm-where { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 260px; font-size: 0.75rem; }
.dbm-where input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) { height: 32px; font-family: var(--font-mono); font-size: 0.8125rem; }
.dbm-count { white-space: nowrap; } .dbm-pg { display: flex; gap: 2px; }
.dbm-out, .dbm-scroll { overflow: auto; min-height: 0; flex: 1; }
.dbm-scroll { padding: 16px; }
.dbm-grid { overflow: auto; } .dbm-scroll .dbm-grid { border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 8px; }
.dbm-grid table { border-collapse: collapse; font-size: 0.8125rem; min-width: 100%; }
.dbm-grid th { position: sticky; top: 0; z-index: 1; background: var(--bg); text-align: left; font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; font-family: var(--font-mono); font-size: 0.75rem; }
.dbm-grid th[data-sort] { cursor: pointer; } .dbm-grid th[data-sort]:hover, .dbm-grid th.sorted { color: var(--blue); }
.dbm-grid td { padding: 6px 12px; border-bottom: 1px solid var(--line); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 0.75rem; vertical-align: top; }
.dbm-grid tbody tr:hover td { background: var(--gray-100); }
.dbm-grid td.editing { padding: 2px; overflow: visible; }
.dbm-grid td.editing input, .dbm-grid td.editing textarea { width: 100%; min-width: 180px; height: auto; padding: 4px 8px; font-family: var(--font-mono); font-size: 0.75rem; box-shadow: inset 0 0 0 1.5px var(--blue); border-radius: 4px; background: var(--bg); color: var(--fg); }
.dbm-act { width: 30px; padding: 2px 4px !important; } .dbm-x { border: 0; background: none; color: var(--gray-600); font-size: 1rem; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; } .dbm-x:hover { color: var(--red); background: var(--red-bg); }
.dbm-null { color: var(--gray-600); font-style: italic; }
.dbm-msg { padding: 18px 16px; font-size: 0.875rem; } .dbm-msg.err { color: var(--red); } .dbm-msg.ok { color: var(--green); }
.dbm-h { font-size: 0.875rem; font-weight: 600; margin: 4px 0 8px; } .dbm-h:not(:first-child) { margin-top: 20px; }
.dbm-pre { white-space: pre-wrap; font-size: 0.75rem; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.dbm-danger { display: flex; gap: 8px; margin-top: 18px; }
.dbm-sql { display: grid; grid-template-rows: minmax(150px, 38%) auto minmax(0, 1fr); min-height: 0; flex: 1; }
.dbm-ed { min-height: 0; border-bottom: 1px solid var(--line); }
.dbm-ta { width: 100%; height: 100%; border: 0; resize: none; padding: 12px 16px; background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-size: 0.8125rem; outline: none; }
.dbm-hist { width: auto; max-width: 280px; height: 32px; font-size: 0.8125rem; }
.dbm-stat { margin-left: auto; }
.dbm-export p { margin: 8px 0 14px; max-width: 60ch; }
.dbm-flash { position: absolute; right: 16px; bottom: 16px; z-index: 5; padding: 10px 16px; border-radius: 8px; background: #1f1f1f; color: #f2f2f2; font-size: 0.875rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.dbm-flash.err { background: var(--red); color: #fff; } .dbm-flash[hidden] { display: none; }
@media (min-width: 1024px) and (min-height: 620px) { .reseller .dbm { height: 100%; min-height: 0; } }
@media (max-width: 760px) { .dbm { grid-template-columns: minmax(0, 1fr); } .dbm-side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 220px; } }
.wp-consent { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.wp-consent span { display: grid; gap: 2px; font-size: 0.875rem; } .wp-consent small { color: var(--gray-900); font-size: 0.8125rem; }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* reseller forms: segmented toggles keep their own width; choice cards; the domain picker */
.stack > .seg, .stack > .row { justify-self: start; }
.choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pk-choices { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pk-pays { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; } .pk-pays .num { font-size: 1.125rem; font-weight: 600; }
.newacc .field > small, .pk-help { color: var(--gray-900); font-size: 0.8125rem; font-weight: 400; }
.newacc > .field { gap: 4px; margin-bottom: -6px; }
.dpick { display: grid; gap: 10px; }
.dpick-in { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--bg); }
.dpick-in input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) { flex: 1; height: 36px; padding: 0 4px; box-shadow: none; background: none; }
.dpick .dx { margin-top: 4px; gap: 14px; }
.dpick .dx-hero { padding: 16px 18px; gap: 14px; } .dpick .dx-name { font-size: 1.25rem; }
.dpick .dresults { max-height: 46vh; overflow: auto; }
.dpick-chosen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--green-bg); font-size: 0.9375rem; }
.dpick-chosen button.link { background: none; border: 0; font: inherit; cursor: pointer; margin-left: auto; }
@media (max-width: 640px) { .choices.two { grid-template-columns: minmax(0, 1fr); } }
.dpick .dsearch { width: 100%; max-width: none; margin: 0; }

/* ---------- webmail v2: reading pane, collapsible nav, big composer, contacts, calendar ---------- */
.wm-top { grid-template-columns: auto 196px minmax(0, 720px) 1fr; }
.wm-right { justify-self: end; display: flex; align-items: center; gap: 4px; }
.wm-body { transition: grid-template-columns .2s var(--ease); }
.wm-apps { display: grid; gap: 1px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wm-apps a { display: flex; align-items: center; gap: 16px; height: 34px; padding: 0 14px 0 18px; border-radius: 0 999px 999px 0; margin-left: -8px; color: var(--fg); font-size: 0.875rem; }
.wm-apps a:hover { background: var(--gray-200); } .wm-apps a.on { font-weight: 600; }
.wm-apps a .ic, .wm-f .ic { flex: none; }
/* collapsed sidebar: icons only */
#wm.nav-mini .wm-body { grid-template-columns: 76px minmax(0, 1fr); }
#wm.nav-mini .wm-nav { padding: 6px 8px 16px; overflow-x: hidden; }
#wm.nav-mini .wm-nav span, #wm.nav-mini .wm-f b, #wm.nav-mini .wm-f small, #wm.nav-mini .wm-mini-cal { display: none; }
#wm.nav-mini .wm-compose-btn { width: 56px; padding: 0; justify-content: center; }
#wm.nav-mini .wm-apps a, #wm.nav-mini .wm-f { margin-left: 0; border-radius: 999px; justify-content: center; padding: 0; width: 56px; position: relative; }
#wm.nav-mini .wm-f.has::after { content: ""; position: absolute; top: 6px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.wm-main { display: flex; flex-direction: column; grid-template-rows: none; }
.wm-main > * { flex: 1; min-height: 0; }
.wm-mail { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.wm-mail.split { grid-template-columns: minmax(340px, 38%) minmax(0, 1fr); }
.wm-listpane, .wm-readpane, .wm-plist, .wm-calmain { display: grid; grid-template-rows: 48px minmax(0, 1fr); min-height: 0; min-width: 0; }
.wm-listpane[hidden] { display: none; }
.wm-mail.split .wm-listpane { border-right: 1px solid var(--line); }
.wm-read { overflow-y: auto; min-height: 0; outline: none; }
.wm-noread { height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--gray-900); text-align: center; padding: 24px; }
.wm-noread .ic { width: 56px; height: 56px; stroke-width: 1; color: var(--gray-500); } .wm-noread p { font-size: 1rem; color: var(--fg); }
/* two-line rows for the split view */
.wm-list.stacked .wm-row { grid-template-columns: 34px minmax(0, 1fr) 30px; height: auto; align-items: start; padding: 10px 10px 10px 6px; }
.wm-list.stacked .wm-row .wm-check { margin-top: 2px; }
.wm-two { min-width: 0; display: grid; gap: 1px; }
.wm-two-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wm-two-top .wm-from { flex: 1; padding: 0; } .wm-two-top .wm-att .ic { width: 14px; height: 14px; }
.wm-subj-line, .wm-two .wm-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; }
.wm-list.stacked .wm-star { margin-top: -4px; }
.wm-list.stacked .wm-hover { top: auto; bottom: 4px; right: 40px; }
.wm-row.open { background: var(--blue-bg) !important; box-shadow: inset 3px 0 0 var(--blue); }
#wm.compact .wm-row { height: 32px; } #wm.compact .wm-list.stacked .wm-row { padding-top: 6px; padding-bottom: 6px; } #wm.compact .wm-list.stacked .wm-snip { display: none; }
.wm-macts { display: inline-flex; margin-left: 4px; } .wm-macts .wm-ib { width: 30px; height: 30px; } .wm-macts .ic { width: 17px; height: 17px; }
.wm-mail.split .wm-thread { padding: 18px 22px 28px; } .wm-mail.split .wm-thread h1 { margin-left: 0; font-size: 1.25rem; }
.wm-mail.split .wm-mb, .wm-mail.split .wm-replyrow { padding-left: 48px; }
.wm-replyslot { margin: 20px 0 0 48px; } .wm-mail.split .wm-replyslot { margin-left: 0; }
.wm-replyslot .wm-replyrow { margin: 0; }
.wm-mail.split .wm-replyslot .wm-replyrow { padding-left: 48px; }
.wm-bar-title { font-size: 1.125rem; font-weight: 500; margin: 0 8px; }

/* composer: big window (default), docked, minimised, or inline under a conversation */
.wm-dock { pointer-events: none; }
.wm-compose.big { position: fixed; z-index: 65; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(920px, calc(100vw - 48px)); height: min(720px, calc(100vh - 64px)); border-radius: 14px; pointer-events: auto; }
.wm-compose.dock { width: 560px; height: min(600px, calc(100vh - 80px)); }
.wm-compose.big.min, .wm-compose.dock.min { position: static; transform: none; width: 300px; height: 42px; border-radius: 12px 12px 0 0; }
.wm-compose.big::backdrop { display: none; }
.wm-compose.inl { position: static; transform: none; width: auto; height: auto; min-height: 320px; margin: 4px 0 8px; border-radius: 12px; box-shadow: var(--shadow-menu); pointer-events: auto; }
.wm-compose.inl .wm-ch { background: none; border-bottom: 1px solid var(--line); cursor: default; }
.wm-compose.inl textarea { min-height: 200px; }
.wm-cf .wm-fromv { color: var(--fg); padding: 9px 0; font-size: 0.875rem; }
.wm-cf > span:first-child { width: 36px; flex: none; }
.wm-ccb { display: flex; gap: 8px; margin-left: auto; }
.wm-chipin { position: relative; flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 38px; padding: 3px 0; cursor: text; }
.wm-chips { display: contents; }
.wm-chipin > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) { flex: 1; min-width: 140px; height: 30px; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; font-size: 0.875rem; color: var(--fg); }
.wm-addrchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 2px 0 3px; border-radius: 999px; background: var(--gray-200); font-size: 0.8125rem; max-width: 260px; }
.wm-addrchip.bad { background: var(--red-bg); color: var(--red); }
.wm-addrchip button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--gray-900); cursor: pointer; } .wm-addrchip button:hover { background: var(--gray-400); }
.wm-addrchip button .ic { width: 12px; height: 12px; }
.wm-av.xs { width: 20px; height: 20px; font-size: 0.625rem; } .wm-av.sm { width: 28px; height: 28px; font-size: 0.75rem; } .wm-av.xl { width: 88px; height: 88px; font-size: 2.25rem; }
.wm-sug { position: absolute; z-index: 80; top: 100%; left: 0; width: min(380px, 100%); padding: 6px; border-radius: 12px; background: var(--bg); box-shadow: var(--shadow-menu); }
.wm-sug button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; text-align: left; font: inherit; color: var(--fg); cursor: pointer; }
.wm-sug button.on, .wm-sug button:hover { background: var(--gray-100); }
.wm-sug span { display: grid; min-width: 0; } .wm-sug b { font-size: 0.875rem; font-weight: 500; } .wm-sug small { font-size: 0.75rem; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-subjin:not([type="checkbox"]) { flex: 1; height: 38px; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; font-size: 0.9375rem; color: var(--fg); }

/* contacts */
.wm-people { display: grid; grid-template-columns: minmax(320px, 42%) minmax(0, 1fr); min-height: 0; }
.wm-plist { border-right: 1px solid var(--line); }
.wm-ph { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-900); font-weight: 600; padding: 14px 16px 6px; }
.wm-prow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); color: var(--fg); }
.wm-prow:hover { background: var(--gray-100); } .wm-prow.on { background: var(--blue-bg); }
.wm-prow .wm-av { width: 36px; height: 36px; }
.wm-prow span { display: grid; min-width: 0; } .wm-prow b { font-weight: 500; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wm-prow small { color: var(--gray-900); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-pco { max-width: 140px; }
.wm-pcard { overflow-y: auto; min-height: 0; }
.wm-pdetail { display: grid; justify-items: center; gap: 10px; padding: 36px 28px; text-align: center; }
.wm-pdetail h2 { font-size: 1.5rem; font-weight: 500; }
.wm-prow-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 6px 0 10px; }
.wm-prow-acts .wm-send, .wm-prow-acts .wm-btn { display: inline-flex; align-items: center; gap: 8px; }
.wm-pdl { display: grid; gap: 12px; width: min(460px, 100%); text-align: left; margin: 8px 0 18px; padding: 16px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.wm-pdl div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 0.875rem; } .wm-pdl dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .wm-pdl .ic { color: var(--gray-900); width: 20px; height: 20px; }
.wm-pform { display: grid; gap: 14px; padding: 28px; max-width: 520px; } .wm-pform h2 { font-size: 1.25rem; font-weight: 500; } .wm-pform .wm-prow-acts { justify-content: flex-start; }
.wm-btn.danger { color: var(--red); }

/* calendar */
.wm-cal { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 0; }
.wm-calmain .wm-bar { gap: 6px; }
.wm-month { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.wm-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); } .wm-wk span { padding: 8px 10px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-900); font-weight: 600; }
.wm-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); min-height: 0; }
.wm-day { display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 0; overflow: hidden; cursor: pointer; }
.wm-day:nth-child(7n) { border-right: 0; } .wm-day:hover { background: var(--gray-100); } .wm-day.out { background: var(--bg-2); } .wm-day.out .wm-dn { color: var(--gray-600); }
.wm-dn { align-self: center; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 0.75rem; font-weight: 500; flex: none; }
.wm-day.today .wm-dn { background: var(--accent); color: var(--accent-ink); }
.wm-ev { display: block; width: 100%; text-align: left; border: 0; border-radius: 5px; padding: 2px 6px; font: inherit; font-size: 0.75rem; line-height: 1.35; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); background: none; }
.wm-ev i { font-style: normal; color: var(--gray-900); margin-right: 4px; font-variant-numeric: tabular-nums; }
.wm-ev::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--evc); vertical-align: 1px; }
.wm-ev.all { background: var(--evc); color: #fff; } .wm-ev.all::before { display: none; }
.wm-ev:hover { filter: brightness(1.1); background: var(--gray-200); } .wm-ev.all:hover { background: var(--evc); }
.blue { --evc: #3170ce; } .green { --evc: #4f8f12; } .amber { --evc: #c27600; } .red { --evc: #d1453b; } .grey { --evc: #6b6b6b; }
.wm-more { border: 0; background: none; font: inherit; font-size: 0.6875rem; font-weight: 600; color: var(--gray-900); text-align: left; padding: 0 6px; cursor: pointer; }
.wm-agenda { border-left: 1px solid var(--line); padding: 14px 12px; overflow-y: auto; display: grid; align-content: start; gap: 4px; }
.wm-agenda h3 { font-size: 0.875rem; font-weight: 600; padding: 0 6px 8px; }
.wm-ag { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none; text-align: left; font: inherit; color: var(--fg); cursor: pointer; }
.wm-ag:hover { background: var(--gray-100); } .wm-ag span:last-child { display: grid; gap: 2px; min-width: 0; } .wm-ag b { font-size: 0.8125rem; font-weight: 500; } .wm-ag small { font-size: 0.75rem; color: var(--gray-900); }
.wm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--evc); margin-top: 4px; flex: none; }
.wm-mini-cal { margin-top: 18px; padding: 0 6px; }
.wm-mc { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 0.6875rem; }
.wm-mc b { color: var(--gray-900); font-weight: 600; padding: 2px 0; } .wm-mc a { padding: 4px 0; border-radius: 50%; color: var(--fg); } .wm-mc a:hover { background: var(--gray-200); } .wm-mc a.out { color: var(--gray-600); } .wm-mc a.today { background: var(--accent); color: var(--accent-ink); }

/* dialogs: event, settings */
.wm-dlg { border: 0; border-radius: 16px; padding: 0; background: var(--bg); color: var(--fg); box-shadow: var(--shadow-menu); width: min(560px, calc(100vw - 32px)); }
.wm-dlg::backdrop { background: rgba(0, 0, 0, .45); }
.wm-evform, .wm-setform { display: grid; gap: 12px; padding: 18px 20px 20px; }
.wm-evform header, .wm-setform header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wm-setform h2 { font-size: 1.125rem; }
.wm-evtitle:not([type="checkbox"]) { font-size: 1.375rem; height: 46px; box-shadow: inset 0 -1px 0 var(--line-strong); border-radius: 0; background: none; padding: 0 2px; }
.wm-evrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wm-evrow > .ic { color: var(--gray-900); flex: none; }
.wm-evrow > input:not([type="checkbox"]):not([type="radio"]), .wm-evrow textarea { flex: 1; width: auto; }
.wm-evrow input[type="date"], .wm-evrow input[type="time"] { flex: none !important; width: auto !important; }
.wm-evrow .wm-chipin { min-height: 40px; padding: 4px 10px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-strong); }
.wm-times { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--gray-900); } .wm-times[hidden] { display: none; }
.wm-allday { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; }
.wm-inv { margin-left: auto; }
.wm-sw { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--evc); cursor: pointer; }
.wm-sw input { position: absolute; opacity: 0; } .wm-sw:has(input:checked) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--evc); }
.wm-evform footer, .wm-setform footer { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding-top: 6px; } .wm-evform footer .wm-cstat { margin-right: auto; color: var(--red); font-size: 0.8125rem; }
.wm-setform fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; } .wm-setform legend { font-weight: 600; font-size: 0.875rem; margin-bottom: 8px; }
.wm-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.wm-opt:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--blue); background: var(--blue-bg); }
.wm-opt span { display: grid; } .wm-opt b { font-size: 0.875rem; font-weight: 500; } .wm-opt small { font-size: 0.75rem; color: var(--gray-900); } .wm-opt input { margin-top: 3px; accent-color: var(--blue); }
@media (max-width: 1099px) { .wm-cal { grid-template-columns: minmax(0, 1fr); } .wm-agenda { display: none; } .wm-people { grid-template-columns: minmax(0, 1fr); } .wm-people .wm-pcard:empty, .wm-people .wm-pcard:has(.wm-noread) { display: none; } }
@media (max-width: 900px) { .wm-top { grid-template-columns: auto auto minmax(0, 1fr) auto; } .wm-compose.big { width: 100vw; height: 100vh; border-radius: 0; } #wm.nav-mini .wm-body { grid-template-columns: minmax(0, 1fr); } }
.wm-send { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; } .wm-send .ic { width: 18px; height: 18px; }

/* ---------- imeli: Softnamic's mail and workspace brand ---------- */
.imeli-mark { display: inline-flex; align-items: baseline; gap: 10px; color: var(--fg); }
.imeli-word { font-weight: 650; font-size: 1.5rem; letter-spacing: -0.045em; line-height: 1; }
.imeli-i { position: relative; display: inline-block; }
.imeli-i i { position: absolute; left: 50%; top: -0.08em; width: 0.3em; height: 0.3em; margin-left: -0.15em; border-radius: 50%; background: var(--gradient); }
.imeli-by { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--gray-900); text-transform: lowercase; }
.webmail.imeli .wm-brand { gap: 14px; }
.webmail.imeli .wm-app { border-left: 0; padding-left: 0; font-size: 0.9375rem; color: var(--gray-900); }
.auth.imeli .auth-brand { justify-content: center; } .auth.imeli .imeli-word { font-size: 2.25rem; } .imeli-auth { display: grid; justify-items: center; gap: 4px; }
.auth.imeli .imeli-mark { flex-direction: column; align-items: center; gap: 8px; }

/* compose: the one solid action on the page */
.wm-compose-btn { background: var(--accent); color: var(--accent-ink); height: 54px; padding: 0 26px 0 20px; border-radius: 18px; font-weight: 600; letter-spacing: -0.01em; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s; }
.wm-compose-btn:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 10px 22px -6px color-mix(in srgb, var(--accent) 80%, transparent); filter: brightness(1.06); }
.wm-compose-btn:active { transform: translateY(1px); }
.wm-compose-btn .ic { width: 22px; height: 22px; stroke-width: 2; }
#wm.nav-mini .wm-compose-btn { width: 56px; height: 56px; border-radius: 18px; padding: 0; }

/* inbox tabs (Primary / Updates / Promotions) */
.wm-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; background: var(--bg); }
.wm-tabs button { position: relative; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--gray-900); cursor: pointer; text-align: left; }
.wm-tabs button:hover { background: var(--gray-100); }
.wm-tabs button[aria-selected="true"] { color: var(--blue); } .wm-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--blue); }
.wm-tabs b { font-size: 0.6875rem; padding: 1px 7px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; }
.wm-list.stacked + .wm-tabs, .wm-mail.split .wm-tabs span { font-size: 0.8125rem; }
.wm-mail.split .wm-tabs button { gap: 8px; padding: 0 10px; } .wm-mail.split .wm-tabs .ic { width: 18px; height: 18px; }

/* labels */
.purple { --evc: #8a5cd6; } .teal { --evc: #1f9e96; }
.wm-labels { margin-top: 14px; }
.wm-lhead { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px 18px; font-size: 0.875rem; font-weight: 600; }
.wm-lhead .wm-ib { width: 30px; height: 30px; } .wm-lhead .ic { width: 18px; height: 18px; }
.wm-ldot { flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--evc); display: inline-block; }
.wm-lf { position: relative; } .wm-lf .wm-ledit { display: none; width: 26px; height: 26px; margin-left: auto; } .wm-lf .wm-ledit .ic { width: 14px; height: 14px; }
.wm-lf:hover .wm-ledit { display: inline-grid; } .wm-lf:hover b { display: none; }
#wm.nav-mini .wm-lhead span, #wm.nav-mini .wm-lhead { justify-content: center; padding: 0; } #wm.nav-mini .wm-lhead span { display: none; } #wm.nav-mini .wm-lf .wm-ledit { display: none !important; }
.wm-lchip { display: inline-flex; align-items: center; gap: 2px; font-size: 0.6875rem; font-weight: 600; padding: 1px 7px; margin-right: 6px; border-radius: 4px; background: color-mix(in srgb, var(--evc) 22%, transparent); color: color-mix(in srgb, var(--evc) 80%, var(--fg)); vertical-align: 1px; white-space: nowrap; }
.wm-thread h1 .wm-lchip { font-size: 0.75rem; padding: 2px 4px 2px 8px; vertical-align: 3px; }
.wm-lchip button { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; } .wm-lchip button .ic { width: 11px; height: 11px; } .wm-lchip button:hover { background: color-mix(in srgb, var(--evc) 30%, transparent); }
.wm-labelhead { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .wm-labelhead b { font-size: 1rem; font-weight: 600; } .wm-labelhead .wm-btn { margin-left: auto; height: 30px; font-size: 0.8125rem; } .wm-labelhead .wm-btn .ic { width: 15px; height: 15px; }
.wm-lpick { position: fixed; z-index: 90; width: 268px; padding: 10px; border-radius: 12px; background: var(--bg); box-shadow: var(--shadow-menu); display: grid; gap: 6px; }
.wm-lp-h { font-size: 0.75rem; font-weight: 600; color: var(--gray-900); padding: 2px 4px; }
.wm-lp-q:not([type="checkbox"]) { height: 34px; font-size: 0.875rem; }
.wm-lp-list { display: grid; max-height: 220px; overflow: auto; }
.wm-lp-list label { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 6px; font-size: 0.875rem; cursor: pointer; } .wm-lp-list label:hover { background: var(--gray-100); } .wm-lp-list label[hidden] { display: none; }
.wm-lp-list input { accent-color: var(--blue); }
.wm-lp-new { display: flex; align-items: center; gap: 8px; padding: 6px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 0.875rem; color: var(--blue); cursor: pointer; text-align: left; } .wm-lp-new .ic { width: 16px; height: 16px; }
.wm-lp-tabs { display: flex; gap: 4px; } .wm-lp-tabs button { flex: 1; height: 30px; border: 0; border-radius: 999px; background: var(--gray-100); font: inherit; font-size: 0.75rem; cursor: pointer; color: var(--fg); } .wm-lp-tabs button:hover { background: var(--gray-200); }
/* imeli loading screen: the gradient dot drops onto the i, "meli" slides out and tucks back (same 3.8 s loop) */
.pl-imeli { --loop: 3.8s; display: flex; align-items: baseline; font-weight: 650; font-size: 64px; letter-spacing: -0.045em; line-height: 1; color: var(--fg); }
.pl-imark { position: relative; display: inline-block; animation: pl-mark var(--loop) infinite; }
.pl-imark i { position: absolute; left: 50%; top: -0.08em; width: 0.3em; height: 0.3em; margin-left: -0.15em; border-radius: 50%; background: var(--gradient); animation: pl-dot var(--loop) infinite; }
.pl-iwrap { display: inline-flex; overflow: hidden; animation: pl-iwrap var(--loop) infinite; }
.pl-iword { flex-shrink: 0; animation: pl-word var(--loop) infinite; }
@keyframes pl-dot { 0% { transform: translateY(-60%); opacity: 0; } 14% { transform: translateY(8%); opacity: 1; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 20%, 80% { transform: none; opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes pl-iwrap { 0%, 22% { width: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 40%, 62% { width: 2.75em; animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 76%, 100% { width: 0; } }
@media (prefers-reduced-motion: reduce) { .pl-imark, .pl-imark i, .pl-iwrap, .pl-iword { animation: none !important; } .pl-iwrap { width: auto; } }
.imeli-i, .pl-imark { letter-spacing: 0; margin-right: -0.045em; } .imeli-i i, .pl-imark i { left: calc(50% + 0.01em); }
/* a reseller's logo beside imeli: "provided by" */
.wm-cobrand { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--line-strong); font-size: 0.8125rem; color: var(--gray-900); }
.wm-cobrand img { max-height: 24px; max-width: 110px; object-fit: contain; }
.webmail.imeli .wm-top { grid-template-columns: auto minmax(196px, auto) minmax(0, 720px) 1fr; }
.auth-via { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.8125rem; color: var(--gray-900); }
.auth-via img { max-height: 22px; max-width: 100px; object-fit: contain; }
/* imeli v2: the Softnamic wave (one flat colour, never the gradient) + the wordmark set like Softnamic's */
.imeli-mark { align-items: center; gap: 10px; }
.imeli-wave { display: block; width: 32px; height: 13.25px; flex: none; background: currentColor; -webkit-mask: url("/brand/logo.svg") center / contain no-repeat; mask: url("/brand/logo.svg") center / contain no-repeat; }
.imeli-word { font-weight: 600; font-size: 1.375rem; letter-spacing: -0.035em; line-height: 1; }
.auth.imeli .imeli-wave { width: 52px; height: 21.5px; } .auth.imeli .imeli-word { font-size: 2.125rem; }
.pl-imeli2 .pl-mark { background: var(--gradient); }
.pl-imeli2 .pl-wrap { animation-name: pl-iwrap; font-size: 46px; }
.pl-imeli2 .pl-iword { padding-left: 0.32em; font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: var(--fg); animation: pl-word var(--loop) infinite; }

/* ---------- Softmail / Softcloud: the Soft- family, set like the Softnamic wordmark ---------- */
.imeli-word { font-weight: 400; font-size: 1.3125rem; letter-spacing: -0.03em; }
.imeli-word b, .pl-iword b { font-weight: 700; }
.auth.imeli .imeli-word { font-size: 2rem; }
.pl-imeli2 .pl-iword { font-weight: 400; }
@keyframes pl-iwrap { 0%, 22% { width: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 40%, 62% { width: 4.7em; animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 76%, 100% { width: 0; } }

/* app rail: Mail, Calendar, Contacts, Cloud, Google style */
.webmail.imeli .wm-top { grid-template-columns: auto 232px minmax(0, 720px) 1fr; }
.wm-body { grid-template-columns: 76px 244px minmax(0, 1fr); }
.wm-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; }
.wm-rail a { display: grid; justify-items: center; gap: 4px; width: 64px; padding: 4px 0; color: var(--gray-900); font-size: 0.75rem; font-weight: 500; }
.wm-rpill { position: relative; display: grid; place-items: center; width: 56px; height: 32px; border-radius: 999px; transition: background .15s; }
.wm-rail a:hover .wm-rpill { background: var(--gray-200); }
.wm-rail a.on { color: var(--fg); font-weight: 600; } .wm-rail a.on .wm-rpill { background: var(--blue-bg); color: var(--blue); }
.wm-rail .ic { width: 22px; height: 22px; }
.wm-rbadge { position: absolute; top: -4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 0.6875rem; font-weight: 700; display: grid; place-items: center; }
.wm-rbadge[hidden] { display: none; }
#wm.nav-mini .wm-body { grid-template-columns: 76px 0 minmax(0, 1fr); }
#wm.nav-mini .wm-nav { display: none; }
.wm-nav { padding: 8px 14px 14px 6px; display: flex; flex-direction: column; min-height: 0; }
.wm-nav > .wm-folders, .wm-nav > .wm-labels, .wm-nav > .wm-ctx { flex: none; }
.wm-ctx[hidden], .wm-folders[hidden], .wm-labels[hidden] { display: none; }
.wm-ctx .wm-f small { margin-left: auto; color: var(--gray-900); font-size: 0.75rem; }

/* compose (or Create): the page's one solid action, sized like Gmail's */
.wm-compose-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; height: 56px; min-width: 148px; padding: 0 24px 0 18px; margin: 4px 0 18px 4px; border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent); transition: box-shadow .2s var(--ease), transform .2s var(--ease), filter .2s; }
.wm-compose-btn:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 10px 24px -6px color-mix(in srgb, var(--accent) 75%, transparent); transform: translateY(-1px); filter: none; }
.wm-compose-btn:active { transform: none; }
.wm-cbi { display: grid; place-items: center; } .wm-cbi .ic { width: 22px; height: 22px; stroke-width: 2; }

/* storage, pinned to the bottom of the sidebar */
.wm-storage { margin-top: auto; display: flex; align-items: flex-start; gap: 10px; padding: 14px 8px 4px 16px; color: var(--gray-900); font-size: 0.75rem; }
.wm-storage > .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.wm-storage > span { display: grid; gap: 6px; flex: 1; }
.wm-store-bar { display: block; height: 4px; border-radius: 4px; background: var(--gray-300); overflow: hidden; } .wm-store-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--gradient); }
.wm-store { padding: 14px 16px 0; display: grid; gap: 6px; font-size: 0.75rem; color: var(--gray-900); }

/* search suggestions */
.wm-search { position: relative; }
.wm-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 95; max-height: 70vh; overflow: auto; padding: 6px; border-radius: 16px; background: var(--bg); box-shadow: var(--shadow-menu); }
.wm-search:has(.wm-suggest:not([hidden])) { border-radius: 24px 24px 24px 24px; background: var(--bg); box-shadow: var(--shadow-menu); }
.wm-suggest p { padding: 8px 12px 4px; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-900); }
.wm-suggest button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 12px; border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; font-size: 0.875rem; color: var(--fg); cursor: pointer; }
.wm-suggest button:hover, .wm-suggest button.on { background: var(--gray-100); }
.wm-suggest button > .ic { width: 18px; height: 18px; color: var(--gray-900); flex: none; }
.wm-suggest button span { display: grid; min-width: 0; } .wm-suggest b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wm-suggest small { font-size: 0.75rem; color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Softcloud */
.wm-cloud { display: grid; grid-template-rows: 48px minmax(0, 1fr); min-height: 0; }
.wm-cloud.drop { box-shadow: inset 0 0 0 2px var(--blue); background: var(--blue-bg); }
.wm-crumbs { display: flex; align-items: center; gap: 4px; font-size: 1.0625rem; min-width: 0; overflow: hidden; white-space: nowrap; } .wm-crumbs a { color: var(--gray-900); padding: 4px 8px; border-radius: 8px; } .wm-crumbs a:hover { background: var(--gray-100); color: var(--fg); } .wm-crumbs b { font-weight: 500; padding: 4px 8px; } .wm-crumbs .ic { width: 16px; height: 16px; color: var(--gray-600); }
.wm-up { cursor: pointer; }
.wm-cbody2 { overflow-y: auto; min-height: 0; padding: 4px 18px 24px; }
.wm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.wm-tiles.folders { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.wm-tile { position: relative; display: grid; grid-template-rows: 130px auto; border-radius: 14px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; overflow: hidden; outline: none; transition: box-shadow .15s; }
.wm-tile:hover, .wm-tile:focus-visible { box-shadow: inset 0 0 0 1px var(--line-strong), 0 4px 14px -6px rgba(0, 0, 0, .4); }
.wm-tile.dir { grid-template-rows: auto; }
.wm-tile.dir .wm-thumb { display: none; }
.wm-thumb { display: grid; place-items: center; background: var(--gray-100); color: var(--gray-700); overflow: hidden; } .wm-thumb .ic { width: 44px; height: 44px; stroke-width: 1.2; } .wm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wm-tname { display: grid; gap: 2px; padding: 10px 40px 10px 14px; min-width: 0; } .wm-tname span { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wm-tname small { font-size: 0.75rem; color: var(--gray-900); }
.wm-tile.dir .wm-tname { grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding-left: 14px; } .wm-tile.dir .wm-tname::before { content: ""; grid-row: 1 / 3; align-self: center; width: 22px; height: 18px; border-radius: 3px 3px 4px 4px; background: color-mix(in srgb, var(--blue) 70%, transparent); -webkit-mask: linear-gradient(#000 0 0); }
.wm-tmenu { position: absolute; right: 4px; bottom: 6px; width: 30px; height: 30px; opacity: 0; } .wm-tile:hover .wm-tmenu, .wm-crow:hover .wm-tmenu, .wm-tmenu:focus { opacity: 1; } .wm-tmenu .ic { width: 16px; height: 16px; }
.wm-crows { display: grid; } .wm-crow { display: grid; grid-template-columns: 28px minmax(0, 1fr) 110px 110px 36px; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-bottom: 1px solid var(--line); font-size: 0.875rem; cursor: pointer; } .wm-crow:hover { background: var(--gray-100); } .wm-crow.head { cursor: default; font-size: 0.75rem; font-weight: 600; color: var(--gray-900); min-height: 36px; } .wm-crow.head:hover { background: none; }
.wm-crow > .ic { width: 20px; height: 20px; color: var(--gray-900); } .wm-cn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wm-crow .wm-tmenu { position: static; }
.wm-menu-pop { width: 210px; padding: 6px; } .wm-menu-pop button, .wm-menu-pop a, .wm-menu-pop label { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 0.875rem; color: var(--fg); cursor: pointer; text-align: left; } .wm-menu-pop button:hover, .wm-menu-pop a:hover, .wm-menu-pop label:hover { background: var(--gray-100); } .wm-menu-pop .ic { width: 17px; height: 17px; color: var(--gray-900); } .wm-menu-pop .danger { color: var(--red); } .wm-menu-pop .danger .ic { color: var(--red); }
.wm-dlg.wide { width: min(1100px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); }
.wm-prev { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.wm-prev header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); } .wm-prev header > span { display: flex; align-items: center; gap: 8px; min-width: 0; } .wm-prev header b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-prev header .wm-btn { height: 34px; }
.wm-prev-body { display: grid; place-items: center; min-height: 0; background: var(--bg-2); overflow: auto; } .wm-prev-body img { max-width: 100%; max-height: 100%; object-fit: contain; } .wm-prev-body iframe { width: 100%; height: 100%; border: 0; background: #fff; } .wm-prev-body pre { align-self: start; justify-self: stretch; margin: 0; padding: 20px 24px; font-family: var(--font-mono); font-size: 0.8125rem; white-space: pre-wrap; }
@media (max-width: 900px) { .wm-body { grid-template-columns: 64px minmax(0, 1fr); } .wm-rail a { width: 56px; } .wm-rpill { width: 48px; } .webmail.imeli .wm-top { grid-template-columns: auto auto minmax(0, 1fr) auto; } .wm-crow { grid-template-columns: 28px minmax(0, 1fr) 36px; } .wm-crow > span:nth-child(3), .wm-crow > span:nth-child(4) { display: none; } }
.wm-suggest button span.wm-sg-plain { display: block; } .wm-sg-plain b { font-weight: 600; }
@keyframes pl-iwrap { 0%, 22% { width: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 40%, 62% { width: 5.2em; animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 76%, 100% { width: 0; } }
/* Hostnamic in the public nav and on sign-in */
.nav .imeli-mark { gap: 9px; } .nav .imeli-wave { width: 28px; height: 11.6px; } .nav .imeli-word { font-size: 1.125rem; }
.auth .auth-brand .imeli-mark { gap: 10px; }
/* product app icons beside the -namic wordmarks */
.pm-icon { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.nav .pm-icon { width: 26px; height: 26px; border-radius: 7px; }
.auth.imeli .pm-icon, .auth .auth-brand .pm-icon { width: 44px; height: 44px; border-radius: 11px; }
.imeli-mark .imeli-wave { display: none; }
/* the app rail sits on the right, like Google's side panel */
.wm-body { grid-template-columns: 244px minmax(0, 1fr) 76px; }
.wm-rail { order: 3; padding: 8px 0 8px 0; }
.wm-nav { order: 1; } .wm-main { order: 2; margin: 0 4px 16px 0; }
/* collapsed, the folder panel is display:none, so it gives up its column instead of keeping a 0px one */
#wm.nav-mini .wm-body { grid-template-columns: minmax(0, 1fr) 76px; }
#wm.nav-mini .wm-main { margin-left: 16px; }
@media (max-width: 900px) { .wm-body, #wm.nav-mini .wm-body { grid-template-columns: minmax(0, 1fr) 64px; } .wm-main { margin: 0 4px 8px 8px; } }
/* the rail's own apps wear their product icons; Calendar, Contacts and All apps keep line icons */
.wm-rail .wm-rlogo { width: 24px; height: 24px; }
.wm-nav { padding-left: 14px; } .wm-nav .wm-f, .wm-nav .wm-apps a { margin-left: -14px; padding-left: 26px; } .wm-lhead { padding-left: 12px; } .wm-storage { padding-left: 12px; }
/* compose: a Softnamic primary button, not a Gmail tile. Pill, brand blue, the gradient as a ring on hover */
.wm-compose-btn { align-self: stretch; justify-content: center; gap: 10px; height: 44px; min-width: 0; margin: 6px 4px 18px 0; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; box-shadow: none; position: relative; isolation: isolate; transition: filter .15s var(--ease), transform .15s var(--ease); }
.wm-compose-btn::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; background: var(--gradient); opacity: 0; transition: opacity .2s var(--ease); }
.wm-compose-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent); }
.wm-compose-btn:hover { box-shadow: none; transform: none; filter: brightness(1.08); }
.wm-compose-btn:hover::before, .wm-compose-btn:focus-visible::before { opacity: 1; }
.wm-compose-btn:active { transform: scale(.98); }
.wm-cbi .ic { width: 18px; height: 18px; stroke-width: 2.2; }
#wm.nav-mini .wm-compose-btn { width: 44px; height: 44px; padding: 0; border-radius: 999px; }

/* ---------- Teamnamic ---------- */
.tm { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; height: 100%; }
.tm:has(.tm-side:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(320px, 36%); }
.tm-main, .tm-side { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-height: 0; min-width: 0; }
.tm-side { border-left: 1px solid var(--line); grid-template-rows: auto minmax(0, 1fr) auto; }
.tm-side[hidden] { display: none; }
.tm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.tm-head > div:first-child { display: grid; min-width: 0; } .tm-head b { display: flex; align-items: center; gap: 6px; font-size: 1rem; } .tm-head b .ic { width: 18px; height: 18px; color: var(--gray-900); }
.tm-head small { color: var(--gray-900); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-dmhead { display: flex !important; align-items: center; gap: 10px; } .tm-dmhead > div { display: grid; }
.tm-hacts { display: flex; align-items: center; gap: 10px; }
.tm-faces { display: flex; } .tm-faces .tm-avw { margin-left: -8px; } .tm-faces .tm-avw:first-child { margin-left: 0; } .tm-faces .wm-av { box-shadow: 0 0 0 2px var(--bg); }
.tm-faces.lg { gap: 6px; } .tm-faces.lg .tm-avw { margin: 0; }
.tm-list { overflow-y: auto; min-height: 0; padding: 8px 0 12px; outline: none; }
.tm-start { padding: 28px 20px 18px; display: grid; gap: 4px; } .tm-start h2 { font-size: 1.375rem; font-weight: 600; } .tm-start p { color: var(--gray-900); font-size: 0.875rem; }
.tm-day { display: flex; align-items: center; gap: 12px; margin: 14px 20px 6px; font-size: 0.75rem; font-weight: 600; color: var(--gray-900); } .tm-day::before, .tm-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tm-msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 6px 20px 4px; }
.tm-msg:hover { background: var(--gray-100); }
.tm-msg.grouped { padding-top: 1px; }
.tm-msg .wm-av { width: 36px; height: 36px; }
.tm-time { font-size: 0.6875rem; color: var(--gray-600); text-align: right; padding-top: 3px; visibility: hidden; } .tm-msg:hover .tm-time { visibility: visible; }
.tm-meta { display: flex; align-items: baseline; gap: 8px; } .tm-meta b { font-size: 0.875rem; } .tm-meta small { font-size: 0.6875rem; color: var(--gray-900); }
.tm-text { font-size: 0.9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.tm-text code { font-family: var(--font-mono); font-size: 0.8125rem; padding: 1px 5px; border-radius: 4px; background: var(--gray-200); }
.tm-text a { color: var(--blue); text-decoration: underline; }
.tm-mention { padding: 0 3px; border-radius: 4px; background: var(--blue-bg); color: var(--blue); font-weight: 500; } .tm-mention.me { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber); }
.tm-ed { color: var(--gray-600); font-size: 0.6875rem; } .tm-del { color: var(--gray-600); font-style: italic; font-size: 0.875rem; }
.tm-avw { position: relative; display: inline-block; line-height: 0; } .tm-on { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 0 2px var(--bg); }
.tm-tools { position: absolute; right: 16px; top: -14px; display: none; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg); box-shadow: var(--shadow-menu); z-index: 2; }
.tm-msg:hover .tm-tools, .tm-tools:focus-within { display: flex; }
.tm-tools button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; font-size: 1rem; cursor: pointer; color: var(--gray-900); } .tm-tools button:hover { background: var(--gray-100); color: var(--fg); } .tm-tools .ic { width: 16px; height: 16px; }
.tm-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tm-react { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--gray-200); font: inherit; font-size: 0.8125rem; cursor: pointer; color: var(--fg); } .tm-react b { font-size: 0.75rem; font-weight: 600; } .tm-react.mine { background: var(--blue-bg); box-shadow: inset 0 0 0 1px var(--blue); }
.tm-replies { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--blue); cursor: pointer; } .tm-replies:hover { background: var(--blue-bg); } .tm-replies small { color: var(--gray-900); font-weight: 400; } .tm-replies .ic { width: 15px; height: 15px; }
.tm-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .tm-img img { max-width: 280px; max-height: 200px; border-radius: 10px; display: block; } .tm-files .wm-file { width: 260px; color: var(--fg); }
.tm-editf { display: grid; gap: 6px; } .tm-editf textarea { width: 100%; min-height: 60px; padding: 8px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--blue); background: var(--bg); font: inherit; color: var(--fg); } .tm-editf > div { display: flex; gap: 8px; justify-content: flex-end; }
.tm-typing { min-height: 20px; padding: 0 20px; font-size: 0.75rem; color: var(--gray-900); font-style: italic; }
.tm-compose { margin: 0 16px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--bg); }
.tm-compose:focus-within { box-shadow: inset 0 0 0 1.5px var(--blue); }
.tm-in { position: relative; } .tm-in textarea { display: block; width: 100%; min-height: 44px; max-height: 200px; padding: 12px 14px 4px; border: 0; background: none; resize: none; font: inherit; font-size: 0.9375rem; line-height: 1.5; color: var(--fg); outline: none; }
.tm-cbar { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; } .tm-cbar .muted { flex: 1; font-size: 0.6875rem; } .tm-cbar .wm-send { height: 32px; padding: 0 16px; }
.tm-atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; } .tm-atts[hidden] { display: none; }
.tm-ment { position: absolute; left: 10px; bottom: calc(100% + 6px); z-index: 20; width: 280px; padding: 6px; border-radius: 12px; background: var(--bg); box-shadow: var(--shadow-menu); } .tm-ment[hidden] { display: none; }
.tm-ment button, .tm-pick button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; text-align: left; font: inherit; color: var(--fg); cursor: pointer; } .tm-ment button.on, .tm-ment button:hover, .tm-pick button:hover { background: var(--gray-100); }
.tm-ment span, .tm-pick span { display: grid; } .tm-ment small, .tm-pick small { font-size: 0.75rem; color: var(--gray-900); } .tm-ment b, .tm-pick b { font-weight: 500; font-size: 0.875rem; }
.tm-pick { display: grid; gap: 2px; max-height: 60vh; overflow: auto; }
.tm-org { padding: 4px 12px 10px; font-weight: 600; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-c .ic { width: 17px; height: 17px; } .tm-dmrow .wm-av.xs { width: 22px; height: 22px; } .tm-dmrow .tm-on { width: 8px; height: 8px; }
.wm-f b.tm-at { background: var(--red); color: #fff; padding: 0 6px; border-radius: 999px; font-size: 0.6875rem; }
.tm-emojis { display: flex; gap: 2px; width: auto; padding: 6px; } .tm-emojis button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; font-size: 1.125rem; cursor: pointer; } .tm-emojis button:hover { background: var(--gray-100); }
.tm-room { display: grid; justify-items: center; align-content: center; gap: 14px; height: 100%; padding: 32px 20px; text-align: center; }
.tm-room img { border-radius: 18px; } .tm-room h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.tm-roomcard { display: flex; gap: 14px; align-items: flex-start; max-width: 460px; padding: 16px 18px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); text-align: left; } .tm-roomcard > .ic { color: var(--blue); width: 28px; height: 28px; flex: none; }
@media (max-width: 900px) { .tm:has(.tm-side:not([hidden])) { grid-template-columns: minmax(0, 1fr); } .tm:has(.tm-side:not([hidden])) .tm-main { display: none; } .tm-side { border-left: 0; } .tm-tools { right: 8px; } .tm-faces { display: none; } .tm-cbar .muted { display: none; } }
/* get the app: header button, QR dialog, first-run welcome */
.wm-getapp { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; margin-right: 6px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg); font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
.wm-getapp:hover { background: var(--gray-100); } .wm-getapp .ic { width: 17px; height: 17px; }
.wm-getapp-dlg header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 20px; } .wm-getapp-dlg header span { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; } .wm-getapp-dlg header img { border-radius: 7px; }
.wm-ga-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 4px 20px 22px; align-items: start; }
.wm-getapp-dlg.welcome .wm-ga-body { grid-template-columns: minmax(0, 1.4fr) 200px minmax(0, 1fr); }
.wm-qr { width: 200px; height: 200px; display: grid; place-items: center; padding: 8px; border-radius: 14px; background: #fff; } .wm-qr svg { width: 100%; height: 100%; }
.wm-ga-qr { display: grid; gap: 8px; justify-items: center; text-align: center; }
.wm-ga-how { display: grid; gap: 12px; align-content: start; } .wm-ga-how h3 { font-size: 1rem; font-weight: 600; }
.wm-steps { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 0.875rem; line-height: 1.5; }
.wm-tour { display: grid; gap: 10px; } .wm-tour video { width: 100%; border-radius: 12px; background: #000; box-shadow: inset 0 0 0 1px var(--line); aspect-ratio: 16 / 10; object-fit: cover; } .wm-tour p { font-size: 0.875rem; color: var(--gray-900); }
@media (max-width: 900px) { .wm-getapp span { display: none; } .wm-getapp { padding: 0; width: 36px; justify-content: center; margin-right: 0; } .wm-ga-body, .wm-getapp-dlg.welcome .wm-ga-body { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
@media (display-mode: standalone) { .wm-getapp { display: none; } }
.wm-dlg.wide:has(.wm-getapp-dlg) { height: auto; }

/* ---------- phones: apps as a bottom tab bar, search as the header, a floating action button ---------- */
.wm-fab { display: none; }
.wm-pop-set { justify-self: start; height: 34px; }
@media (max-width: 760px) {
  #wm { grid-template-rows: 60px minmax(0, 1fr); }
  .webmail.imeli .wm-top { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 8px 10px 6px; }
  .wm-top > [data-act=menu] { position: absolute; z-index: 2; left: 14px; top: 14px; width: 34px; height: 34px; }
  .wm-brand, .wm-getapp, .wm-right > [data-act=theme-toggle], .wm-right > [data-act=settings] { display: none !important; }
  .wm-search { height: 46px; padding-left: 40px; border-radius: 999px; }
  .wm-search .wm-sic { display: none; }
  .wm-body { grid-template-columns: minmax(0, 1fr) !important; }
  .wm-main { margin: 0 0 64px !important; border-radius: 0; box-shadow: none; }
  .wm-rail { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: 64px; flex-direction: row; justify-content: space-around; align-items: center; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .wm-rail a { width: auto; flex: 1; gap: 2px; font-size: 0.6875rem; }
  .wm-rpill { width: 52px; height: 30px; }
  .wm-fab { display: inline-flex; position: fixed; z-index: 61; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .5); cursor: pointer; }
  .wm-fab .ic { width: 20px; height: 20px; stroke-width: 2.2; }
  .wm-nav { top: 60px !important; bottom: 64px !important; }
  /* lists and toolbars that fit a phone */
  .wm-bar { gap: 2px; padding: 0 6px; } .wm-bar-title { font-size: 1rem; margin: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wm-calmain .wm-bar .wm-pager, .wm-cloud .wm-bar .wm-pager > .wm-btn, .wm-cloud .wm-bar .wm-pager > label { display: none; }
  .wm-calmain .wm-bar > .wm-btn { height: 32px; padding: 0 12px; }
  .wm-wk span { padding: 6px 2px; text-align: center; font-size: 0.625rem; }
  .wm-day { padding: 2px 1px 4px; } .wm-dn { width: 22px; height: 22px; font-size: 0.6875rem; }
  .wm-ev { font-size: 0.625rem; padding: 1px 3px; } .wm-ev i { display: none; } .wm-ev::before { display: none; }
  .wm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .wm-tiles.folders { grid-template-columns: minmax(0, 1fr); }
  .wm-cbody2 { padding: 4px 12px 90px; }
  .wm-tabs button { justify-content: center; padding: 0 6px; } .wm-tabs button span { display: none; } .wm-tabs button[aria-selected="true"] span { display: inline; }
  .wm-list .wm-row { padding-right: 8px; }
  .tm-head { min-height: 52px; padding: 6px 12px; } .tm-compose { margin: 0 8px 8px; } .tm-msg { padding: 6px 12px 4px; grid-template-columns: 34px minmax(0, 1fr); } .tm-msg .wm-av { width: 32px; height: 32px; }
  .tm-list { padding-bottom: 4px; }
  .wm-people { grid-template-columns: minmax(0, 1fr); }
  .wm-dlg { width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; }
  .wm-toast { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* the FAB stays out of the way while writing */
@media (max-width: 760px) { #wm:has(.wm-compose:not(.min)) .wm-fab, #wm:has(.tm) .wm-fab { display: none; } }

/* ---------- Docnamic / Sheetnamic ---------- */
.of-home { overflow-y: auto; min-height: 0; height: 100%; }
.of-start { padding: 22px 28px 26px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.of-start h2, .of-recent h3 { font-size: 1rem; font-weight: 600; margin-bottom: 14px; }
.of-tpls { display: flex; gap: 18px; flex-wrap: wrap; }
.of-tpl { display: grid; gap: 8px; justify-items: start; padding: 0; border: 0; background: none; font: inherit; font-size: 0.875rem; color: var(--fg); cursor: pointer; text-align: left; }
.of-tpl > span { width: 150px; height: 190px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line-strong); display: grid; place-items: center; transition: box-shadow .15s; }
.of-tpl:hover > span { box-shadow: 0 0 0 2px var(--blue); }
.of-blank .ic { width: 52px; height: 52px; color: var(--blue); stroke-width: 1.4; }
.of-prev { align-content: start; justify-items: start; gap: 9px; padding: 22px 18px; }
.of-prev i { display: block; height: 7px; width: 100%; border-radius: 4px; background: #d9d9d9; } .of-prev i:first-child { width: 55%; height: 10px; background: #b4b4b4; } .of-prev i:nth-child(3) { width: 80%; }
.of-prev.grid { background: #fff linear-gradient(#d9d9d9 1px, transparent 1px) 0 0 / 100% 22px, linear-gradient(90deg, #d9d9d9 1px, transparent 1px) 0 0 / 37px 100%; background-blend-mode: normal; }
.of-recent { padding: 22px 28px 40px; }
.of-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.of-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); }
.of-item:hover { background: var(--gray-100); } .of-item > .ic { width: 26px; height: 26px; color: var(--blue); flex: none; } .of-item span { display: grid; min-width: 0; } .of-item b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .of-item small { font-size: 0.75rem; color: var(--gray-900); }

.dc, .sh { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; min-height: 0; }
.dc-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); } .dc-top img { border-radius: 7px; flex: none; }
.dc-title:not([type="checkbox"]) { width: auto; min-width: 120px; max-width: 420px; height: 36px; font-size: 1.0625rem; font-weight: 500; background: none; box-shadow: none; padding: 0 8px; }
.dc-title:hover, .dc-title:focus { box-shadow: inset 0 0 0 1px var(--line-strong) !important; }
.dc-stat { white-space: nowrap; } .dc-stat.err { color: var(--red); } .dc-sp { flex: 1; } .dc-top .wm-btn { height: 34px; }
.dc-tools, .sh-bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.dc-fmt { width: auto !important; height: 32px !important; font-size: 0.8125rem !important; margin-right: 4px; }
.dc-b { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--gray-900); cursor: pointer; } .dc-b:hover { background: var(--gray-200); color: var(--fg); } .dc-b.on { background: var(--blue-bg); color: var(--blue); } .dc-b .ic { width: 17px; height: 17px; }
.dc-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--line-strong); }
.dc-scroll { overflow: auto; min-height: 0; background: var(--bg-2); padding: 28px 16px 60px; }
.dc-page { max-width: 816px; min-height: 1056px; margin: 0 auto; padding: 72px 84px; background: #fff; color: #1b1b1b; box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .06); font-family: var(--font-sans); font-size: 11.5pt; line-height: 1.6; outline: none; color-scheme: light; }
.dc-page h1 { font-size: 26pt; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; } .dc-page h2 { font-size: 16pt; font-weight: 600; margin: 18px 0 8px; } .dc-page h3 { font-size: 13pt; font-weight: 600; margin: 14px 0 6px; }
.dc-page p { margin: 0 0 10px; } .dc-page ul, .dc-page ol { margin: 0 0 10px; padding-left: 26px; } .dc-page a { color: #2b63b8; text-decoration: underline; } .dc-page blockquote { margin: 0 0 10px; padding-left: 14px; border-left: 3px solid #c7c7c7; color: #555; }
.dc-foot { padding: 6px 14px; border-top: 1px solid var(--line); }
@media print { body.webmail * { visibility: hidden !important; } .dc-page, .dc-page * { visibility: visible !important; } .dc-page { position: absolute; inset: 0; margin: 0; box-shadow: none; padding: 0; max-width: none; min-height: 0; } }

.sh-ref { min-width: 72px; padding: 0 10px; font-size: 0.8125rem; color: var(--gray-900); }
.sh-fx { padding: 0 8px; font-style: italic; color: var(--gray-600); font-family: Georgia, serif; }
.sh-fin:not([type="checkbox"]) { flex: 1; height: 32px; font-size: 0.875rem; }
.sh-grid { position: relative; overflow: auto; min-height: 0; outline: none; background: var(--bg); }
.sh-grid table { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 0.8125rem; }
.sh-grid th { position: sticky; top: 0; z-index: 2; height: 26px; background: var(--gray-100); color: var(--gray-900); font-weight: 500; font-size: 0.75rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); }
.sh-grid tbody th { position: sticky; left: 0; z-index: 1; width: 46px; min-width: 46px; text-align: center; border-bottom: 1px solid var(--line); }
.sh-grid .sh-corner { left: 0; z-index: 3; width: 46px; }
.sh-grid td { height: 26px; padding: 0 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: cell; }
.sh-grid td.num { text-align: right; font-variant-numeric: tabular-nums; } .sh-grid td.b { font-weight: 700; } .sh-grid td.err { color: var(--red); }
.sh-grid td.sel { background: var(--blue-bg); } .sh-grid td.cur { box-shadow: inset 0 0 0 2px var(--blue); background: var(--bg); }
.sh-edit:not([type="checkbox"]) { position: absolute; z-index: 5; padding: 0 6px; border-radius: 0; font-size: 0.8125rem; box-shadow: inset 0 0 0 2px var(--blue), 0 4px 12px rgba(0, 0, 0, .3); background: var(--bg); }
.sh-foot { text-align: right; min-height: 28px; }
@media (max-width: 760px) { .dc-page { padding: 32px 22px; min-height: 0; } .dc-scroll { padding: 12px 8px 90px; } .dc-top .wm-btn { display: none; } .of-start, .of-recent { padding: 16px; } .of-tpl > span { width: 110px; height: 140px; } }
.sh-grid table { width: max-content; }
/* security settings: password, 2-step verification */
.wm-sec { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.wm-sec > div { display: grid; gap: 2px; } .wm-sec b { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; } .wm-sec small { font-size: 0.75rem; color: var(--gray-900); } .wm-sec .wm-btn { flex: none; height: 32px; }
.wm-chip.on { background: var(--green-bg); color: var(--green); }
.wm-2fa { display: flex; gap: 16px; align-items: center; } .wm-2fa .wm-qr { width: 170px; height: 170px; flex: none; }
.wm-key { display: block; margin-top: 4px; font-size: 0.9375rem; letter-spacing: 0.04em; word-break: break-all; }
.wm-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .wm-codes code { padding: 8px 10px; border-radius: 8px; background: var(--gray-100); text-align: center; font-size: 0.9375rem; letter-spacing: 0.05em; }
@media (max-width: 560px) { .wm-2fa { flex-direction: column; align-items: flex-start; } }
.wm-qrnote { color: var(--amber); }
/* Install: appears when the browser can install the app, opens its prompt */
.wm-install { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px; margin-right: 6px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.wm-install:hover { filter: brightness(1.08); } .wm-install .ic { width: 17px; height: 17px; stroke-width: 2; } .wm-install[hidden] { display: none !important; }
@media (max-width: 760px) { .wm-install { padding: 0; width: 38px; height: 38px; justify-content: center; margin-right: 4px; } .wm-install span { display: none; } .webmail.imeli .wm-top { grid-template-columns: minmax(0, 1fr) auto; } .wm-right { gap: 2px; } }
@media (display-mode: standalone) { .wm-install { display: none !important; } }
/* -namic names in running text and headings: prefix regular, "namic" bold, whatever the parent weight */
.wmk { font-weight: 400; } .wmk b { font-weight: 700; }
/* Softnamic app launcher */
.wm-apps { width: 300px; padding: 14px; border-radius: 20px; }
.wm-apps-head { padding: 2px 6px 10px; font-size: 1rem; }
.wm-apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.wm-apps-grid a { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 14px; color: var(--fg); text-decoration: none; font-size: 0.8125rem; }
.wm-apps-grid a:hover { background: var(--gray-100); }
.wm-apps-grid img { border-radius: 11px; }
.wm-apps .wm-apps-grid a { height: auto; min-height: 0; flex-direction: column; text-align: center; white-space: nowrap; }
.wm-apps { width: 320px; max-height: calc(100dvh - 80px); overflow-y: auto; }
.wm-apps-head { display: flex; align-items: baseline; justify-content: space-between; }
.wm-apps-sub { margin: 8px 6px 2px; }
.wm-apps .wm-apps-grid button { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border: 0; border-radius: 14px; background: none; color: var(--fg); font: inherit; font-size: 0.8125rem; cursor: pointer; height: auto; white-space: nowrap; }
.wm-apps .wm-apps-grid button:hover { background: var(--gray-100); }
.wm-apps .soon img { opacity: 0.55; }
.wm-apps .soon i { position: absolute; top: 6px; right: 8px; padding: 1px 6px; border-radius: 999px; background: var(--gray-200, #333); color: var(--gray-900); font-style: normal; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; }
/* ---------- Teamnamic call screen ---------- */
.kc { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto 1fr auto; background: #0b0b0c; color: #ededed; overflow: hidden; }
.kc-top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.kc-top div { display: grid; line-height: 1.25; } .kc-top small { color: #a1a1a1; font-variant-numeric: tabular-nums; }
.kc-tag { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: rgba(146, 206, 49, 0.1); border: 1px solid rgba(146, 206, 49, 0.3); color: #c6e79a; font-size: 0.75rem; }
.kc-stage { min-height: 0; display: flex; gap: 12px; padding: 0 16px; }
.kc-grid { flex: 1; min-width: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); grid-auto-rows: 1fr; align-content: stretch; }
.kc-grid.strip { flex: 0 0 220px; grid-template-columns: 1fr; grid-auto-rows: 132px; overflow-y: auto; align-content: start; }
.kc-tile { position: relative; min-height: 0; border-radius: 18px; background: #18181b; display: grid; place-items: center; overflow: hidden; outline: 3px solid transparent; outline-offset: -3px; transition: outline-color 0.15s; }
.kc-tile.talk { outline-color: #92ce31; }
.kc-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: 0; }
.kc-tile.cam video { opacity: 1; } .kc-tile.cam .kc-av { opacity: 0; }
.kc-av .wm-av { width: 88px; height: 88px; font-size: 2rem; box-shadow: 0 0 0 0 rgba(146, 206, 49, 0.4); }
.kc-tile.talk .kc-av .wm-av { animation: kc-pulse 1.2s ease-out infinite; }
@keyframes kc-pulse { 0% { box-shadow: 0 0 0 0 rgba(146, 206, 49, 0.45); } 100% { box-shadow: 0 0 0 22px rgba(146, 206, 49, 0); } }
.kc-name { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); font-size: 0.8125rem; }
.kc-name .ic { width: 15px; height: 15px; color: #ff6b6b; }
.kc-hand { position: absolute; top: 10px; right: 12px; font-size: 1.5rem; font-style: normal; animation: kc-wave 1s ease-in-out infinite alternate; }
@keyframes kc-wave { to { transform: rotate(14deg); } }
.kc-screen { flex: 1; min-width: 0; position: relative; border-radius: 18px; background: #000; overflow: hidden; }
.kc-screen video { width: 100%; height: 100%; object-fit: contain; }
.kc-side { flex: 0 0 300px; display: grid; grid-template-rows: auto 1fr auto; border-radius: 18px; background: #18181b; overflow: hidden; }
.kc-side header { display: grid; padding: 14px 16px; border-bottom: 1px solid #27272a; }
.kc-people { overflow-y: auto; padding: 8px; } .kc-people div { display: flex; align-items: center; gap: 10px; padding: 8px; } .kc-people span { flex: 1; } .kc-people .ic { width: 16px; height: 16px; color: #ff6b6b; }
.kc-chat { overflow-y: auto; padding: 12px 16px; display: grid; align-content: start; gap: 10px; } .kc-chat p { margin: 0; display: grid; font-size: 0.875rem; }
.kc-send { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #27272a; } .kc-send input { flex: 1; min-width: 0; padding: 0 12px; height: 38px; border-radius: 999px; border: 1px solid #333; background: #0b0b0c; color: inherit; font: inherit; }
.kc-bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; flex-wrap: wrap; }
.kc-bar button { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 999px; background: #27272a; color: #ededed; font-size: 1.25rem; cursor: pointer; }
.kc-bar button:hover { background: #333338; } .kc-bar button.lit { background: #3170ce; }
.kc-bar [data-kc=mic]:not(.on), .kc-bar [data-kc=cam]:not(.on) { background: #3a1d1d; color: #ff8a8a; }
.kc-bar .ic { width: 22px; height: 22px; }
.kc-emo { display: inline-flex; gap: 2px; padding: 0 6px; border-radius: 999px; background: #18181b; } .kc-emo button { width: 40px; height: 40px; background: none; font-size: 1.25rem; } .kc-emo button:hover { background: #27272a; transform: scale(1.15); }
.kc-bar .leave { width: auto; padding: 0 20px; display: inline-flex; gap: 8px; background: #d93a3a; color: #fff; font: inherit; font-weight: 600; } .kc-bar .leave:hover { background: #e54848; }
.kc-fly { position: absolute; inset: 0; pointer-events: none; }
.kc-r { position: absolute; bottom: 90px; display: grid; justify-items: center; font-size: 2.25rem; animation: kc-up 2.6s ease-out forwards; } .kc-r small { font-size: 0.6875rem; padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; }
@keyframes kc-up { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 12% { transform: translateY(-30px) scale(1.1); opacity: 1; } 100% { transform: translateY(-58vh) scale(1); opacity: 0; } }
.tm-roomacts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 760px) {
  .kc-tag { display: none; } .kc-stage { padding: 0 8px; flex-direction: column; } .kc-grid { grid-template-columns: repeat(2, 1fr); }
  .kc-grid.strip { flex: 0 0 110px; grid-auto-flow: column; grid-auto-columns: 140px; grid-template-columns: none; grid-auto-rows: 100%; overflow-x: auto; }
  .kc-side { position: absolute; inset: 60px 8px 86px; z-index: 2; } .kc-av .wm-av { width: 60px; height: 60px; font-size: 1.4rem; }
  .kc-bar { gap: 6px; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); } .kc-bar button { width: 44px; height: 44px; } .kc-emo { display: none; } .kc-bar .leave span { display: none; } .kc-bar .leave { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .kc-r, .kc-hand, .kc-tile.talk .kc-av .wm-av { animation: none; } }
/* ---------- Teamnamic GIFs ---------- */
.tm-gifbtn { height: 30px; padding: 0 10px; border: 1.5px solid var(--gray-400, #555); border-radius: 8px; background: none; color: var(--fg); font: inherit; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; }
.tm-gifbtn:hover { border-color: var(--accent); color: var(--accent); }
.tm-gifs { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; height: min(460px, calc(100dvh - 120px)); padding: 10px; }
.tm-gifhead { display: grid; gap: 8px; }
.tm-giftabs { display: flex; gap: 4px; } .tm-giftabs button { flex: 1; height: 30px; border: 0; border-radius: 8px; background: var(--gray-100); color: var(--fg); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; } .tm-giftabs button.on { background: var(--accent); color: var(--accent-ink, #fff); }
.tm-gifhead input { height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border, #333); background: var(--bg-2, transparent); color: var(--fg); font: inherit; }
.tm-gifpicks { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .tm-gifpicks::-webkit-scrollbar { display: none; }
.tm-gifpicks button { flex: none; height: 28px; padding: 0 12px; border: 1px solid var(--border, #333); border-radius: 999px; background: none; color: var(--fg); font: inherit; font-size: 0.75rem; cursor: pointer; } .tm-gifpicks button:hover { border-color: var(--accent); }
.tm-gifgrid { min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; gap: 6px; align-items: start; }
.tm-gifcol { flex: 1; min-width: 0; }
.tm-gifgrid button { display: block; width: 100%; margin: 0 0 6px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--gray-100); cursor: pointer; break-inside: avoid; }
.tm-gifgrid button:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.tm-gifgrid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-gifmsg { flex: 1; padding: 24px 8px; text-align: center; }
.tm-gifby { margin: 0; text-align: right; font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-700, #888); }
.tm-gif { position: relative; display: inline-block; margin-top: 4px; max-width: min(320px, 100%); border-radius: 12px; overflow: hidden; line-height: 0; }
.tm-gif img { display: block; max-width: 100%; height: auto; max-height: 300px; width: auto; }
.tm-gif span { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; }
.auth-brand .auth-apps { display: flex; flex-direction: row; gap: 10px; justify-content: center; margin-top: 10px; }
.auth-brand .auth-apps img { width: 30px; height: 30px; flex: none; border-radius: 8px; }
/* the demo sign-in's loading button */
.btn.is-loading { display: inline-flex; align-items: center; justify-content: center; gap: 10px; opacity: 1; cursor: progress; }
.auth-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: auth-spin 0.7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-spin { animation-duration: 2s; } }
/* All apps */
.wm-ctxh { margin: 14px 12px 4px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-700, #888); }
.wm-ctx img { border-radius: 5px; flex: none; } .wm-ctx img.soon { opacity: 0.55; }
.ap-all { height: 100%; overflow-y: auto; padding: 28px clamp(16px, 4vw, 40px) 40px; }
.ap-all header { margin-bottom: 8px; } .ap-all h1 { margin: 0 0 4px; font-size: 1.75rem; font-weight: 400; letter-spacing: -0.02em; } .ap-all h1 b { font-weight: 700; }
.ap-all h2 { margin: 26px 0 12px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-700, #888); }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.ap-tile { position: relative; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px; padding: 16px; border-radius: 16px; border: 1px solid var(--border, #2a2a2a); background: var(--bg-2, transparent); color: var(--fg); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.ap-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.ap-tile img { grid-row: span 2; border-radius: 14px; } .ap-tile b { font-weight: 400; font-size: 1rem; } .ap-tile b b { font-weight: 700; } .ap-tile small { font-size: 0.8125rem; line-height: 1.4; color: var(--gray-800, #999); }
.ap-tile.soon img { opacity: 0.6; } .ap-tile i { position: absolute; top: 10px; right: 12px; padding: 1px 8px; border-radius: 999px; background: var(--gray-100); color: var(--gray-800, #999); font-style: normal; font-size: 0.6875rem; font-weight: 600; }
.ap-page { height: 100%; overflow-y: auto; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 32px 20px; text-align: center; }
.ap-page h1 { margin: 6px 0 0; font-size: 2.25rem; font-weight: 400; letter-spacing: -0.03em; } .ap-page h1 b { font-weight: 700; }
.ap-soon { padding: 3px 12px; border-radius: 999px; background: rgba(146, 206, 49, 0.12); color: #92ce31; font-size: 0.75rem; font-weight: 600; }
.ap-lead { max-width: 46ch; margin: 0; color: var(--gray-800, #aaa); font-size: 1.0625rem; line-height: 1.5; }
.ap-list { display: grid; gap: 8px; margin: 10px 0 6px; padding: 0; list-style: none; text-align: left; } .ap-list li { display: flex; gap: 10px; } .ap-list li::before { content: '✓'; color: #92ce31; font-weight: 700; }
@media (max-width: 760px) { .wm-rail a[data-app=docs], .wm-rail a[data-app=sheets] { display: none; } }
/* ---------- Plannamic ---------- */
.pn { height: 100%; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.pn-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px 12px; }
.pn-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pn-title h1 { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; outline: none; border-radius: 6px; padding: 0 4px; }
.pn-title h1:focus { box-shadow: 0 0 0 2px var(--accent); }
.pn-title small { color: var(--gray-700, #888); }
.pn-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.pn-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pn-filters input, .pn-filters select { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.8125rem; }
.pn-filters input { width: 180px; }
.pn-chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.pn-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); } .pn-chip b { margin-left: 4px; font-weight: 700; }
.pn-faces { display: flex; } .pn-faces .wm-av { width: 28px; height: 28px; font-size: 0.75rem; margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); }
.pn-board { min-height: 0; display: flex; align-items: flex-start; gap: 12px; padding: 4px 20px 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
.pn-col { flex: 0 0 290px; max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 16px; background: var(--gray-100, rgba(255, 255, 255, 0.04)); scroll-snap-align: start; transition: box-shadow 0.15s; }
.pn-col.over { box-shadow: inset 0 0 0 2px var(--accent); }
.pn-col > header { display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px 14px; }
.pn-col h3 { margin: 0; flex: 1; font-size: 0.875rem; font-weight: 600; outline: none; border-radius: 5px; padding: 1px 4px; }
.pn-col h3:focus { box-shadow: 0 0 0 2px var(--accent); }
.pn-count { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--bg); color: var(--gray-700, #888); font-size: 0.75rem; text-align: center; }
.pn-ib { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--gray-700, #888); font: inherit; cursor: pointer; } .pn-ib:hover { background: var(--bg); color: var(--fg); }
.pn-list { min-height: 12px; overflow-y: auto; padding: 2px 8px; display: grid; gap: 8px; align-content: start; }
.pn-card { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.pn-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.pn-card:focus-visible { outline: 2px solid var(--accent); }
.pn-card.dragging { opacity: 0.4; transform: rotate(2deg); }
.pn-card.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.pn-card.done h4 { color: var(--gray-700, #888); text-decoration: line-through; }
.pn-card h4 { margin: 0; font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
.pn-labels { display: flex; flex-wrap: wrap; gap: 4px; } .pn-labels i { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); font-style: normal; font-size: 0.6875rem; font-weight: 600; }
.pn-card footer { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--gray-700, #888); }
.pn-sp { flex: 1; }
.pn-prio { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-weight: 800; font-size: 0.6875rem; background: var(--gray-100); }
.pn-prio.p-urgent { background: #e5484d; color: #fff; } .pn-prio.p-high { color: #ff7a1f; } .pn-prio.p-medium { color: #f5a524; } .pn-prio.p-low { color: #7c8a96; }
.pn-due.soon { color: #f5a524; font-weight: 600; } .pn-due.late { color: #e5484d; font-weight: 600; }
.pn-av { width: 24px !important; height: 24px !important; font-size: 0.6875rem !important; }
.pn-noone { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed var(--line); font-size: 0.6875rem; }
.pn-add { padding: 6px 8px 10px; } .pn-add input { width: 100%; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px dashed transparent; background: none; color: var(--fg); font: inherit; font-size: 0.8125rem; } .pn-add input:hover { background: var(--bg); } .pn-add input:focus { border-color: var(--accent); background: var(--bg); outline: none; }
.pn-newcol { flex: 0 0 200px; height: 46px; border-radius: 14px; border: 1.5px dashed var(--line); background: none; color: var(--gray-700, #888); font: inherit; font-size: 0.875rem; cursor: pointer; } .pn-newcol:hover { color: var(--fg); border-color: var(--accent); }
.pn-navc { margin-left: auto; font-weight: 500; font-size: 0.75rem; color: var(--gray-700, #888); } .pn-plus { width: 20px; text-align: center; font-size: 1.125rem; }
/* card panel */
.pn-dlg { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--fg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.pn-dlg::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); }
.pn-panel { display: grid; gap: 10px; padding: 18px 22px 20px; }
.pn-panel > header { display: flex; align-items: center; justify-content: space-between; }
.pn-crumb { display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; font-size: 0.8125rem; color: var(--gray-700, #888); }
.pn-crumb select { height: 28px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.8125rem; }
.pn-ttl { width: 100%; resize: none; overflow: hidden; border: 0; background: none; color: var(--fg); font-family: inherit; font-weight: 600; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.02em; outline: none; padding: 2px 0; }
.pn-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pn-props label { display: grid; gap: 4px; font-size: 0.75rem; color: var(--gray-700, #888); }
.pn-props select, .pn-props input { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.8125rem; }
.pn-lbls { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-lbl { padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: none; color: var(--c); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; opacity: 0.55; } .pn-lbl.on { background: color-mix(in srgb, var(--c) 20%, transparent); opacity: 1; }
.pn-panel h5 { margin: 8px 0 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-700, #888); } .pn-panel h5 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.pn-desc { width: 100%; resize: vertical; min-height: 80px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.875rem; }
.pn-bar { height: 6px; border-radius: 999px; background: var(--gray-100); overflow: hidden; } .pn-bar i { display: block; height: 100%; background: #92ce31; border-radius: inherit; transition: width 0.3s; }
.pn-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pn-check li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; } .pn-check li:hover { background: var(--gray-100); }
.pn-check label { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 0.875rem; cursor: pointer; } .pn-check input { width: 16px; height: 16px; accent-color: #92ce31; }
.pn-check li.done span { color: var(--gray-700, #888); text-decoration: line-through; }
.pn-panel form input { width: 100%; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.875rem; }
.pn-cform { display: flex; gap: 8px; } .pn-cform button { height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink, #fff); font: inherit; font-weight: 600; cursor: pointer; }
.pn-comments { display: grid; gap: 10px; } .pn-cm { display: flex; gap: 10px; } .pn-cm p { margin: 2px 0 0; font-size: 0.875rem; } .pn-cm small, .pn-none { color: var(--gray-700, #888); font-size: 0.75rem; }
.pn-panel > footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--gray-700, #888); }
.pn-del { border: 0; background: none; color: #e5484d; font: inherit; font-size: 0.8125rem; cursor: pointer; } .pn-del:hover { text-decoration: underline; }
.pn-ask { width: min(380px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--fg); }
.pn-ask::backdrop { background: rgba(0, 0, 0, 0.5); } .pn-ask h3 { margin: 0 0 12px; font-size: 1.0625rem; font-weight: 600; }
.pn-ask input { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; }
.pn-ask footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.pn-ask button { height: 36px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--fg); font: inherit; cursor: pointer; } .pn-ask button[value=ok] { border: 0; background: var(--accent); color: var(--accent-ink, #fff); font-weight: 600; } .pn-ask button.danger { background: #e5484d; color: #fff; }
@media (max-width: 760px) { .pn-top { padding: 12px 14px 8px; } .pn-filters input { width: 130px; } .pn-faces { display: none; } .pn-board { padding: 4px 14px 14px; } .pn-col { flex-basis: 84vw; } .pn-props { grid-template-columns: 1fr 1fr; } }
.pn .pn-filters > * { flex: none; width: auto; margin: 0; }
.pn .pn-filters input[type=search] { width: 190px; }
.pn .pn-filters select { padding-right: 30px; }

.pn-dlg .pn-crumb select { width: auto; }
/* ---------- Statnamic ---------- */
.st { height: 100%; overflow-y: auto; padding: 16px 20px 28px; display: grid; gap: 14px; align-content: start; }
.st-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.st-site { display: flex; align-items: center; gap: 14px; }
.st .st-site select { width: auto; height: 38px; padding: 0 32px 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-weight: 600; }
.st-live { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--gray-700, #888); }
.st-live i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.6); animation: st-pulse 1.8s infinite; }
@keyframes st-pulse { to { box-shadow: 0 0 0 10px rgba(61, 220, 151, 0); } }
.st-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.st-range { display: flex; padding: 3px; border-radius: 999px; background: var(--gray-100); } .st-range button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--fg); font: inherit; font-size: 0.8125rem; cursor: pointer; } .st-range button.on { background: var(--bg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); font-weight: 600; }
.st-btn { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: 0.8125rem; cursor: pointer; } .st-btn:hover { border-color: var(--accent); }
.st-pick { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--accent); font-size: 0.875rem; } .st-pick p { flex-basis: 100%; margin: 0 0 4px; color: var(--gray-700, #888); } .st-pick label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .st-pick input { accent-color: #92ce31; }
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.st-kpi { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--gray-100); display: grid; gap: 2px; }
.st-kpi small { color: var(--gray-700, #888); font-size: 0.75rem; } .st-kpi b { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; }
.st-d { font-size: 0.75rem; font-weight: 600; } .st-d.up { color: #3ddc97; } .st-d.down { color: #ff6b6b; }
.st-card { position: relative; padding: 14px 16px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); min-width: 0; }
.st-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .st-card h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; } .st-card header small { color: var(--gray-700, #888); }
.st-legend { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--gray-700, #888); } .st-legend i { width: 14px; height: 3px; border-radius: 2px; margin-left: 8px; } .st-legend .l1 { background: #92ce31; } .st-legend .l2 { background: #3170ce; }
.st-chart { width: 100%; height: 240px; display: block; } .st-grid { stroke: var(--line); } .st-ax { fill: var(--gray-700, #888); font-size: 11px; }
.st-l1 { fill: none; stroke: #92ce31; stroke-width: 2.5; vector-effect: non-scaling-stroke; } .st-l2 { fill: none; stroke: #3170ce; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.st-hair { stroke: var(--gray-700, #888); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; } .st-dot { fill: #92ce31; stroke: var(--bg); stroke-width: 2; }
.st-tip { position: absolute; display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--fg); color: var(--bg); font-size: 0.75rem; pointer-events: none; transform: translateY(-100%); white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.st-grid2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-row { position: relative; display: grid; grid-template-columns: 1fr auto 40px; align-items: center; gap: 10px; padding: 6px 10px; font-size: 0.8125rem; border-radius: 8px; overflow: hidden; }
.st-bar { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 8px; background: color-mix(in srgb, #92ce31 16%, transparent); }
.st-row > :not(.st-bar) { position: relative; } .st-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-row small { color: var(--gray-700, #888); text-align: right; }
.st-empty { color: var(--gray-700, #888); font-size: 0.875rem; }
.st-donut { display: flex; align-items: center; gap: 18px; } .st-dn { fill: var(--fg); font-size: 22px; font-weight: 600; }
.st-donut ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.8125rem; } .st-donut li { display: flex; align-items: center; gap: 8px; } .st-donut li i { width: 10px; height: 10px; border-radius: 3px; } .st-donut li b { margin-left: 8px; }
.st-hbars { height: 110px; display: flex; align-items: flex-end; gap: 3px; } .st-hbars span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(#92ce31, #3170ce); opacity: 0.85; } .st-hbars span:hover { opacity: 1; }
.st-hax { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.6875rem; color: var(--gray-700, #888); }
.st-ai ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 0.875rem; line-height: 1.5; } .st-ai b { color: #92ce31; font-weight: 600; }
.st-navdot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; margin: 0 6px; }
.st-code pre { padding: 12px; border-radius: 10px; background: var(--gray-100); font-size: 0.75rem; white-space: pre-wrap; word-break: break-all; } .st-code p { font-size: 0.875rem; color: var(--gray-700, #888); } .st-code code { font-size: 0.8125rem; }
.st-addsite { display: flex; gap: 8px; } .st-addsite input { flex: 1; }
@media (max-width: 1100px) { .st-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .st { padding: 12px 14px 90px; } .st-grid2 { grid-template-columns: 1fr; } .st-chart { height: 180px; } }
/* ---------- Shopnamic ---------- */
.sh2 { height: 100%; overflow-y: auto; padding: 16px 20px 28px; display: grid; gap: 14px; align-content: start; }
.sh2-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sh2-top h1 { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.sh2-btn { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #fff); font: inherit; font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.sh2-ghost { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); font-size: 0.8125rem; text-decoration: none; cursor: pointer; } .sh2-ghost:hover { border-color: var(--accent); }
.sh2-link { border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.8125rem; cursor: pointer; padding: 0; } .sh2-link.danger { color: #e5484d; }
.sh2-muted { color: var(--gray-700, #888); font-size: 0.875rem; }
.sh2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.sh2-kpis > * { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--gray-100); color: var(--fg); text-decoration: none; }
.sh2-kpis small { color: var(--gray-700, #888); font-size: 0.75rem; } .sh2-kpis b { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; } .sh2-kpis span { font-size: 0.75rem; color: var(--gray-700, #888); }
.sh2-kpis a:hover { border-color: var(--accent); } .sh2-kpis .warn { border-color: rgba(245, 165, 36, 0.5); } .sh2-kpis .warn b { color: #f5a524; }
.sh2-two { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.sh2-card { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); min-width: 0; overflow-x: auto; }
.sh2-card > header { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 8px; } .sh2-card h3 { margin: 0; font-size: 0.9375rem; font-weight: 600; } .sh2-card header a { font-size: 0.8125rem; color: var(--accent); text-decoration: none; }
.sh2-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.sh2-table th { text-align: left; padding: 8px 10px; color: var(--gray-700, #888); font-weight: 500; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sh2-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .sh2-table tbody tr { cursor: pointer; } .sh2-table tbody tr:hover { background: var(--gray-100); }
.sh2-table td small { display: block; color: var(--gray-700, #888); font-size: 0.75rem; } .sh2-table s { display: block; color: var(--gray-700, #888); font-size: 0.75rem; }
.sh2-table td.lo, .sh2-low .lo { color: #f5a524; font-weight: 600; } .sh2-table td.out, .sh2-low .out { color: #e5484d; font-weight: 600; }
.sh2-st { display: inline-block; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.sh2-img { flex: none; display: inline-grid; place-items: center; border-radius: 10px; object-fit: cover; background: color-mix(in srgb, var(--c, #57534e) 30%, var(--bg)); }
.sh2-pn { display: flex; align-items: center; gap: 12px; } .sh2-pn > span { display: grid; }
.sh2-low { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 0.875rem; cursor: pointer; } .sh2-low > span:not(.sh2-img) { flex: 1; } .sh2-low b { font-size: 0.8125rem; }
.sh2-store-cta { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(120deg, rgba(146, 206, 49, 0.14), rgba(49, 112, 206, 0.14)); color: var(--fg); text-decoration: none; } .sh2-store-cta span { font-size: 1.5rem; } .sh2-store-cta div { display: grid; } .sh2-store-cta small { color: var(--gray-700, #888); }
.sh2-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .sh2-tabs button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: 0.8125rem; cursor: pointer; } .sh2-tabs button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); } .sh2-tabs b { margin-left: 4px; opacity: 0.7; }
.sh2-ni { width: 20px; text-align: center; font-size: 0.9375rem; }
.sh2-settings form { display: grid; gap: 12px; max-width: 560px; padding: 6px 4px; }
.sh2-dlg { width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--fg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.sh2-dlg::backdrop { background: rgba(0, 0, 0, 0.5); }
.sh2-panel { display: grid; gap: 12px; padding: 18px 22px 20px; }
.sh2-panel > header { display: flex; align-items: center; gap: 10px; } .sh2-panel > header h3 { margin: 0; flex: 1; font-size: 1.125rem; font-weight: 600; }
.sh2-panel label, .sh2-settings label { display: grid; gap: 4px; font-size: 0.75rem; color: var(--gray-700, #888); }
.sh2-panel input:not([type=color]):not([type=checkbox]), .sh2-panel select, .sh2-panel textarea, .sh2-settings input:not([type=color]) { width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.875rem; }
.sh2-panel textarea { height: auto; padding: 10px 12px; resize: vertical; }
.sh2-panel input[type=color], .sh2-settings input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; vertical-align: middle; }
.sh2-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sh2-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sh2-photo { display: flex; align-items: center; gap: 16px; } .sh2-photo .sh2-muted { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; } .sh2-panel .sh2-emo { width: 52px !important; text-align: center; font-size: 1.125rem !important; }
.sh2-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.sh2-panel footer select { width: auto !important; }
.sh2-lines { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--gray-100); }
.sh2-lines > div { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; } .sh2-lines span { flex: 1; } .sh2-lines small { color: var(--gray-700, #888); }
.sh2-lines .sum { padding-top: 6px; border-top: 1px solid var(--line); color: var(--gray-700, #888); } .sh2-lines .total { color: var(--fg); font-size: 1rem; }
.sh2-panel h5 { margin: 4px 0 0; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-700, #888); } .sh2-panel p { margin: 0; font-size: 0.875rem; }
.sh2-note { padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--accent); background: var(--gray-100); font-style: italic; }
/* storefront preview */
.sf { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fffaf3; color: #1c1917; }
.sf-bar { padding: 8px 16px; background: #1c1917; color: #fafaf9; font-size: 0.75rem; text-align: center; }
.sf-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; background: color-mix(in srgb, var(--sc) 16%, #fffaf3); }
.sf-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; } .sf-head p { margin: 2px 0 0; color: #57534e; font-size: 0.875rem; }
.sf-cartbtn { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #1c1917; color: #fff; font: inherit; font-weight: 600; cursor: pointer; } .sf-cartbtn b { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--sc); color: #1c1917; }
.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 20px 24px; }
.sf-p { display: grid; gap: 6px; align-content: start; } .sf-p img, .sf-ph { width: 100%; aspect-ratio: 1; border-radius: 14px; object-fit: cover; } .sf-ph { display: grid; place-items: center; font-size: 3.5rem; background: color-mix(in srgb, var(--c) 28%, #fffaf3); }
.sf-p h4 { margin: 4px 0 0; font-size: 0.9375rem; } .sf-p p { margin: 0; font-size: 0.8125rem; color: #57534e; line-height: 1.4; }
.sf-price { display: flex; align-items: baseline; gap: 8px; } .sf-price s { color: #a8a29e; font-size: 0.8125rem; }
.sf-p button { height: 36px; border: 0; border-radius: 999px; background: var(--sc); color: #1c1917; font: inherit; font-weight: 600; font-size: 0.8125rem; cursor: pointer; } .sf-p button:disabled { background: #e7e5e4; color: #a8a29e; cursor: default; }
.sf-foot { margin: 0; padding: 14px 24px 18px; color: #78716c; font-size: 0.75rem; border-top: 1px solid #e7e5e4; }
.sf-cart .sh2-btn { background: var(--sc); color: #1c1917; }
@media (max-width: 900px) { .sh2-two { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .sh2 { padding: 12px 14px 90px; } .sh2-3 { grid-template-columns: 1fr 1fr; } .sf-grid { grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px; } .sf-head { padding: 16px; } }
/* ---------- Studionamic ---------- */
.sd { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; }
.sd-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.sd-name { display: flex; align-items: center; gap: 10px; min-width: 0; } .sd-name b { font-size: 1.0625rem; font-weight: 600; outline: none; border-radius: 6px; padding: 1px 4px; } .sd-name b:focus { box-shadow: 0 0 0 2px var(--accent); }
.sd-live { color: #3ddc97; font-size: 0.8125rem; text-decoration: none; white-space: nowrap; } .sd-live:hover { text-decoration: underline; }
.sd-draft { padding: 1px 10px; border-radius: 999px; background: var(--gray-100); color: var(--gray-700, #888); font-size: 0.75rem; }
.sd-saved { color: #3ddc97; font-size: 0.75rem; }
.sd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sd-dev { display: flex; padding: 3px; border-radius: 999px; background: var(--gray-100); } .sd-dev button { width: 36px; height: 30px; border: 0; border-radius: 999px; background: none; cursor: pointer; } .sd-dev button.on { background: var(--bg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
.sd-btn { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: 0.8125rem; cursor: pointer; } .sd-btn:hover { border-color: var(--accent); } .sd-btn.hot { border: 0; background: var(--accent); color: var(--accent-ink, #fff); font-weight: 600; }
.sd-theme { display: flex; flex-wrap: wrap; gap: 14px 28px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--gray-100); }
.sd-theme > div { display: grid; gap: 6px; } .sd-theme small { color: var(--gray-700, #888); font-size: 0.75rem; } .sd-theme span { display: flex; align-items: center; gap: 6px; }
.sd-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .sd-sw.on { border-color: var(--fg); box-shadow: 0 0 0 2px var(--bg) inset; }
.sd-theme input[type=color] { width: 30px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; }
.sd-chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.8125rem; cursor: pointer; } .sd-chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.sw-frame { min-height: 0; overflow-y: auto; padding: 18px; background: repeating-linear-gradient(45deg, var(--gray-100) 0 10px, transparent 10px 20px); }
.sw-page { margin: 0 auto; max-width: 1200px; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); transition: max-width 0.3s; }
.sw-frame.phone .sw-page { max-width: 390px; border-radius: 30px; border: 8px solid #111; }
.sw-frame.phone .sw-s { padding: 48px 18px; }
.sw [contenteditable="true"] { outline: none; border-radius: 4px; transition: box-shadow 0.15s; cursor: text; }
.sw [contenteditable="true"]:hover { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sc) 60%, transparent); }
.sw [contenteditable="true"]:focus { box-shadow: 0 0 0 2px var(--sc); background: color-mix(in srgb, var(--sc) 8%, transparent); }
.sw [data-sec] { position: relative; }
.sw [data-sec]:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sc) 40%, transparent); }
.sd-tools { position: absolute; top: 10px; right: 10px; z-index: 2; display: none; align-items: center; gap: 4px; padding: 4px; border-radius: 10px; background: #111; color: #fff; font: 500 12px Inter, system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.sw [data-sec]:hover > .sd-tools, .sd-tools:focus-within { display: flex; }
.sd-tools span { padding: 0 8px; color: #a8a29e; } .sd-tools button { height: 26px; padding: 0 8px; border: 0; border-radius: 6px; background: #262626; color: #fff; font: inherit; cursor: pointer; } .sd-tools button:hover { background: #404040; }
.sd-hint { margin: 0; padding: 8px 18px; color: var(--gray-700, #888); font-size: 0.75rem; border-top: 1px solid var(--line); }
.sd-dot { width: 8px; height: 8px; border-radius: 50%; margin: 0 6px; background: var(--gray-700, #888); } .sd-dot.on { background: #3ddc97; }
.sd-ask .sd-types { display: grid; gap: 6px; margin-top: 4px; } .sd-ask .sd-types label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font-size: 0.875rem; } .sd-ask .sd-types label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sd-ask .sd-l { display: grid; gap: 4px; margin-bottom: 10px; font-size: 0.75rem; color: var(--gray-700, #888); }
@media (max-width: 760px) { .sd-top { padding: 10px 12px; } .sw-frame { padding: 8px; } .sd-tools { top: 4px; right: 4px; } .sd-tools span { display: none; } }
/* ---------- Socialnamic ---------- */
.so { height: 100%; overflow-y: auto; padding: 16px 20px 28px; display: grid; gap: 14px; align-content: start; }
.so-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .so-top h1 { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; } .so-top > div { display: flex; gap: 8px; }
.so-btn { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #fff); font: inherit; font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.so-ghost { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: 0.8125rem; cursor: pointer; } .so-ghost:hover { border-color: var(--accent); }
.so-muted { color: var(--gray-700, #888); font-size: 0.875rem; margin: 0; } .so-note { margin-top: 4px; }
.so-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.so-kpis > div { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--gray-100); } .so-kpis small, .so-kpis span { color: var(--gray-700, #888); font-size: 0.75rem; } .so-kpis b { font-size: 1.5rem; font-weight: 600; } .so-kpis b.sm { font-size: 1rem; }
.so-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.so-card { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); min-width: 0; }
.so-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 2px 8px; } .so-card h3 { margin: 0; font-size: 0.9375rem; font-weight: 600; } .so-card header a { color: var(--accent); font-size: 0.8125rem; text-decoration: none; }
.so-card > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.so-post { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer; } .so-post:hover { background: var(--gray-100); border-radius: 10px; }
.so-pt { flex: 1; min-width: 0; } .so-pt p { margin: 0; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .so-pt small { display: flex; align-items: center; gap: 4px; color: var(--gray-700, #888); font-size: 0.75rem; margin-top: 2px; }
.so-ps { display: flex; gap: 10px; font-size: 0.75rem; color: var(--gray-700, #888); white-space: nowrap; } .so-sched { font-size: 1.125rem; }
.so-media { flex: none; display: inline-grid; place-items: center; border-radius: 10px; object-fit: cover; background: color-mix(in srgb, var(--c, #3170ce) 30%, var(--bg)); }
.so-net { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: var(--c); color: #fff; font-size: 0.5625rem; font-weight: 800; font-style: normal; }
.so-bar { height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden; } .so-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #92ce31, #3170ce); }
.so-camp-b p { margin: 8px 0; font-size: 0.8125rem; color: var(--gray-700, #888); }
.so-res { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.8125rem; color: var(--gray-700, #888); } .so-res b { color: var(--fg); font-size: 1rem; } .so-res.big { padding: 12px 14px; border-radius: 12px; background: var(--gray-100); }
.so-camps { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.so-st { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.so-calbar { display: flex; align-items: center; gap: 10px; } .so-calbar button { height: 32px; min-width: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--fg); font: inherit; cursor: pointer; }
.so-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.so-day { min-height: 220px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--gray-100); }
.so-day.today { border-color: var(--accent); } .so-day header { display: flex; align-items: baseline; gap: 6px; } .so-day header small { color: var(--gray-700, #888); } .so-day header b { font-size: 1.125rem; }
.so-chip { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.75rem; cursor: pointer; text-align: left; } .so-chip.posted { opacity: 0.7; } .so-chip span { flex: 1; }
.so-addday { margin-top: auto; height: 28px; border-radius: 8px; border: 1px dashed var(--line); background: none; color: var(--gray-700, #888); cursor: pointer; } .so-addday:hover { border-color: var(--accent); color: var(--fg); }
.so-accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.so-acc { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); } .so-acc > div { flex: 1; display: grid; } .so-acc small { color: var(--gray-700, #888); font-size: 0.75rem; }
.so-big { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--c); color: #fff; font-weight: 800; }
.so-dlg { width: min(900px, calc(100vw - 24px)); }
.so-comp { display: grid; grid-template-columns: 1fr 280px; } .so-comp form { display: grid; gap: 10px; padding: 18px 20px; align-content: start; }
.so-comp header { display: flex; align-items: center; justify-content: space-between; } .so-comp header h3 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.so-nets { display: flex; flex-wrap: wrap; gap: 6px; }
.so-tog { height: 30px; padding: 0 12px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--c) 50%, transparent); background: none; color: var(--fg); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; } .so-tog.on { background: var(--c); border-color: var(--c); color: #fff; } .so-tog:disabled { opacity: 0.35; cursor: not-allowed; }
.so-comp textarea, .so-comp input:not([type=color]):not([type=checkbox]) { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.875rem; }
.so-comp textarea { resize: vertical; } .so-count { text-align: right; font-size: 0.75rem; color: var(--gray-700, #888); margin-top: -6px; } .so-count .over { color: #e5484d; font-weight: 600; }
.so-ideas { display: flex; gap: 8px; } .so-ideas input { flex: 1; height: 36px; } .so-idlist { display: grid; gap: 6px; }
.so-idea { padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--fg); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; }
.so-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .so-row > label { display: grid; gap: 4px; font-size: 0.75rem; color: var(--gray-700, #888); }
.so-picrow { display: flex; align-items: center; gap: 6px; } .so-comp .so-emo { width: 52px !important; text-align: center; } .so-comp input[type=color] { width: 40px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; } .so-up { height: 36px; }
.so-comp footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .so-comp footer > span { display: flex; gap: 8px; }
.so-prev { padding: 18px; border-left: 1px solid var(--line); background: var(--gray-100); display: grid; gap: 8px; align-content: start; } .so-prev small { color: var(--gray-700, #888); }
.so-phone { border-radius: 18px; overflow: hidden; background: #fff; color: #111; font-size: 0.8125rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.so-ph-top { display: grid; padding: 10px 12px; } .so-ph-top span { color: #888; font-size: 0.6875rem; }
.so-ph-media img, .so-ph-media span { display: grid; place-items: center; width: 100%; aspect-ratio: 1; object-fit: cover; font-size: 4rem; background: color-mix(in srgb, var(--c) 35%, #fff); }
.so-ph-text { margin: 0; padding: 10px 12px 4px; white-space: pre-wrap; word-break: break-word; max-height: 140px; overflow: hidden; } .so-ph-acts { padding: 6px 12px 12px; }
@media (max-width: 900px) { .so-two { grid-template-columns: 1fr; } .so-cal { grid-template-columns: 1fr; } .so-day { min-height: 0; } .so-comp { grid-template-columns: 1fr; } .so-prev { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 760px) { .so { padding: 12px 14px 90px; } }
/* ---------- Chatnamic (preview) ---------- */
.cn { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.cn-thread { overflow-y: auto; padding: 24px max(20px, calc(50% - 380px)); display: flex; flex-direction: column; gap: 16px; }
.cn-hello { margin: auto; max-width: 520px; text-align: center; display: grid; justify-items: center; gap: 6px; } .cn-hello h2 { margin: 8px 0 0; font-size: 1.75rem; font-weight: 400; letter-spacing: -0.02em; } .cn-hello h2 b { font-weight: 700; } .cn-hello p { margin: 0; color: var(--gray-700, #888); line-height: 1.6; }
.cn-hello img { border-radius: 16px; box-shadow: 0 16px 40px rgba(49, 112, 206, 0.3); }
.cn-me { align-self: flex-end; max-width: 75%; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: var(--accent); color: var(--accent-ink, #fff); font-size: 0.9375rem; }
.cn-ai { display: flex; gap: 12px; align-items: flex-start; max-width: 92%; } .cn-ai > img { flex: none; border-radius: 8px; margin-top: 2px; }
.cn-txt { font-size: 0.9375rem; line-height: 1.65; } .cn-txt b { font-weight: 600; }
.cn-caret { display: inline-block; width: 8px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: currentColor; animation: cn-blink 0.8s steps(2) infinite; } @keyframes cn-blink { 50% { opacity: 0; } }
.cn-think { display: flex; gap: 5px; padding: 12px 4px; } .cn-think i { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-700, #888); animation: cn-bounce 1s infinite; } .cn-think i:nth-child(2) { animation-delay: 0.15s; } .cn-think i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cn-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }
.cn-gen { display: grid; gap: 8px; } .cn-gen small { color: var(--gray-700, #888); font-size: 0.75rem; }
.cn-canvas { position: relative; width: min(320px, 70vw); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--gray-100); }
.cn-img { display: block; width: 100%; height: 100%; filter: blur(var(--blur, 24px)) saturate(1.1); transition: filter 0.2s; } .cn-gen.done .cn-img { filter: none; }
.cn-veil { position: absolute; inset: auto 0 0; display: grid; gap: 6px; padding: 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); color: #fff; font-size: 0.75rem; } .cn-veil i { height: 4px; border-radius: 999px; background: #fff; transition: width 0.1s; } .cn-gen.done .cn-veil { display: none; }
.cn-card { flex: 1; min-width: 0; max-width: 560px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--gray-100); display: grid; gap: 8px; }
.cn-card header { display: flex; align-items: center; gap: 8px; } .cn-card header img { border-radius: 5px; } .cn-card p { margin: 0; font-size: 0.875rem; line-height: 1.55; } .cn-card > small { color: var(--gray-700, #888); font-size: 0.75rem; }
.cn-acts { display: flex; flex-wrap: wrap; gap: 6px; } .cn-acts button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.8125rem; opacity: 0.75; cursor: not-allowed; } .cn-acts button:first-child { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
.cn-dock { padding: 10px max(20px, calc(50% - 380px)) 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.cn-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .cn-chips::-webkit-scrollbar { display: none; }
.cn-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.8125rem; cursor: pointer; } .cn-chips button:hover:not(:disabled) { border-color: var(--accent); } .cn-chips button:disabled { opacity: 0.5; cursor: progress; }
.cn-input { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 22px; border: 1px solid var(--line); background: var(--gray-100); }
.cn-input textarea { flex: 1; resize: none; border: 0; background: none; color: var(--fg); font: inherit; font-size: 0.9375rem; outline: none; } .cn-input textarea:disabled { cursor: not-allowed; }
.cn-soon { padding: 2px 10px; border-radius: 999px; background: rgba(146, 206, 49, 0.14); color: #92ce31; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.cn-input button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); font-size: 1.125rem; opacity: 0.4; cursor: not-allowed; }
.cn-fine { margin: 0; text-align: center; color: var(--gray-700, #888); font-size: 0.6875rem; }
.cn-budget { margin-top: 18px; display: grid; gap: 10px; padding: 0 12px; } .cn-budget .wm-ctxh { margin: 0; } .cn-budget div { display: grid; gap: 5px; } .cn-budget small { display: flex; justify-content: space-between; color: var(--gray-700, #888); font-size: 0.75rem; } .cn-budget small b { color: var(--fg); font-weight: 500; }
.cn-meter { height: 6px; border-radius: 999px; background: var(--gray-100); overflow: hidden; } .cn-meter i { display: block; height: 100%; border-radius: inherit; background: #92ce31; }
.cn-bfine { margin: 0; color: var(--gray-700, #888); font-size: 0.6875rem; line-height: 1.45; }
@media (max-width: 760px) { .cn-dock { padding-bottom: 82px; } .cn-ai { max-width: 100%; } }
.wm-ctx a.wm-f > span:not(.sh2-ni):not(.pn-dot):not(.st-navdot):not(.sd-dot):not(.pn-plus) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Softnamic logo at sign-in, now that the hosting site carries the Softnamic brand */
.logo.lg .logo-mark { width: 44px; height: 18.2px; } .logo.lg .logo-word { width: 118px; height: 19px; }
/* the Softnamic apps band on the hosting pages */
.cells.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cells.c5 .cell:nth-child(5n) { border-right: 0; }
.sn-app { color: inherit; transition: background .15s var(--ease); }
.sn-app:hover { background: var(--bg-2); }
.sn-app img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.sn-app h3 { font-weight: 400; } .sn-app h3 b { font-weight: 700; }
.sn-apps-more .link { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 899px) { .cells.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .cells.c5 { grid-template-columns: minmax(0, 1fr); } .cells.c5 .cell { border-right: 0; } }