/* =====================================================================
   Saung Client Area — Design System (compact / professional / consistent)
   Brand: green (#059669) + sky-blue accent (#0ea5e9). Base 13px, dense scale.
   Prefix: .ds-*  — used across all client-area pages.
   ===================================================================== */

:root{
  --ds-brand:#059669; --ds-brand-600:#059669; --ds-brand-700:#047857; --ds-brand-500:#10b981;
  --ds-brand-50:#ecfdf5; --ds-brand-100:#d1fae5;
  --ds-accent:#0ea5e9; --ds-accent-50:#f0f9ff;
  --ds-ink:#0f172a; --ds-body:#334155; --ds-muted:#64748b; --ds-faint:#94a3b8;
  --ds-line:#e8edf3; --ds-line-2:#eef2f7; --ds-bg:#f6f8fb;
  --ds-card:#fff; --ds-radius:12px; --ds-radius-sm:9px; --ds-radius-lg:14px;
  --ds-shadow:0 1px 2px rgba(15,23,42,.06);
  --ds-shadow-md:0 8px 24px -10px rgba(15,23,42,.16);
  --ds-shadow-lg:0 20px 48px -22px rgba(15,23,42,.30);
  --ds-grad-brand:linear-gradient(135deg,#0ea5e9 0%,#10b981 100%);
  --ds-grad-accent:linear-gradient(135deg,#0284c7 0%,#0ea5e9 100%);
  --ds-ok-bg:#dcfce7; --ds-ok-fg:#15803d; --ds-warn-bg:#fef3c7; --ds-warn-fg:#b45309;
  --ds-danger-bg:#fee2e2; --ds-danger-fg:#b91c1c; --ds-info-bg:#dbeafe; --ds-info-fg:#1e40af;
  --ds-neutral-bg:#f1f5f9; --ds-neutral-fg:#475569;
}

/* ---- scope + typography ---- */
.ds{ font-size:13px; line-height:1.55; color:var(--ds-body); }

/* ---- page transition (screen slide on every navigation) ---- */
.page-anim{ animation:pageSlideIn .34s cubic-bezier(.22,.61,.36,1) backwards; }
@keyframes pageSlideIn{ from{ opacity:0; transform:translate3d(0,18px,0); } to{ opacity:1; transform:translate3d(0,0,0); } }
@media (prefers-reduced-motion:reduce){ .page-anim{ animation:none; } }
.ds *{ box-sizing:border-box; }
.ds-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.ds-muted{ color:var(--ds-muted); }
.ds-faint{ color:var(--ds-faint); }

/* ---- page header (compact) ---- */
.ds-pagehead{ margin-bottom:16px; }
.ds-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:11.5px; color:var(--ds-faint); margin-bottom:6px; }
.ds-crumb a{ color:var(--ds-muted); text-decoration:none; }
.ds-crumb a:hover{ color:var(--ds-brand); }
.ds-crumb .sep{ color:#cbd5e1; }
.ds-title{ font-size:19px; font-weight:700; color:var(--ds-ink); margin:0; letter-spacing:-.01em; }
.ds-sub{ font-size:12.5px; color:var(--ds-muted); margin:4px 0 0; }

/* ---- stat cards ---- */
.ds-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
@media (max-width:900px){ .ds-stats{ grid-template-columns:repeat(2,1fr); } }
.ds-stat{ background:var(--ds-card); border:1px solid var(--ds-line); border-radius:var(--ds-radius-lg); padding:16px 18px; display:flex; align-items:center; gap:13px; box-shadow:var(--ds-shadow-md); transition:transform .16s ease, box-shadow .16s ease; }
.ds-stat-ico{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; color:#fff; box-shadow:0 6px 14px -5px rgba(15,23,42,.35); }
.ds-ico-blue{ background:linear-gradient(135deg,#0ea5e9,#38bdf8); color:#fff; }
.ds-ico-green{ background:linear-gradient(135deg,#059669,#10b981); color:#fff; }
.ds-ico-amber{ background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; }
.ds-ico-red{ background:linear-gradient(135deg,#dc2626,#ef4444); color:#fff; }
.ds-ico-orange{ background:linear-gradient(135deg,#0d9488,#14b8a6); color:#fff; }
.ds-ico-slate{ background:linear-gradient(135deg,#475569,#64748b); color:#fff; }
.ds-stat-num{ font-size:23px; font-weight:800; color:var(--ds-ink); line-height:1.05; letter-spacing:-.02em; }
.ds-stat-num.sm{ font-size:15px; }
.ds-stat-lbl{ font-size:11px; color:var(--ds-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-top:3px; }

/* ---- card ---- */
.ds-card{ background:var(--ds-card); border:1px solid var(--ds-line); border-radius:var(--ds-radius-lg); box-shadow:var(--ds-shadow-md); overflow:hidden; }
.ds-card + .ds-card{ margin-top:14px; }
.ds-card-head{ padding:14px 18px; border-bottom:1px solid var(--ds-line-2); display:flex; align-items:center; gap:10px; background:linear-gradient(180deg,#fbfcfe,#fff); }
.ds-card-head .ds-ci{ width:32px; height:32px; border-radius:9px; background:var(--ds-grad-brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; box-shadow:0 5px 12px -4px rgba(5,150,105,.5); }
.ds-card-title{ font-size:13.5px; font-weight:800; color:var(--ds-ink); margin:0; flex:1; }
.ds-card-body{ padding:18px; }
.ds-card-foot{ padding:12px 18px; background:#f8fafc; border-top:1px solid var(--ds-line-2); font-size:12px; color:var(--ds-faint); }

/* ---- toolbar / search / pills ---- */
.ds-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.ds-search{ flex:1; min-width:220px; position:relative; }
.ds-search input{ width:100%; height:38px !important; padding:0 14px 0 38px !important; border:1px solid var(--ds-line); border-radius:10px; background:#fff; font-size:13px; color:var(--ds-ink); outline:none; transition:.15s; }
.ds-search input:focus{ border-color:var(--ds-brand); box-shadow:0 0 0 3px rgba(5,150,105,.12); }
.ds-search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ds-faint); font-size:13px; }
.ds-pills{ display:flex; gap:5px; flex-wrap:wrap; }
.ds-pill{ padding:7px 13px; border-radius:8px; background:#f1f5f9; color:var(--ds-muted); font-size:12px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:.15s; user-select:none; display:inline-flex; align-items:center; gap:6px; }
.ds-pill:hover{ background:#e6ebf2; }
.ds-pill.on{ background:var(--ds-brand); color:#fff; }

/* ---- table ---- */
.ds-tablecard{ background:var(--ds-card); border:1px solid var(--ds-line); border-radius:var(--ds-radius); box-shadow:var(--ds-shadow); overflow:hidden; }
.ds-table{ width:100%; border-collapse:collapse; font-size:13px; }
.ds-table thead th{ text-align:left; padding:11px 16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ds-muted); background:#f8fafc; border-bottom:1px solid var(--ds-line-2); white-space:nowrap; }
.ds-table thead th.r{ text-align:right; }
.ds-table thead th.c{ text-align:center; }
.ds-table tbody td{ padding:12px 16px; border-bottom:1px solid var(--ds-line-2); color:var(--ds-body); vertical-align:middle; }
.ds-table tbody tr:last-child td{ border-bottom:0; }
.ds-table tbody tr.click{ cursor:pointer; transition:.12s; }
.ds-table tbody tr.click:hover{ background:#f8fafc; }
.ds-table tbody tr.grp td{ background:var(--ds-brand-50); color:var(--ds-brand-700); font-weight:700; font-size:11.5px; padding:8px 16px; text-transform:uppercase; letter-spacing:.03em; }
.ds-table td.r{ text-align:right; }
.ds-table td.c{ text-align:center; }
.ds-table .strong{ font-weight:700; color:var(--ds-ink); }
.ds-table tfoot td{ padding:10px 16px; }
.ds-table tfoot td.lbl{ text-align:right; font-weight:600; color:var(--ds-muted); }
.ds-table tfoot td.val{ text-align:right; font-weight:700; color:var(--ds-ink); white-space:nowrap; }
.ds-table tfoot tr.grand td{ border-top:2px solid var(--ds-line); font-size:14px; }
.ds-table tfoot tr.grand td.val{ color:var(--ds-brand); }

/* ---- invoice / quote document ---- */
.ds-doc{ max-width:860px; margin:0 auto; }
.ds-doc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.ds-doc-brand h2{ font-size:18px; font-weight:800; color:var(--ds-ink); margin:0; }
.ds-doc-brand p{ font-size:12.5px; color:var(--ds-muted); margin:3px 0 0; }
.ds-doc-status{ text-align:right; }
.ds-doc-parties{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:600px){ .ds-doc-parties{ grid-template-columns:1fr; } }
.ds-doc-lbl{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ds-faint); margin-bottom:6px; }
.ds-doc-addr{ font-size:12.5px; color:var(--ds-body); line-height:1.7; }
.ds-doc-addr strong{ color:var(--ds-ink); }

/* ---- badge ---- */
.ds-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; line-height:1.6; }
.ds-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.ds-badge.plain::before{ display:none; }
.ds-badge.ok{ background:var(--ds-ok-bg); color:var(--ds-ok-fg); }
.ds-badge.warn{ background:var(--ds-warn-bg); color:var(--ds-warn-fg); }
.ds-badge.danger{ background:var(--ds-danger-bg); color:var(--ds-danger-fg); }
.ds-badge.info{ background:var(--ds-info-bg); color:var(--ds-info-fg); }
.ds-badge.neutral{ background:var(--ds-neutral-bg); color:var(--ds-neutral-fg); }

/* ---- buttons ---- */
.ds-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 14px; border-radius:9px; font-size:13px; font-weight:600; text-decoration:none; border:1px solid var(--ds-line); color:var(--ds-body); background:#fff; cursor:pointer; transition:.15s; white-space:nowrap; }
.ds-btn:hover{ border-color:#cbd5e1; color:var(--ds-ink); background:#f8fafc; }
.ds-btn.primary{ background:var(--ds-grad-brand); color:#fff; border-color:transparent; box-shadow:0 6px 16px -6px rgba(5,150,105,.6); }
.ds-btn.primary:hover{ background:var(--ds-brand-700); border-color:transparent; color:#fff; box-shadow:0 8px 20px -6px rgba(5,150,105,.7); }
.ds-btn.accent{ background:var(--ds-grad-accent); color:#fff; border-color:transparent; box-shadow:0 6px 16px -6px rgba(14,165,233,.6); }
.ds-btn.accent:hover{ background:var(--ds-accent); color:#fff; opacity:.95; box-shadow:0 8px 20px -6px rgba(14,165,233,.7); }
.ds-btn.sm{ padding:6px 11px; font-size:12px; border-radius:8px; }
.ds-btn.block{ width:100%; }
.ds-btn.lg{ padding:11px 20px; font-size:14px; border-radius:10px; }

/* ---- link-card grid ---- */
.ds-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.ds-grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ds-grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ds-grid-main{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; }
@media (max-width:820px){ .ds-grid-2,.ds-grid-3,.ds-grid-main{ grid-template-columns:1fr; } }

/* ---- forms ---- */
.ds-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.ds-label{ font-size:12.5px; font-weight:600; color:var(--ds-body); }
.ds-label .req{ color:#ef4444; }
.ds-input,.ds-select,.ds-textarea{ width:100%; padding:9px 12px; border:1px solid var(--ds-line); border-radius:10px; background:#fff; font-size:13px; color:var(--ds-ink); outline:none; transition:.15s; font-family:inherit; }
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{ border-color:var(--ds-brand); box-shadow:0 0 0 3px rgba(5,150,105,.12); }
.ds-input:disabled,.ds-input.disabled{ background:#f1f5f9; color:var(--ds-muted); cursor:not-allowed; }
.ds-textarea{ resize:vertical; min-height:150px; line-height:1.55; }
.ds-help{ font-size:11.5px; color:var(--ds-faint); }

/* ---- hero (compact gradient) ---- */
.ds-hero{ background:linear-gradient(125deg,#0c4a6e 0%,#0e7490 30%,#059669 66%,#10b981 100%); border-radius:18px; padding:28px 30px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--ds-shadow-lg); }
.ds-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 88% -20%, rgba(255,255,255,.22), transparent 46%), radial-gradient(circle at 12% 120%, rgba(16,185,129,.4), transparent 42%); z-index:0; }
.ds-hero::after{ content:''; position:absolute; right:-30px; top:-50px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.09); }
.ds-hero-row{ display:flex; align-items:center; gap:16px; position:relative; z-index:1; }
.ds-hero-ico{ width:62px; height:62px; border-radius:16px; background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.12)); border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-size:27px; flex-shrink:0; box-shadow:0 8px 20px -8px rgba(0,0,0,.4); }
.ds-hero h1{ font-size:25px; font-weight:800; margin:0 0 3px; color:#fff; letter-spacing:-.01em; }
.ds-hero p{ margin:0; font-size:13.5px; color:#fff; opacity:.94; }
/* hero: status + action buttons (blue bg → WHITE text everywhere) */
.ds-hero-group{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#fff; opacity:.85; font-weight:600; }
.ds-hero-sub{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#fff; opacity:.92; margin-top:3px; }
.ds-hero-sub a{ color:#fff; text-decoration:none; }
.ds-hero-sub a:hover{ text-decoration:underline; }
.ds-hero-status{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.2); color:#fff; font-size:12px; font-weight:700; white-space:nowrap; }
.ds-hero-status::before{ content:''; width:7px; height:7px; border-radius:50%; background:#fff; }
.ds-hero-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; position:relative; z-index:1; }
.ds-hero-act{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:9px; font-size:12.5px; font-weight:600; text-decoration:none; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; cursor:pointer; transition:.15s; }
.ds-hero-act:hover{ background:rgba(255,255,255,.26); color:#fff; }
.ds-hero-act.solid{ background:#fff; color:var(--ds-brand-700); border-color:#fff; }
.ds-hero-act.solid:hover{ background:#fff; color:var(--ds-brand-700); opacity:.92; }

/* ---- key/value list ---- */
.ds-kv{ margin:0; }
.ds-kv-row{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--ds-line-2); }
.ds-kv-row:last-child{ border-bottom:0; }
.ds-kv-k{ font-size:12.5px; color:var(--ds-muted); flex-shrink:0; }
.ds-kv-v{ font-size:13px; color:var(--ds-ink); font-weight:600; text-align:right; word-break:break-word; }
.ds-kv-v code{ background:#f1f5f9; padding:1px 6px; border-radius:5px; font-size:12px; color:var(--ds-ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.ds-kv-v small{ color:var(--ds-muted); font-weight:500; }

/* ---- tabs ---- */
.ds-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--ds-line); margin-bottom:14px; flex-wrap:wrap; }
.ds-tab{ padding:9px 14px; border:0; background:transparent; font-size:13px; font-weight:600; color:var(--ds-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-flex; align-items:center; gap:7px; transition:.15s; }
.ds-tab:hover{ color:var(--ds-ink); }
.ds-tab.on{ color:var(--ds-brand); border-bottom-color:var(--ds-brand); }

/* ---- action row (quick actions) ---- */
.ds-action{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px; border:1px solid var(--ds-line); background:#fff; text-decoration:none; transition:.15s; }
.ds-action:hover{ border-color:var(--ds-brand-100); background:var(--ds-brand-50); }
.ds-action-ico{ width:34px; height:34px; border-radius:9px; background:var(--ds-brand-50); color:var(--ds-brand-600); display:inline-flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.ds-action:hover .ds-action-ico{ background:#fff; }
.ds-action-txt{ display:flex; flex-direction:column; min-width:0; }
.ds-action-title{ font-size:13px; font-weight:600; color:var(--ds-ink); }
.ds-action-desc{ font-size:11.5px; color:var(--ds-muted); }

/* ---- resource card (services / domains, shared) ---- */
.ds-rescard{ background:#fff; border:1px solid var(--ds-line); border-radius:var(--ds-radius); padding:15px 16px; box-shadow:var(--ds-shadow); display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; transition:.15s; position:relative; overflow:hidden; }
.ds-rescard::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#cbd5e1; }
.ds-rescard.s-ok::before{ background:#22c55e; }
.ds-rescard.s-warn::before{ background:#f59e0b; }
.ds-rescard.s-danger::before{ background:#ef4444; }
.ds-rescard.s-muted::before{ background:#94a3b8; }
.ds-rescard:hover{ border-color:#cbd5e1; box-shadow:var(--ds-shadow-md); transform:translateY(-1px); }
.ds-rescard-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ds-rescard-ico{ width:38px; height:38px; border-radius:10px; background:var(--ds-brand-50); color:var(--ds-brand-600); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ds-rescard-name{ font-size:14px; font-weight:700; color:var(--ds-ink); margin:0; word-break:break-word; }
.ds-rescard-sub{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ds-muted); margin-top:3px; }
.ds-rescard-meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:11px; border-top:1px solid var(--ds-line-2); }
.ds-rescard-meta-lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ds-faint); font-weight:600; margin-bottom:3px; }
.ds-rescard-meta-val{ font-size:12.5px; color:var(--ds-ink); font-weight:600; }
.ds-rescard-meta-val small{ color:var(--ds-muted); font-weight:500; }
.ds-rescard-cta{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ds-brand-600); margin-top:auto; }
.ds-ar-on{ display:inline-flex; align-items:center; gap:5px; color:#16a34a; font-weight:600; }
.ds-ar-off{ display:inline-flex; align-items:center; gap:5px; color:#94a3b8; font-weight:600; }

/* ---- empty state ---- */
.ds-empty{ padding:44px 20px; text-align:center; color:var(--ds-faint); }
.ds-empty i{ font-size:32px; margin-bottom:10px; color:#cbd5e1; display:block; }
.ds-empty h3{ margin:0 0 4px; font-size:15px; font-weight:700; color:var(--ds-body); }
.ds-empty p{ margin:0; font-size:13px; }

/* ---- misc ---- */
.ds-divider{ height:1px; background:var(--ds-line-2); margin:16px 0; border:0; }
.ds-stack{ display:flex; flex-direction:column; gap:14px; }
.ds-back{ text-align:center; margin-top:16px; }
.ds-back a{ color:var(--ds-brand); font-size:13px; text-decoration:none; font-weight:500; display:inline-flex; align-items:center; gap:6px; }
.ds-back a:hover{ text-decoration:underline; }

/* ---- tighten the client-area content wrapper ---- */
#saung-clientarea .saung-ca-content{ padding:0; background:transparent; border:0; box-shadow:none; }
#saung-clientarea.saung-ca-wrap{ padding:1.5rem 1.25rem; }

/* ---- list card (tickets, horizontal rows) ---- */
.ds-listcard{ background:#fff; border:1px solid var(--ds-line); border-radius:var(--ds-radius); padding:13px 15px; display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit; transition:.15s; position:relative; overflow:hidden; box-shadow:var(--ds-shadow); }
.ds-listcard::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#cbd5e1; }
.ds-listcard.s-ok::before{ background:#22c55e; }
.ds-listcard.s-warn::before{ background:#f59e0b; }
.ds-listcard.s-info::before{ background:var(--ds-brand); }
.ds-listcard.s-muted::before{ background:#94a3b8; }
.ds-listcard:hover{ border-color:#cbd5e1; box-shadow:var(--ds-shadow-md); transform:translateY(-1px); }
.ds-listcard-ico{ width:40px; height:40px; border-radius:10px; background:var(--ds-brand-50); color:var(--ds-brand-600); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ds-listcard-ico.warn{ background:#fffbeb; color:#d97706; }
.ds-listcard-ico.muted{ background:#f1f5f9; color:#64748b; }
.ds-listcard-body{ flex:1; min-width:0; }
.ds-listcard-top{ display:flex; align-items:center; gap:8px; margin-bottom:2px; flex-wrap:wrap; }
.ds-listcard-num{ font-size:11px; color:var(--ds-muted); font-weight:600; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#f1f5f9; padding:1px 7px; border-radius:5px; }
.ds-listcard-sub{ font-size:11.5px; color:var(--ds-muted); }
.ds-listcard-title{ font-size:13.5px; font-weight:600; color:var(--ds-ink); word-break:break-word; }
.ds-listcard-title .new{ display:inline-block; margin-left:7px; font-size:9.5px; padding:1px 6px; border-radius:999px; background:var(--ds-brand); color:#fff; font-weight:700; letter-spacing:.04em; vertical-align:middle; }
.ds-listcard-meta{ margin-top:5px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ds-listcard-time{ font-size:11.5px; color:var(--ds-muted); display:inline-flex; align-items:center; gap:5px; }
.ds-listcard-arrow{ color:#cbd5e1; transition:.15s; }
.ds-listcard:hover .ds-listcard-arrow{ color:var(--ds-brand); transform:translateX(3px); }

/* ---- conversation thread ---- */
.ds-thread{ display:flex; flex-direction:column; gap:12px; }
.ds-msg{ background:#fff; border:1px solid var(--ds-line); border-radius:var(--ds-radius); overflow:hidden; box-shadow:var(--ds-shadow); }
.ds-msg.staff{ border-color:#a7f3d0; }
.ds-msg-head{ display:flex; align-items:center; gap:11px; padding:11px 16px; border-bottom:1px solid var(--ds-line-2); background:#fafbfc; }
.ds-msg.staff .ds-msg-head{ background:var(--ds-brand-50); }
.ds-msg-av{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0; }
.ds-msg-av.client{ background:linear-gradient(135deg,#64748b,#475569); }
.ds-msg-av.staff{ background:linear-gradient(135deg,#059669,#047857); }
.ds-msg-who{ flex:1; min-width:0; }
.ds-msg-name{ font-size:13px; font-weight:700; color:var(--ds-ink); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ds-msg-date{ font-size:11.5px; color:var(--ds-faint); margin-top:1px; }
.ds-msg-body{ padding:16px; font-size:13px; color:var(--ds-body); line-height:1.7; }
.ds-msg-body p{ margin:0 0 10px; }
.ds-msg-body p:last-child{ margin-bottom:0; }

/* ---- wizard steps (on hero → white text) ---- */
.ds-steps{ display:flex; gap:7px; margin-top:16px; position:relative; z-index:1; }
.ds-step{ flex:1; padding:8px 11px; border-radius:9px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26); color:#fff; }
.ds-step.done{ background:rgba(255,255,255,.3); }
.ds-step.cur{ background:#fff; color:var(--ds-brand-700); border-color:#fff; }
.ds-step .num{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.28); display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; flex-shrink:0; }
.ds-step.cur .num{ background:var(--ds-brand-700); color:#fff; }

/* ---- priority selector ---- */
.ds-priority{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.ds-priority label{ cursor:pointer; padding:12px; border:2px solid var(--ds-line); border-radius:10px; background:#f8fafc; text-align:center; display:flex; flex-direction:column; align-items:center; gap:5px; font-weight:600; font-size:12.5px; color:var(--ds-muted); transition:.15s; margin:0; }
.ds-priority label:hover{ border-color:#cbd5e1; }
.ds-priority label.on{ background:#fff; border-color:var(--ds-brand); color:var(--ds-brand-700); box-shadow:0 0 0 3px rgba(5,150,105,.1); }
.ds-priority label i{ font-size:18px; }
.ds-priority label.p-low i{ color:#10b981; }
.ds-priority label.p-med i{ color:#f59e0b; }
.ds-priority label.p-high i{ color:#ef4444; }
.ds-priority input{ display:none; }

/* ---- server status ---- */
.ds-banner{ border-radius:var(--ds-radius); padding:16px 18px; display:flex; align-items:center; gap:14px; }
.ds-banner.ok{ background:#f0fdf4; border:1px solid #bbf7d0; }
.ds-banner.ok .ds-banner-ico{ background:#dcfce7; color:#16a34a; }
.ds-banner.warn{ background:#fffbeb; border:1px solid #fde68a; }
.ds-banner.warn .ds-banner-ico{ background:#fef3c7; color:#d97706; }
.ds-banner.warn h3{ color:#92400e; }
.ds-banner.warn p{ color:#b45309; }
.ds-banner.info{ background:var(--ds-brand-50); border:1px solid #a7f3d0; }
.ds-banner.info .ds-banner-ico{ background:#d1fae5; color:var(--ds-brand-600); }
.ds-banner.info h3{ color:#047857; }
.ds-banner.info p{ color:#047857; }
.ds-banner-ico{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.ds-banner h3{ margin:0 0 2px; font-size:14px; font-weight:700; color:#14532d; }
.ds-banner p{ margin:0; font-size:12.5px; color:#15803d; }

/* ---- side nav (account/support sidebar) ---- */
.ds-sidenav{ background:#fff; border:1px solid var(--ds-line); border-radius:var(--ds-radius); box-shadow:var(--ds-shadow); overflow:hidden; }
.ds-sidenav + .ds-sidenav{ margin-top:12px; }
.ds-sidenav-head{ padding:11px 15px; border-bottom:1px solid var(--ds-line-2); font-size:11.5px; font-weight:700; color:var(--ds-ink); display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:.04em; }
.ds-sidenav-head i{ color:var(--ds-brand); font-size:12px; }
.ds-sidenav-body{ padding:6px; }
.ds-sidenav-body a{ display:flex; align-items:center; gap:9px; padding:8px 11px; font-size:13px; color:var(--ds-muted); text-decoration:none; border-radius:8px; transition:.12s; }
.ds-sidenav-body a i{ width:15px; text-align:center; color:var(--ds-faint); font-size:12px; }
.ds-sidenav-body a:hover{ background:var(--ds-brand-50); color:var(--ds-brand-700); }
.ds-sidenav-body a:hover i{ color:var(--ds-brand); }
.ds-sidenav-body a.on{ background:var(--ds-brand); color:#fff; font-weight:600; }
.ds-sidenav-body a.on i{ color:#fff; }

/* Billing/Support sidebar reuse the store (.shop-side) card look inside the client-area.
   Let .saung-ca-sidebar own layout + sticky; neutralize the inner .shop-side sticky. */
#saung-clientarea .saung-ca-sidebar .shop-side{ position:static; top:auto; gap:1rem; }

/* =====================================================================
   POLISH — micro-interactions, focus, refinement
   ===================================================================== */
.ds-card{ transition:box-shadow .18s ease, border-color .18s ease; }
a.ds-stat, .ds-stat[href]{ cursor:pointer; }
a.ds-stat:hover{ border-color:#d4dbe6; box-shadow:var(--ds-shadow-md); transform:translateY(-1px); }
.ds-stat{ transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.ds-stat-ico{ transition:transform .18s ease; }
a.ds-stat:hover .ds-stat-ico{ transform:scale(1.06); }
.ds-btn:active{ transform:translateY(1px); }
.ds-btn:focus-visible, .ds-pill:focus-visible, .ds-tab:focus-visible{ outline:2px solid rgba(5,150,105,.45); outline-offset:2px; }
.ds-input:focus-visible, .ds-select:focus-visible, .ds-textarea:focus-visible, .ds-search input:focus-visible{ outline:none; }
.ds-hero{ transition:box-shadow .2s ease; }
.ds-listcard, .ds-rescard, .ds-action{ will-change:transform; }
::selection{ background:rgba(5,150,105,.16); }

/* smoother tables + allow horizontal scroll on small screens */
.ds-tablecard{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ds-tablecard::-webkit-scrollbar{ height:7px; }
.ds-tablecard::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:99px; }

/* =====================================================================
   RESPONSIVE — mobile / tablet
   ===================================================================== */
@media (max-width:960px){
  /* client-area sidebar stacks above content, non-sticky */
  #saung-clientarea .saung-ca-grid.has-sidebar{ grid-template-columns:1fr; gap:1rem; }
  #saung-clientarea .saung-ca-sidebar{ position:static; top:auto; }
  /* two side-nav sections sit side by side on tablet to save vertical space */
  #saung-clientarea .saung-ca-sidebar{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  #saung-clientarea .saung-ca-sidebar .ds-sidenav + .ds-sidenav{ margin-top:0; }
  /* store-style Billing/Support sidebar is a single card → span full width on tablet */
  #saung-clientarea .saung-ca-sidebar > .shop-side{ grid-column:1 / -1; }
}
@media (max-width:768px){
  .ds-title{ font-size:17px; }
  .ds-hero h1{ font-size:18px; }
  .ds-hero-ico{ width:46px; height:46px; font-size:19px; }
  .ds-stat-num{ font-size:18px; }
  .ds-stat-num.sm{ font-size:13.5px; }
}
@media (max-width:640px){
  #saung-clientarea.saung-ca-wrap{ padding:1rem .85rem; }
  #saung-clientarea .saung-ca-sidebar{ grid-template-columns:1fr; }
  .ds-stats{ grid-template-columns:1fr 1fr; gap:10px; }
  .ds-stat{ padding:12px 13px; gap:10px; }
  .ds-stat-ico{ width:32px; height:32px; font-size:14px; }
  .ds-hero{ padding:16px 18px; }
  .ds-hero-row{ flex-wrap:wrap; }
  .ds-hero-status{ order:3; }
  .ds-card-body{ padding:15px; }
  .ds-card-head{ padding:12px 15px; }
  .ds-doc-head{ gap:12px; }
  .ds-doc-status{ text-align:left; }
  /* wizard steps stack cleanly on phones */
  .ds-steps{ flex-direction:column; gap:6px; }
  .ds-step{ justify-content:flex-start; }
  /* toolbar: full-width search, pills below */
  .ds-toolbar{ gap:8px; }
  .ds-search{ min-width:100%; }
  .ds-pills{ width:100%; }
  .ds-pill{ flex:1; justify-content:center; }
  /* priority selector: stack labels tighter */
  .ds-priority{ gap:7px; }
  .ds-priority label{ padding:10px 6px; font-size:12px; }
}
@media (max-width:420px){
  .ds-pill{ font-size:11.5px; padding:7px 10px; }
}

/* =====================================================================
   FIX — bundled saung theme has `#saung-clientarea a:not(.btn):not(.list-group-item)
   { color:#0d9488 }` (ID-level specificity) that overrode design-system ANCHOR
   text colors → made <a> buttons / hero actions / active nav render TEAL instead
   of white. Force correct colors on every ds anchor (WHITE on any blue surface).
   ===================================================================== */
.ds-btn{ color:var(--ds-body) !important; }
.ds-btn:hover{ color:var(--ds-ink) !important; }
.ds-btn.primary, .ds-btn.accent,
.ds-btn.primary:hover, .ds-btn.accent:hover{ color:#fff !important; }
/* force gradient bg on <button> too — theme resets #saung-clientarea button background */
.ds-btn.primary{ background:var(--ds-grad-brand) !important; border-color:transparent !important; }
.ds-btn.primary:hover{ background:var(--ds-brand-700) !important; }
.ds-btn.accent{ background:var(--ds-grad-accent) !important; border-color:transparent !important; }
.ds-btn.accent:hover{ background:var(--ds-accent) !important; }
.ds-btn.danger{ background:#fef2f2 !important; color:#b91c1c !important; border-color:#fecaca !important; }
.ds-hero a, .ds-hero-act, .ds-hero-act:hover{ color:#fff !important; }
.ds-hero h1, .ds-hero h2, .ds-hero h3, .ds-hero p, .ds-hero .ds-hero-group, .ds-hero .ds-hero-sub, .ds-hero-status{ color:#fff !important; }
.ds-hero-act.solid, .ds-hero-act.solid:hover{ color:var(--ds-brand-700) !important; }
.ds-sidenav-body a{ color:var(--ds-muted) !important; }
.ds-sidenav-body a:hover{ color:var(--ds-brand-700) !important; }
.ds-sidenav-body a.on{ color:#fff !important; }
.ds-back a{ color:var(--ds-brand) !important; }
.ds-crumb a{ color:var(--ds-muted) !important; }
.ds-crumb a:hover{ color:var(--ds-brand) !important; }
a.ds-lineitem{ color:inherit !important; }
.ds-rescard, .ds-listcard, .ds-action, a.ds-stat{ color:inherit !important; }
.ds-rescard-cta{ color:var(--ds-brand-600) !important; }
/* active pill/tab are <button> — some theme button rules override color, force white/brand */
.ds-pill.on{ color:#fff !important; }
.ds-tab.on{ color:var(--ds-brand) !important; }
.ds-tab{ color:var(--ds-muted) !important; }

/* =====================================================================
   STORE / ORDER FLOW
   ===================================================================== */
.ds-plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.ds-plan{ background:#fff; border:1px solid var(--ds-line); border-radius:var(--ds-radius-lg); padding:20px 18px; display:flex; flex-direction:column; gap:13px; position:relative; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; box-shadow:var(--ds-shadow); }
.ds-plan:hover{ border-color:var(--ds-brand-100); box-shadow:var(--ds-shadow-md); transform:translateY(-2px); }
.ds-plan.popular{ border-color:var(--ds-brand); box-shadow:0 10px 26px -14px rgba(5,150,105,.4); }
.ds-plan-badge{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--ds-brand); color:#fff; font-size:10px; font-weight:700; padding:3px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.ds-plan-name{ font-size:16px; font-weight:800; color:var(--ds-ink); }
.ds-plan-tag{ font-size:12px; color:var(--ds-muted); margin-top:2px; }
.ds-plan-price{ display:flex; align-items:baseline; gap:5px; }
.ds-plan-price .amt{ font-size:25px; font-weight:800; color:var(--ds-ink); letter-spacing:-.02em; }
.ds-plan-price .cyc{ font-size:12px; color:var(--ds-muted); }
.ds-plan-old{ font-size:12px; color:var(--ds-faint); text-decoration:line-through; }
.ds-plan-specs{ display:flex; flex-direction:column; gap:7px; padding:13px 0; border-top:1px solid var(--ds-line-2); border-bottom:1px solid var(--ds-line-2); }
.ds-plan-spec{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; }
.ds-plan-spec .k{ color:var(--ds-muted); }
.ds-plan-spec .v{ color:var(--ds-ink); font-weight:600; }
.ds-plan-feats{ display:flex; flex-direction:column; gap:6px; list-style:none; padding:0; margin:0; }
.ds-plan-feat{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ds-body); }
.ds-plan-feat i{ color:#16a34a; font-size:12px; width:13px; }

/* billing cycle toggle */
.ds-cyc{ display:inline-flex; background:#f1f5f9; border-radius:11px; padding:3px; gap:2px; flex-wrap:wrap; }
.ds-cyc button{ border:0; background:transparent; padding:7px 13px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ds-muted); cursor:pointer; transition:.15s; display:inline-flex; align-items:center; }
.ds-cyc button:hover{ color:var(--ds-ink); }
.ds-cyc button.on{ background:#fff; color:var(--ds-brand-700); box-shadow:var(--ds-shadow); }
.ds-cyc .save{ font-size:9.5px; color:#16a34a; font-weight:800; margin-left:5px; background:#dcfce7; padding:1px 5px; border-radius:5px; }

/* group card (store home) */
.ds-groupcard{ text-decoration:none; color:inherit; }
.ds-groupcard-ico{ width:48px; height:48px; border-radius:13px; background:var(--ds-brand-50); color:var(--ds-brand-600); display:flex; align-items:center; justify-content:center; font-size:22px; transition:.18s; }
.ds-groupcard:hover .ds-groupcard-ico{ background:var(--ds-brand); color:#fff; }

/* order progress steps */
.ds-osteps{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-bottom:18px; }
.ds-ostep{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ds-muted); }
.ds-ostep .n{ width:24px; height:24px; border-radius:50%; background:#e2e8f0; color:var(--ds-muted); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.ds-ostep.done .n{ background:#dcfce7; color:#16a34a; }
.ds-ostep.cur{ color:var(--ds-brand-700); }
.ds-ostep.cur .n{ background:var(--ds-brand); color:#fff; }
.ds-ostep-sep{ width:18px; height:2px; background:#e2e8f0; border-radius:2px; }
@media (max-width:640px){ .ds-ostep span.lbl{ display:none; } .ds-ostep-sep{ width:10px; } }

/* order 2-column layout + summary sidebar */
.ds-order{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
@media (max-width:900px){ .ds-order{ grid-template-columns:1fr; } }
.ds-order-side{ position:sticky; top:96px; }
@media (max-width:900px){ .ds-order-side{ position:static; } }
/* radio/checkbox option card */
.ds-opt{ display:flex !important; align-items:flex-start; gap:11px; padding:12px 14px; border:1.5px solid var(--ds-line); border-radius:11px; cursor:pointer; transition:.15s; background:#fff; }
.ds-opt:hover{ border-color:#cbd5e1; }
.ds-opt.on{ border-color:var(--ds-brand); background:var(--ds-brand-50); box-shadow:0 0 0 3px rgba(5,150,105,.08); }
.ds-opt input{ margin-top:2px; accent-color:var(--ds-brand); width:16px; height:16px; flex-shrink:0; }
.ds-opt-body{ flex:1; min-width:0; }
.ds-opt-title{ font-size:13.5px; font-weight:600; color:var(--ds-ink); }
.ds-opt-desc{ font-size:12px; color:var(--ds-muted); margin-top:2px; }
.ds-opt-price{ margin-left:auto; font-size:13px; font-weight:700; color:var(--ds-brand-700); white-space:nowrap; align-self:center; }
/* inline domain search */
.ds-dsearch{ display:flex; gap:8px; flex-wrap:wrap; }
.ds-dsearch .ds-input{ flex:1; min-width:150px; }
.ds-dsearch .ds-select{ width:auto; min-width:112px; flex:0 0 auto; }
.ds-davail{ padding:11px 14px; border-radius:10px; font-size:13px; display:flex; align-items:center; gap:9px; margin-top:10px; }
.ds-davail.ok{ background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }
.ds-davail.no{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.ds-davail .v{ margin-left:auto; font-weight:700; }
/* summary rows */
.ds-sum-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:6px 0; }
.ds-sum-row .k{ color:var(--ds-muted); }
.ds-sum-row .v{ color:var(--ds-ink); font-weight:600; text-align:right; }
.ds-sum-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:11px; margin-top:7px; border-top:2px solid var(--ds-line); }
.ds-sum-total .k{ font-size:13px; font-weight:700; color:var(--ds-ink); }
.ds-sum-total .v{ font-size:19px; font-weight:800; color:var(--ds-brand-700); }

/* ── domain order (register / transfer) ─────────────────────────── */
.ds-dbanner{ background:linear-gradient(135deg,var(--ds-brand-50),#fff); border:1px solid var(--ds-line); border-radius:var(--ds-radius); padding:20px 22px; }
.ds-dbanner h3{ margin:0 0 3px; font-size:16px; font-weight:800; color:var(--ds-ink); display:flex; align-items:center; gap:8px; }
.ds-dbanner h3 i{ color:var(--ds-brand); }
.ds-dbanner p{ margin:0 0 14px; font-size:12.5px; color:var(--ds-muted); }
.ds-dbanner .ds-dsearch .ds-input{ height:44px; font-size:15px; }
.ds-dbanner .ds-dsearch .ds-btn{ height:44px; }
.ds-tldhint{ display:flex; flex-wrap:wrap; gap:5px 13px; margin-top:12px; font-size:12px; color:var(--ds-muted); }
.ds-tldhint span{ display:inline-flex; gap:5px; }
.ds-tldhint b{ color:var(--ds-brand-700); font-weight:700; }
/* primary result */
.ds-dresult{ display:flex; align-items:center; gap:12px; padding:15px 18px; border-radius:12px; border:1px solid var(--ds-line); flex-wrap:wrap; }
.ds-dresult.ok{ background:#f0fdf4; border-color:#bbf7d0; }
.ds-dresult.no{ background:#fef2f2; border-color:#fecaca; }
.ds-dresult .ico{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:15px; color:#fff; flex:0 0 auto; }
.ds-dresult.ok .ico{ background:#16a34a; }
.ds-dresult.no .ico{ background:#dc2626; }
.ds-dresult .dn{ font-size:15px; font-weight:800; color:var(--ds-ink); word-break:break-all; }
.ds-dresult .st{ font-size:12px; }
.ds-dresult.ok .st{ color:#15803d; }
.ds-dresult.no .st{ color:#b91c1c; }
.ds-dresult .pr{ margin-left:auto; text-align:right; font-size:14px; font-weight:800; color:var(--ds-brand-700); white-space:nowrap; }
/* other-TLD suggestions grid */
.ds-tldgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.ds-tldopt{ display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--ds-line); border-radius:11px; background:#fff; }
.ds-tldopt .tld{ font-size:14px; font-weight:800; color:var(--ds-ink); }
.ds-tldopt .pr{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ds-brand-700); white-space:nowrap; }
.ds-tldopt.taken{ opacity:.5; }
.ds-tldopt.taken .pr{ color:var(--ds-muted); }
/* selected domains list */
.ds-selrow{ padding:12px 0; border-bottom:1px solid var(--ds-line); }
.ds-selrow:first-child{ padding-top:0; }
.ds-selrow:last-child{ border-bottom:0; }
.ds-selrow-top{ display:flex; align-items:center; gap:8px; }
.ds-selrow .dn{ font-size:13.5px; font-weight:800; color:var(--ds-ink); word-break:break-all; }
.ds-selrow .rm{ margin-left:auto; color:var(--ds-muted); background:none; border:0; cursor:pointer; font-size:13px; padding:2px 4px; line-height:1; }
.ds-selrow .rm:hover{ color:#dc2626; }
.ds-selrow-cfg{ display:flex; align-items:center; gap:12px; margin-top:9px; flex-wrap:wrap; }
.ds-selrow-cfg .ds-select{ width:auto; min-width:96px; height:34px; padding:4px 10px; font-size:12.5px; }
.ds-selrow-cfg label{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ds-body); cursor:pointer; }
.ds-selrow .pr{ margin-left:auto; font-size:13px; font-weight:800; color:var(--ds-brand-700); white-space:nowrap; }
.ds-selrow-fixed{ font-size:12px; color:var(--ds-muted); margin-top:7px; }
/* transfer info */
.ds-tinfo{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--ds-body); background:var(--ds-brand-50); border:1px solid var(--ds-line); border-radius:10px; padding:12px 14px; }
.ds-tinfo i{ color:var(--ds-brand); margin-top:2px; }

/* ── cart / checkout / complete ─────────────────────────────────── */
.ds-lineitem{ display:flex; align-items:center; gap:13px; padding:14px 0; border-bottom:1px solid var(--ds-line); }
.ds-lineitem:first-child{ padding-top:0; }
.ds-lineitem:last-child{ border-bottom:0; padding-bottom:0; }
.ds-lineitem .li-ico{ width:40px; height:40px; border-radius:10px; background:var(--ds-brand-50); color:var(--ds-brand); display:grid; place-items:center; font-size:16px; flex:0 0 auto; }
.ds-lineitem .li-body{ min-width:0; }
.ds-lineitem .li-title{ font-size:14px; font-weight:800; color:var(--ds-ink); word-break:break-word; }
.ds-lineitem .li-meta{ font-size:12px; color:var(--ds-muted); margin-top:2px; }
.ds-lineitem .li-price{ margin-left:auto; font-size:14px; font-weight:800; color:var(--ds-ink); white-space:nowrap; }
.ds-lineitem .li-rm{ background:none; border:0; color:var(--ds-muted); cursor:pointer; font-size:14px; padding:4px 6px; flex:0 0 auto; line-height:1; }
.ds-lineitem .li-rm:hover{ color:#dc2626; }
/* promo */
.ds-promo{ display:flex; gap:8px; }
.ds-promo .ds-input{ flex:1; }
.ds-promo-msg{ font-size:12px; margin-top:8px; display:flex; align-items:center; gap:6px; }
.ds-promo-msg.ok{ color:#15803d; }
.ds-promo-msg.no{ color:#b91c1c; }
/* payment method logo chip (reuses .ds-opt) */
.ds-paylogo{ min-width:44px; height:28px; padding:0 6px; border-radius:6px; border:1px solid var(--ds-line); display:grid; place-items:center; font-size:11px; font-weight:800; letter-spacing:.02em; color:var(--ds-ink); background:#fff; flex:0 0 auto; }
/* order complete */
.ds-success{ text-align:center; padding:24px 18px 8px; }
.ds-success .chk{ width:62px; height:62px; border-radius:50%; background:#16a34a; color:#fff; display:grid; place-items:center; font-size:28px; margin:0 auto 14px; box-shadow:0 8px 20px rgba(22,163,74,.28); }
.ds-success h2{ margin:0 0 5px; font-size:20px; font-weight:800; color:var(--ds-ink); }
.ds-success p{ margin:0; font-size:13px; color:var(--ds-muted); }
.ds-ordermeta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.ds-ordermeta .m{ background:var(--ds-brand-50); border:1px solid var(--ds-line); border-radius:10px; padding:8px 16px; text-align:center; }
.ds-ordermeta .m .k{ font-size:10.5px; color:var(--ds-muted); text-transform:uppercase; letter-spacing:.05em; }
.ds-ordermeta .m .v{ font-size:15px; font-weight:800; color:var(--ds-brand-700); }
/* pay box */
.ds-paybox{ border:1px dashed var(--ds-brand); background:var(--ds-brand-50); border-radius:12px; padding:16px 18px; text-align:center; }
.ds-paybox .lbl{ font-size:12px; color:var(--ds-muted); }
.ds-vanum{ font-size:21px; font-weight:800; color:var(--ds-ink); letter-spacing:.05em; margin:5px 0 3px; font-variant-numeric:tabular-nums; word-break:break-all; }
.ds-qr{ width:148px; height:148px; margin:8px auto 4px; border-radius:10px; background:#fff; border:1px solid var(--ds-line); display:grid; place-items:center; color:var(--ds-ink); font-size:72px; }
.ds-paid{ display:flex; align-items:center; gap:8px; justify-content:center; color:#15803d; font-weight:800; font-size:15px; }

/* ── modal / dialog ─────────────────────────────────────────────── */
.ds-modal-ov{ position:fixed; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:2000; animation:dsfade .15s ease; }
@keyframes dsfade{ from{ opacity:0 } to{ opacity:1 } }
.ds-modal{ background:#fff; border-radius:16px; width:100%; max-width:480px; max-height:90vh; overflow:auto; box-shadow:0 24px 60px rgba(2,6,23,.28); animation:dspop .18s ease; }
.ds-modal.lg{ max-width:640px; }
@keyframes dspop{ from{ opacity:0; transform:translateY(10px) scale(.98) } to{ opacity:1; transform:none } }
.ds-modal-head{ display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--ds-line); position:sticky; top:0; background:#fff; border-radius:16px 16px 0 0; }
.ds-modal-head h3{ margin:0; font-size:15px; font-weight:800; color:var(--ds-ink); display:flex; align-items:center; gap:9px; }
.ds-modal-head h3 i{ color:var(--ds-brand); }
.ds-modal-x{ margin-left:auto; background:none; border:0; color:var(--ds-muted); cursor:pointer; font-size:16px; padding:4px 7px; line-height:1; border-radius:6px; }
.ds-modal-x:hover{ color:var(--ds-ink); background:var(--ds-brand-50); }
.ds-modal-body{ padding:18px 20px; }
.ds-modal-foot{ padding:13px 20px; border-top:1px solid var(--ds-line); display:flex; justify-content:flex-end; gap:8px; background:#f8fafc; border-radius:0 0 16px 16px; position:sticky; bottom:0; }
/* toggle pill for on/off management */
.ds-toggle{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; }
.ds-toggle .dot{ width:38px; height:22px; border-radius:99px; background:#cbd5e1; position:relative; transition:.15s; flex:0 0 auto; }
.ds-toggle .dot::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.ds-toggle.on .dot{ background:var(--ds-brand); }
.ds-toggle.on .dot::after{ left:18px; }

/* usage bars + quick-links + danger button (client-area detail mgmt) */
.ds-bar{ height:8px; border-radius:99px; background:var(--ds-brand-50); overflow:hidden; }
.ds-bar span{ display:block; height:100%; border-radius:99px; }
.ds-quicklinks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px; }
.ds-quicklink{ display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--ds-line); border-radius:11px; background:#fff; cursor:pointer; font-size:13px; font-weight:600; color:var(--ds-body); transition:.15s; text-align:left; }
.ds-quicklink:hover{ border-color:var(--ds-brand); color:var(--ds-brand-700); background:var(--ds-brand-50); }
.ds-quicklink i{ color:var(--ds-brand); font-size:15px; width:18px; text-align:center; }
.ds-quicklink.primary{ background:var(--ds-brand); border-color:var(--ds-brand); color:#fff !important; }
.ds-quicklink.primary i{ color:#fff; }
.ds-quicklink.primary:hover{ background:var(--ds-brand-700); }
.ds-btn.danger{ background:#fef2f2; border-color:#fecaca; color:#b91c1c !important; }
.ds-btn.danger:hover{ background:#fee2e2; color:#991b1b !important; }

/* dashboard: linkable line-item rows + alert action tones */
a.ds-lineitem{ text-decoration:none; border-radius:10px; padding-left:8px; padding-right:8px; margin-left:-8px; margin-right:-8px; transition:.12s; }
a.ds-lineitem:hover{ background:var(--ds-brand-50); }
.ds-lineitem .li-chev{ color:var(--ds-faint) !important; font-size:12px; margin-left:2px; }
.ds-action-ico.warn{ background:#fef3c7 !important; color:#b45309 !important; }
.ds-action-ico.danger{ background:#fee2e2 !important; color:#b91c1c !important; }
.ds-card-link{ margin-left:auto; font-size:12px; font-weight:700; color:var(--ds-brand) !important; text-decoration:none; white-space:nowrap; }
.ds-card-link:hover{ color:var(--ds-brand-700) !important; }

/* ── STORE / SHOP premium ───────────────────────────────────────── */
.ds-shophero{ background:linear-gradient(125deg,#0c4a6e 0%,#0e7490 32%,#059669 68%,#10b981 100%); border-radius:22px; padding:44px 38px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--ds-shadow-lg); text-align:center; }
.ds-shophero::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 82% -30%, rgba(255,255,255,.22), transparent 45%), radial-gradient(circle at 10% 130%, rgba(16,185,129,.5), transparent 40%); }
.ds-shophero > *{ position:relative; z-index:1; }
.ds-shophero .eyebrow{ display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); font-size:12px; font-weight:700; letter-spacing:.03em; margin-bottom:14px; }
.ds-shophero h1{ font-size:34px; line-height:1.12; font-weight:800; margin:0 0 10px; color:#fff !important; letter-spacing:-.02em; }
.ds-shophero h1 .hl{ background:linear-gradient(120deg,#5eead4,#22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ds-shophero p{ font-size:15px; opacity:.94; margin:0 auto 22px; max-width:560px; color:#fff !important; }
.ds-shophero-search{ display:flex; gap:8px; max-width:520px; margin:0 auto; background:#fff; padding:8px; border-radius:14px; box-shadow:0 16px 40px -14px rgba(0,0,0,.4); }
.ds-shophero-search input{ flex:1; min-width:0; border:0; outline:0; padding:0 14px; font-size:15px; color:var(--ds-ink); background:transparent; }
.ds-shophero-trust{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin-top:20px; font-size:13px; font-weight:600; }
.ds-shophero-trust span{ display:inline-flex; align-items:center; gap:7px; opacity:.95; }
.ds-shophero-trust i{ color:#4ade80; }

/* feature strip */
.ds-feats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.ds-feat{ background:#fff; border:1px solid var(--ds-line); border-radius:16px; padding:18px; display:flex; gap:13px; align-items:flex-start; box-shadow:var(--ds-shadow-md); transition:transform .16s ease, box-shadow .16s ease; }
.ds-feat:hover{ transform:translateY(-3px); box-shadow:var(--ds-shadow-lg); }
.ds-feat-ico{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:19px; color:#fff; flex:0 0 auto; box-shadow:0 8px 16px -6px rgba(15,23,42,.4); }
.ds-feat h4{ margin:0 0 3px; font-size:14px; font-weight:800; color:var(--ds-ink); }
.ds-feat p{ margin:0; font-size:12px; color:var(--ds-muted); line-height:1.5; }

/* centered section heading */
.ds-sec-head{ text-align:center; margin:8px auto 20px; max-width:600px; }
.ds-sec-head .k{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ds-brand); margin-bottom:7px; }
.ds-sec-head h2{ font-size:26px; font-weight:800; color:var(--ds-ink); margin:0 0 6px; letter-spacing:-.02em; }
.ds-sec-head p{ font-size:14px; color:var(--ds-muted); margin:0; }

/* testimonials */
.ds-testis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ds-testi{ background:#fff; border:1px solid var(--ds-line); border-radius:16px; padding:20px; box-shadow:var(--ds-shadow-md); display:flex; flex-direction:column; gap:12px; }
.ds-testi-stars{ color:#f59e0b; font-size:13px; letter-spacing:2px; }
.ds-testi-quote{ font-size:13.5px; color:var(--ds-body); line-height:1.6; flex:1; }
.ds-testi-author{ display:flex; align-items:center; gap:11px; }
.ds-testi-av{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; font-size:14px; flex:0 0 auto; }
.ds-testi-name{ font-size:13px; font-weight:800; color:var(--ds-ink); }
.ds-testi-role{ font-size:11.5px; color:var(--ds-muted); }

/* TLD price strip */
.ds-tldstrip{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ds-tldchip{ display:inline-flex; align-items:baseline; gap:8px; padding:11px 16px; background:#fff; border:1px solid var(--ds-line); border-radius:12px; box-shadow:var(--ds-shadow); transition:.15s; }
.ds-tldchip:hover{ border-color:var(--ds-brand); box-shadow:var(--ds-shadow-md); transform:translateY(-2px); }
.ds-tldchip .t{ font-size:15px; font-weight:800; color:var(--ds-brand-700); }
.ds-tldchip .p{ font-size:12px; color:var(--ds-muted); font-weight:600; }

/* CTA band */
.ds-ctaband{ background:linear-gradient(125deg,#0e7490,#059669 55%,#10b981); border-radius:20px; padding:34px; text-align:center; color:#fff; position:relative; overflow:hidden; box-shadow:var(--ds-shadow-lg); }
.ds-ctaband::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% -20%, rgba(255,255,255,.2), transparent 44%); }
.ds-ctaband > *{ position:relative; z-index:1; }
.ds-ctaband h2{ font-size:24px; font-weight:800; margin:0 0 8px; color:#fff !important; }
.ds-ctaband p{ font-size:14px; opacity:.94; margin:0 0 18px; color:#fff !important; }

/* richer plan feature list on store */
.ds-plan-mini-specs{ display:flex; flex-wrap:wrap; gap:6px; }
.ds-plan-chip{ font-size:11px; font-weight:700; color:var(--ds-brand-700); background:var(--ds-brand-50); border:1px solid var(--ds-brand-100); border-radius:7px; padding:3px 8px; }

/* guarantee / trust strip */
.ds-guarantee{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; padding:16px 18px; background:linear-gradient(180deg,#f8fafc,#fff); border:1px solid var(--ds-line); border-radius:14px; font-size:13px; font-weight:700; color:var(--ds-body); box-shadow:var(--ds-shadow); }
.ds-guarantee span{ display:inline-flex; align-items:center; gap:8px; }
.ds-guarantee i{ color:var(--ds-brand); font-size:15px; }

/* ═══════════════════════════════════════════════════════════════════
   SHOP — WHMCS standard_cart style (TEAL brand) : sidebar + order flow
   ═══════════════════════════════════════════════════════════════════ */
/* .shop scope inherits the global green brand (sky-blue -> emerald) — single source of truth in :root */
.shop-layout{ display:grid; grid-template-columns:252px minmax(0,1fr); gap:22px; align-items:start; }
@media (max-width:860px){ .shop-layout{ grid-template-columns:1fr; } }
.shop-side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:90px; }
@media (max-width:860px){ .shop-side{ position:static; } }
.shop-sidecard{ background:#fff; border:1px solid var(--ds-line); border-radius:16px; box-shadow:var(--ds-shadow-md); overflow:hidden; }
.shop-sidehead{ display:flex; align-items:center; gap:11px; padding:15px 16px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ds-muted); border-bottom:1px solid var(--ds-line-2); }
.shop-sidehead .ic{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#0ea5e9,#10b981); color:#fff; display:grid; place-items:center; font-size:15px; box-shadow:0 6px 14px -5px rgba(5,150,105,.55); }
.shop-catlist{ padding:7px; display:flex; flex-direction:column; gap:2px; }
.shop-cat{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--ds-body) !important; text-decoration:none; transition:.14s; }
.shop-cat > i{ width:18px; text-align:center; color:var(--ds-faint); font-size:14px; }
.shop-cat:hover{ background:#f6faf9; color:var(--ds-brand-700) !important; }
.shop-cat:hover > i{ color:var(--ds-brand); }
.shop-cat .chev{ margin-left:auto; color:var(--ds-faint); font-size:11px; }
.shop-cat.active{ background:var(--ds-brand-50); color:var(--ds-brand-700) !important; font-weight:800; box-shadow:inset 3px 0 0 var(--ds-brand); }
.shop-cat.active > i{ color:var(--ds-brand); }
.shop-cat.active .dot{ margin-left:auto; width:9px; height:9px; border-radius:50%; background:var(--ds-brand); box-shadow:0 0 0 3px var(--ds-brand-100); }
/* breadcrumb + title */
.shop-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:13px; color:var(--ds-muted); margin-bottom:9px; }
.shop-crumb a{ color:var(--ds-muted) !important; text-decoration:none; }
.shop-crumb a:hover{ color:var(--ds-brand-700) !important; }
.shop-crumb .sep{ color:var(--ds-faint); font-size:10px; }
.shop-crumb .cur{ color:var(--ds-ink); font-weight:600; }
.shop-title{ font-size:24px; font-weight:800; color:var(--ds-ink); margin:0 0 20px; letter-spacing:-.01em; }
/* pricing cards */
.shop-plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:1080px){ .shop-plans{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .shop-plans{ grid-template-columns:1fr; } }
.shop-plan{ background:#fff; border:1px solid var(--ds-line); border-radius:16px; padding:24px 22px; display:flex; flex-direction:column; box-shadow:var(--ds-shadow-md); position:relative; transition:transform .18s ease, box-shadow .18s ease; }
.shop-plan:hover{ transform:translateY(-4px); box-shadow:var(--ds-shadow-lg); }
.shop-plan.pop{ box-shadow:var(--ds-shadow-lg); border-color:transparent; }
.shop-plan.pop::after{ content:''; position:absolute; top:0; left:0; right:0; height:5px; border-radius:16px 16px 0 0; background:linear-gradient(90deg,#0ea5e9,#10b981); }
.shop-plan-badge{ position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; gap:5px; background:linear-gradient(135deg,#0ea5e9,#10b981); color:#fff; font-size:10.5px; font-weight:800; padding:5px 11px; border-radius:999px; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 6px 14px -5px rgba(5,150,105,.6); }
.shop-plan-ico{ width:48px; height:48px; border-radius:13px; background:var(--ds-brand-50); color:var(--ds-brand); display:grid; place-items:center; font-size:20px; margin-bottom:16px; }
.shop-plan.pop .shop-plan-ico{ background:linear-gradient(135deg,#0ea5e9,#10b981); color:#fff; box-shadow:0 8px 18px -6px rgba(5,150,105,.55); }
.shop-plan-name{ font-size:19px; font-weight:800; color:var(--ds-ink); margin-bottom:14px; }
.shop-plan-price{ display:flex; align-items:baseline; gap:6px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--ds-line-2); flex-wrap:wrap; }
.shop-plan-price .amt{ font-size:26px; font-weight:800; color:var(--ds-ink); letter-spacing:-.02em; }
.shop-plan.pop .shop-plan-price .amt{ color:var(--ds-brand); }
.shop-plan-price .cyc{ font-size:12.5px; color:var(--ds-muted); }
.shop-plan-price .old{ font-size:13px; color:var(--ds-faint); text-decoration:line-through; }
.shop-plan-feats{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:11px; flex:1; }
.shop-plan-feats li{ font-size:13px; color:var(--ds-body); display:flex; align-items:flex-start; gap:9px; }
.shop-plan-feats li i{ color:var(--ds-brand); font-size:12px; margin-top:3px; flex:0 0 auto; }
.shop-plan-feats li.bold{ font-weight:800; color:var(--ds-ink); }
.shop-plan-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; border-radius:11px; font-size:13.5px; font-weight:700; text-decoration:none; border:1.5px solid var(--ds-brand); color:var(--ds-brand) !important; background:#fff; transition:.15s; }
.shop-plan-cta:hover{ background:var(--ds-brand-50); }
.shop-plan-cta.filled{ background:linear-gradient(135deg,#0ea5e9,#10b981); color:#fff !important; border-color:transparent; box-shadow:0 8px 18px -6px rgba(5,150,105,.6); }
.shop-plan-cta.filled:hover{ opacity:.94; }

/* ── shop: order summary (RINGKASAN PESANAN) + big CTA ── */
.shop-order{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start; }
@media (max-width:900px){ .shop-order{ grid-template-columns:1fr; } }
.shop-summary{ background:#fff; border:1px solid var(--ds-line); border-radius:16px; box-shadow:var(--ds-shadow-md); overflow:hidden; position:sticky; top:90px; }
.shop-summary-head{ padding:15px 20px; text-align:center; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ds-muted); border-bottom:1px solid var(--ds-line-2); }
.shop-summary-body{ padding:18px 20px; }
.shop-sum-prod{ font-size:15px; font-weight:800; color:var(--ds-ink); }
.shop-sum-prod .g{ display:block; font-size:12px; font-weight:500; color:var(--ds-muted); font-style:italic; margin-top:2px; }
.shop-sum-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:7px 0; color:var(--ds-body); }
.shop-sum-row .v{ font-weight:600; color:var(--ds-ink); white-space:nowrap; }
.shop-sum-row.hd{ border-top:1px solid var(--ds-line-2); margin-top:8px; padding-top:12px; }
.shop-sum-total{ padding:14px 0 4px; margin-top:8px; border-top:2px solid var(--ds-line); text-align:right; }
.shop-sum-total .amt{ font-size:24px; font-weight:800; color:var(--ds-brand); display:block; letter-spacing:-.02em; }
.shop-sum-total .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ds-muted); font-weight:700; }
.shop-summary-foot{ padding:16px 20px 20px; }
.shop-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; border-radius:12px; font-size:14.5px; font-weight:800; color:#fff !important; background:linear-gradient(135deg,#0ea5e9,#10b981) !important; border:0; cursor:pointer; text-decoration:none; box-shadow:0 10px 22px -8px rgba(5,150,105,.6); transition:.15s; }
.shop-cta:hover{ opacity:.95; }
.shop-cta:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.shop-continue{ display:block; text-align:center; margin-top:12px; font-size:13px; color:var(--ds-muted) !important; text-decoration:none; }
.shop-continue:hover{ color:var(--ds-brand-700) !important; }

/* ── shop: domain selection (WHMCS) ── */
.shop-domopts{ display:flex; flex-direction:column; gap:12px; }
.shop-domopt{ border:1.5px solid var(--ds-line); border-radius:14px; background:#fff; overflow:hidden; transition:.15s; box-shadow:var(--ds-shadow); }
.shop-domopt.on{ border-color:var(--ds-brand); box-shadow:0 0 0 3px var(--ds-brand-50); }
.shop-domopt-head{ display:flex; align-items:center; gap:13px; padding:16px 18px; cursor:pointer; font-size:14px; font-weight:700; color:var(--ds-ink); }
.shop-domopt-radio{ width:24px; height:24px; border-radius:50%; border:2px solid #cbd5e1; display:grid; place-items:center; flex:0 0 auto; transition:.15s; }
.shop-domopt.on .shop-domopt-radio{ border-color:var(--ds-brand); background:var(--ds-brand); }
.shop-domopt.on .shop-domopt-radio i{ color:#fff; font-size:11px; }
.shop-domopt-body{ padding:2px 18px 18px; }
.shop-domsearch{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.shop-domsearch .pfx{ display:inline-flex; align-items:center; padding:0 15px; background:#f1f5f9; border:1px solid var(--ds-line); border-radius:10px; font-size:13px; color:var(--ds-muted); font-weight:700; }
.shop-domsearch .sld{ flex:1 1 auto; min-width:120px; width:auto !important; }
.shop-domsearch .tld{ flex:0 0 auto; width:130px !important; min-width:130px; }
.shop-domsearch .ds-input, .shop-domsearch .ds-select{ height:48px; font-size:14px; }
.shop-domresult{ border:1px dashed var(--ds-line); border-radius:16px; padding:34px 20px; text-align:center; margin-top:18px; }
.shop-domresult .r{ font-size:22px; font-weight:800; color:var(--ds-brand); margin:0 0 8px; }
.shop-domresult .r.no{ color:#dc2626; }
.shop-domresult .desc{ font-size:14px; color:var(--ds-body); }

/* ── shop: configure ── */
.shop-info{ background:var(--ds-brand-50); border-left:4px solid var(--ds-brand); border-radius:0 10px 10px 0; padding:14px 18px; font-size:13.5px; color:var(--ds-body); }
.shop-warn{ background:#fffbeb; border:1px solid #fde68a; border-radius:12px; padding:13px 18px; font-size:13px; color:#92400e; text-align:center; }
.shop-warn a{ color:var(--ds-brand) !important; font-weight:700; }
.shop-prodsum{ background:var(--ds-brand-50); border:1px solid var(--ds-brand-100); border-radius:14px; padding:18px 20px; }
.shop-prodsum h3{ margin:0 0 13px; font-size:16px; font-weight:800; color:var(--ds-ink); }
.shop-prodsum ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:9px 16px; }
@media (max-width:520px){ .shop-prodsum ul{ grid-template-columns:1fr; } }
.shop-prodsum li{ font-size:13px; color:var(--ds-body); display:flex; align-items:center; gap:9px; }
.shop-prodsum li i{ color:var(--ds-brand); font-size:12px; }
.shop-fieldlabel{ font-size:14px; font-weight:700; color:var(--ds-ink); margin-bottom:10px; }

/* ── shop: cart table ── */
.shop-carttable{ background:#fff; border:1px solid var(--ds-line); border-radius:16px; box-shadow:var(--ds-shadow-md); overflow:hidden; }
.shop-carthead{ display:flex; justify-content:space-between; padding:14px 20px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ds-muted); border-bottom:1px solid var(--ds-line-2); background:#f8fafc; }
.shop-cartrow{ display:flex; gap:14px; padding:18px 20px; border-bottom:1px solid var(--ds-line-2); align-items:flex-start; }
.shop-cartrow .info{ flex:1; min-width:0; }
.shop-cartrow .pname{ font-size:15px; font-weight:800; color:var(--ds-ink); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.shop-edit{ font-size:12px; color:var(--ds-brand) !important; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:4px; text-decoration:none; }
.shop-cartrow .meta{ display:flex; align-items:center; gap:9px; margin-top:8px; flex-wrap:wrap; }
.shop-chip{ font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--ds-brand-700); background:var(--ds-brand-50); border:1px solid var(--ds-brand-100); border-radius:6px; padding:3px 8px; }
.shop-cartrow .dom{ font-size:12.5px; color:var(--ds-muted); }
.shop-cartrow .renew{ font-size:11.5px; color:var(--ds-faint); margin-top:6px; }
.shop-cartrow .price{ text-align:right; white-space:nowrap; }
.shop-cartrow .price .amt{ font-size:15px; font-weight:800; color:var(--ds-ink); }
.shop-cartrow .price .cyc{ display:block; font-size:10px; text-transform:uppercase; color:var(--ds-muted); font-weight:700; margin-top:2px; }
.shop-cartrow .rm{ width:30px; height:30px; border-radius:8px; background:#fef2f2; color:#dc2626; border:0; cursor:pointer; display:grid; place-items:center; flex:0 0 auto; font-size:13px; }
.shop-cartrow .rm:hover{ background:#fee2e2; }
.shop-yrsel{ height:32px; padding:2px 8px; border:1px solid var(--ds-line); border-radius:8px; font-size:12px; margin-top:6px; }
.shop-promo{ padding:20px; }
.shop-promo-lbl{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ds-muted); border-bottom:2px solid var(--ds-brand); display:inline-block; padding-bottom:9px; margin-bottom:15px; }
.shop-promo-row{ display:flex; border-radius:11px; overflow:hidden; border:1px solid var(--ds-line); }
.shop-promo-row input{ flex:1; min-width:0; border:0; padding:0 14px; font-size:13px; outline:0; height:46px; }
.shop-promo-row button{ background:linear-gradient(135deg,#0ea5e9,#10b981) !important; color:#fff !important; border:0; padding:0 22px; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; }
.shop-promo-msg{ font-size:12px; margin-top:9px; font-weight:600; }
.shop-promo-msg.ok{ color:#047857; }
.shop-promo-msg.no{ color:#dc2626; }

/* ── shop: order-flow stepper + domain notes ── */
.shop-steps{ display:flex; gap:10px; margin:0 0 22px; flex-wrap:wrap; }
.shop-step{ display:flex; align-items:center; gap:9px; flex:1; min-width:150px; padding:10px 15px; border-radius:11px; background:#fff; border:1px solid var(--ds-line); font-size:13px; font-weight:700; color:var(--ds-muted); }
.shop-step .n{ width:23px; height:23px; border-radius:50%; background:var(--ds-line-2); color:var(--ds-muted); display:grid; place-items:center; font-size:11.5px; font-weight:800; flex:0 0 auto; }
.shop-step.done{ border-color:var(--ds-brand-100); background:var(--ds-brand-50); color:var(--ds-brand-700); }
.shop-step.done .n{ background:var(--ds-brand); color:#fff; }
.shop-step.cur{ border-color:var(--ds-brand); box-shadow:0 0 0 3px var(--ds-brand-50); color:var(--ds-brand-700); }
.shop-step.cur .n{ background:var(--ds-brand); color:#fff; }
.shop-domopt-note{ font-size:12.5px; color:var(--ds-muted); margin:12px 0 0; line-height:1.55; }
.shop-domopt-note i{ color:var(--ds-brand); margin-right:6px; }
.shop-domopt-note strong{ color:var(--ds-ink); font-weight:700; }

/* mobile floating action bar (order steps: domain / configure / cart) */
.shop-mobar{ display:none; }
@media (max-width:900px){
  .shop-mobar{ display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff; border-top:1px solid var(--ds-line); box-shadow:0 -6px 20px -8px rgba(15,23,42,.22); padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .shop-mobar-t{ display:flex; flex-direction:column; line-height:1.15; flex:0 0 auto; }
  .shop-mobar-t span{ font-size:10px; text-transform:uppercase; color:var(--ds-muted); font-weight:700; letter-spacing:.03em; }
  .shop-mobar-t strong{ font-size:16px; color:var(--ds-brand); font-weight:800; }
  .shop-mobar .shop-cta{ width:auto; flex:1; padding:12px 18px; }
  .shop-hide-mobile{ display:none !important; }
  .shop-main{ padding-bottom:78px; }
}

/* ── shop: checkout ── */
.shop-checkout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start; }
@media (max-width:900px){ .shop-checkout{ grid-template-columns:1fr; } }
.shop-formcard{ background:#fff; border:1px solid var(--ds-line); border-radius:16px; box-shadow:var(--ds-shadow-md); padding:22px 24px; }
.shop-formsec + .shop-formsec{ margin-top:24px; }
.shop-formsec-h{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ds-muted); border-bottom:1px solid var(--ds-line); padding-bottom:10px; margin-bottom:16px; }
.shop-formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .shop-formgrid{ grid-template-columns:1fr; } }
.shop-inp{ position:relative; }
.shop-inp > i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ds-faint); font-size:13px; }
.shop-inp input, .shop-inp select{ width:100%; height:44px !important; padding:0 14px 0 38px !important; border:1px solid var(--ds-line); border-radius:10px; font-size:13.5px; color:var(--ds-ink); outline:0; background:#fff; transition:.15s; }
.shop-inp input:focus, .shop-inp select:focus{ border-color:var(--ds-brand); box-shadow:0 0 0 3px var(--ds-brand-50); }
.shop-inp.full{ grid-column:1/-1; }
.shop-paytotal{ background:var(--ds-brand-50); border:1px solid var(--ds-brand-100); border-radius:12px; padding:15px 18px; display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.shop-paytotal .l{ font-size:13px; font-weight:700; color:var(--ds-body); }
.shop-paytotal .v{ font-size:20px; font-weight:800; color:var(--ds-brand); }
.shop-paygrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:1100px){ .shop-paygrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .shop-paygrid{ grid-template-columns:1fr; } }
.shop-pay{ display:flex; align-items:center; gap:9px; padding:11px 12px; border:1.5px solid var(--ds-line); border-radius:11px; cursor:pointer; background:#fff; transition:.15s; }
.shop-pay:hover{ border-color:#cbd5e1; }
.shop-pay.on{ border-color:var(--ds-brand); background:var(--ds-brand-50); }
.shop-pay-radio{ width:16px; height:16px; border-radius:50%; border:2px solid #cbd5e1; flex:0 0 auto; }
.shop-pay.on .shop-pay-radio{ border-color:var(--ds-brand); background:radial-gradient(circle,#059669 42%,transparent 46%); }
.shop-pay-logo{ min-width:44px; width:44px; height:27px; border-radius:5px; display:grid; place-items:center; font-size:9.5px; font-weight:800; color:#fff; flex:0 0 auto; letter-spacing:.02em; }
.shop-pay-name{ font-size:12px; font-weight:600; color:var(--ds-ink); line-height:1.25; }
.shop-summary-dark{ background:#fff; border:1px solid var(--ds-line); border-radius:16px; box-shadow:var(--ds-shadow-md); overflow:hidden; position:sticky; top:90px; }
.shop-summary-dark .hd{ background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; }
.shop-summary-dark .hd .t{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:800; }
.shop-summary-dark .hd .t .ic{ width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,#0ea5e9,#10b981); display:grid; place-items:center; font-size:14px; color:#fff; }
.shop-summary-dark .hd a{ color:#5eead4 !important; font-size:12px; font-weight:600; text-decoration:none; }
.shop-summary-dark .bd{ padding:16px 18px; }
.shop-trust{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:15px; padding-top:15px; border-top:1px solid var(--ds-line-2); }
.shop-trust span{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ds-body); font-weight:600; }
.shop-trust i{ color:var(--ds-brand); }
.shop-help{ background:var(--ds-brand-50); border:1px solid var(--ds-brand-100); border-radius:14px; padding:16px 18px; margin-top:16px; display:flex; gap:12px; align-items:flex-start; }
.shop-help .ic{ width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,#0ea5e9,#10b981); color:#fff; display:grid; place-items:center; font-size:16px; flex:0 0 auto; }
.shop-help .t{ font-size:13.5px; font-weight:800; color:var(--ds-ink); }
.shop-help .d{ font-size:12px; color:var(--ds-muted); margin-top:2px; }
.shop-help a{ color:var(--ds-brand) !important; font-weight:700; font-size:12.5px; }

/* ══════════ COMPACT CHECKOUT (co-) ══════════ */
.co-grid{ display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:20px; align-items:start; }
@media (max-width:980px){ .co-grid{ grid-template-columns:1fr; } }
.co-main{ display:flex; flex-direction:column; gap:14px; }
.co-card{ background:#fff; border:1px solid var(--ds-line); border-radius:14px; box-shadow:var(--ds-shadow-md); padding:16px 18px; }
.co-sec-h{ display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:800; color:var(--ds-ink); margin-bottom:14px; }
.co-sec-h .n{ width:23px; height:23px; border-radius:50%; background:var(--ds-grad-brand); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:800; flex:0 0 auto; }
.co-google{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px; border:1.5px solid var(--ds-line); border-radius:11px; background:#fff; font-size:13.5px; font-weight:700; color:var(--ds-ink); cursor:pointer; transition:.15s; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.co-google:hover{ background:#f8fafc; border-color:#cbd5e1; box-shadow:0 5px 14px -5px rgba(15,23,42,.16); }
.co-google.connected{ border-color:var(--ds-brand); background:var(--ds-brand-50); color:var(--ds-brand-700); cursor:default; font-weight:600; font-size:12.5px; }
.co-google.connected i{ color:var(--ds-brand); margin-left:auto; font-size:15px; }
.co-divider{ text-align:center; position:relative; margin:13px 0; }
.co-divider::before{ content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--ds-line); }
.co-divider span{ position:relative; background:#fff; padding:0 12px; font-size:11.5px; color:var(--ds-muted); }
.co-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.co-inp{ position:relative; }
.co-inp.full{ grid-column:1/-1; }
.co-inp > i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ds-faint); font-size:12.5px; }
.co-inp input, .co-inp select{ width:100%; height:42px !important; padding:0 12px 0 34px !important; border:1px solid var(--ds-line); border-radius:9px; font-size:13.5px; color:var(--ds-ink); background:#fff; outline:0; transition:.15s; }
.co-inp input:focus, .co-inp select:focus{ border-color:var(--ds-brand); box-shadow:0 0 0 3px var(--ds-brand-50); }
.co-pmgroup + .co-pmgroup{ margin-top:15px; }
.co-pmgroup-h{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ds-muted); margin-bottom:9px; }
.co-pmgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:9px; }
.co-pm{ display:flex; align-items:center; gap:9px; padding:8px 11px 8px 9px; border:1.5px solid var(--ds-line); border-radius:10px; cursor:pointer; background:#fff; transition:.15s; }
.co-pm:hover{ border-color:#cbd5e1; background:#fcfdff; }
.co-pm.on{ border-color:var(--ds-brand); background:var(--ds-brand-50); }
.co-pm input{ display:none; }
.co-pm-logo{ width:50px; height:30px; border-radius:6px; background:#fff; border:1px solid var(--ds-line-2); display:grid; place-items:center; flex:0 0 auto; padding:3px 4px; }
.co-pm-logo svg{ width:100%; height:100%; display:block; }
.co-pm-name{ font-size:11.5px; font-weight:600; color:var(--ds-ink); line-height:1.2; }
.co-pm-check{ margin-left:auto; color:var(--ds-brand); opacity:0; font-size:14px; transition:.15s; flex:0 0 auto; }
.co-pm.on .co-pm-check{ opacity:1; }
.co-terms{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--ds-body); margin-top:2px; cursor:pointer; padding:2px; }
.co-terms input{ margin-top:2px; accent-color:var(--ds-brand); width:15px; height:15px; flex:0 0 auto; }
.co-terms a{ color:var(--ds-brand); font-weight:600; }
.co-err{ font-size:12.5px; color:#dc2626; font-weight:600; margin-top:8px; display:flex; align-items:center; gap:6px; }
.co-pay-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px; border:0; border-radius:12px; background:var(--ds-grad-brand); color:#fff !important; font-size:14.5px; font-weight:800; cursor:pointer; box-shadow:0 10px 22px -8px rgba(5,150,105,.55); transition:.15s; }
.co-pay-btn:hover{ opacity:.95; }
.co-pay-btn.desk{ margin-top:6px; }
.co-side{ display:flex; flex-direction:column; gap:12px; position:sticky; top:80px; }
@media (max-width:980px){ .co-side{ position:static; } }
.co-sum{ background:#fff; border:1px solid var(--ds-line); border-radius:14px; box-shadow:var(--ds-shadow-md); overflow:hidden; }
.co-sum-h{ background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; padding:13px 16px; display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:800; }
.co-sum-h > span i{ color:#5eead4; margin-right:7px; }
.co-sum-h a{ color:#5eead4 !important; font-size:12px; font-weight:600; text-decoration:none; }
.co-sum-body{ padding:14px 16px; }
.co-sum-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-size:13px; }
.co-sum-name{ color:var(--ds-ink); font-weight:600; display:flex; flex-direction:column; min-width:0; }
.co-sum-name em{ font-style:normal; font-size:11px; color:var(--ds-muted); font-weight:500; margin-top:1px; }
.co-sum-val{ font-weight:700; color:var(--ds-ink); white-space:nowrap; }
.co-sum-line{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ds-muted); padding:5px 0; border-top:1px solid var(--ds-line-2); margin-top:3px; }
.co-sum-line.disc span:last-child{ color:#16a34a; font-weight:700; }
.co-sum-total{ display:flex; justify-content:space-between; align-items:center; padding-top:11px; margin-top:6px; border-top:2px solid var(--ds-line); }
.co-sum-total span{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ds-muted); font-weight:700; }
.co-sum-total strong{ font-size:21px; font-weight:800; color:var(--ds-brand); }
.co-trust{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; padding:13px 16px; border-top:1px solid var(--ds-line-2); background:#f8fafc; }
.co-trust span{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ds-body); font-weight:600; }
.co-trust i{ color:var(--ds-brand); }
.co-help{ display:flex; align-items:center; gap:12px; background:var(--ds-brand-50); border:1px solid var(--ds-brand-100); border-radius:12px; padding:13px 15px; }
.co-help > i{ font-size:20px; color:var(--ds-brand); flex:0 0 auto; }
.co-help strong{ display:block; font-size:13px; color:var(--ds-ink); }
.co-help a{ font-size:12.5px; color:var(--ds-brand) !important; font-weight:700; text-decoration:none; }
.co-mobar{ display:none; }
@media (max-width:980px){
  .co-mobar{ display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff; border-top:1px solid var(--ds-line); box-shadow:0 -6px 20px -8px rgba(15,23,42,.22); padding:10px 14px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .co-mobar-t{ display:flex; flex-direction:column; line-height:1.15; flex:0 0 auto; }
  .co-mobar-t span{ font-size:10px; text-transform:uppercase; color:var(--ds-muted); font-weight:700; letter-spacing:.03em; }
  .co-mobar-t strong{ font-size:17px; color:var(--ds-brand); font-weight:800; }
  .co-mobar .co-pay-btn{ width:auto; flex:1; padding:12px 18px; font-size:13.5px; }
  .co-pay-btn.desk{ display:none; }
  .co-grid{ margin-bottom:74px; }
}
@media (max-width:430px){ .co-fields{ grid-template-columns:1fr; } }

/* .shop landing inherits the global green hero/CTA (sky-blue -> emerald) — no override needed */

@media (max-width:900px){ .ds-feats{ grid-template-columns:repeat(2,1fr); } .ds-testis{ grid-template-columns:1fr; } }
@media (max-width:640px){ .ds-feats{ grid-template-columns:1fr; } .ds-shophero{ padding:32px 20px; } .ds-shophero h1{ font-size:26px; } .ds-sec-head h2{ font-size:22px; } }

/* =====================================================================
   ADMIN PANEL (/admin) — reuses ds tokens; saung design language
   ===================================================================== */
.adm{ background:#f6f8fb; }
.adm-shell{ display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100vh; }
@media (max-width:1024px){ .adm-shell{ grid-template-columns:1fr; } }
.adm-side{ display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--ds-line); position:sticky; top:0; height:100vh; }
@media (max-width:1024px){ .adm-side{ display:none; } }
.adm-side-head{ height:64px; display:flex; align-items:center; padding:0 16px; border-bottom:1px solid var(--ds-line-2); }
.adm-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.adm-brand-logo{ width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#0ea5e9,#10b981); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px; flex:0 0 auto; }
.adm-brand-name{ font-size:16px; font-weight:800; color:var(--ds-ink); white-space:nowrap; }
.adm-brand-name span{ color:var(--ds-brand); }
.adm-brand-tag{ font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; background:var(--ds-ink); color:#fff; border-radius:5px; padding:2px 6px; }
.adm-nav{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding:12px; }
.adm-nav a{ display:flex; align-items:center; gap:11px; padding:9px 13px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--ds-muted); text-decoration:none; transition:.12s; }
.adm-nav a i{ width:18px; text-align:center; font-size:14px; color:var(--ds-faint); }
.adm-nav a:hover{ background:var(--ds-brand-50); color:var(--ds-brand-700); }
.adm-nav a:hover i{ color:var(--ds-brand); }
.adm-nav a.on{ background:var(--ds-ink); color:#fff; }
.adm-nav a.on i{ color:#fff; }
.adm-side-foot{ padding:12px; border-top:1px solid var(--ds-line-2); display:flex; flex-direction:column; gap:6px; }
.adm-body{ display:flex; flex-direction:column; min-height:100vh; min-width:0; }
.adm-top{ height:64px; position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; padding:0 18px; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--ds-line); }
.adm-top-brand{ display:none; }
.adm-burger{ display:none; }
@media (max-width:1024px){ .adm-top-brand{ display:block; } .adm-burger{ display:grid; } }
.adm-icobtn{ width:38px; height:38px; border-radius:10px; border:0; background:transparent; color:var(--ds-muted); display:grid; place-items:center; cursor:pointer; font-size:16px; }
.adm-icobtn:hover{ background:#f1f5f9; }
.adm-top-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.adm-avatar{ width:36px; height:36px; border-radius:50%; background:var(--ds-ink); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px; }
.adm-top-name{ font-size:13px; font-weight:800; color:var(--ds-ink); }
.adm-main{ flex:1; padding:24px 28px; }
@media (max-width:640px){ .adm-main{ padding:16px 14px; } }
.adm-drawer{ position:fixed; inset:0; z-index:70; }
.adm-drawer-ov{ position:absolute; inset:0; background:rgba(15,23,42,.4); }
.adm-drawer-panel{ position:absolute; left:0; top:0; height:100%; width:270px; background:#fff; box-shadow:0 20px 50px rgba(2,6,23,.3); display:flex; flex-direction:column; }
.adm-stack{ display:flex; flex-direction:column; gap:20px; }
.adm-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .adm-grid-2{ grid-template-columns:1fr; } }
.adm-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.adm-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width:1100px){ .adm-kpis{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .adm-kpis{ grid-template-columns:1fr; } }
.adm-kpi-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.adm-kpi-ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:17px; flex:0 0 auto; }
.adm-kpi-ico.green{ background:var(--ds-brand-50); color:var(--ds-brand); }
.adm-kpi-ico.amber{ background:#fffbeb; color:#d97706; }
.adm-kpi-ico.sky{ background:#f0f9ff; color:#0284c7; }
.adm-kpi-ico.violet{ background:#f5f3ff; color:#7c3aed; }
.adm-kpi-ico.rose{ background:#fff1f2; color:#e11d48; }
.adm-kpi-ico.slate{ background:#f1f5f9; color:#64748b; }
.adm-badge{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:1px solid; padding:3px 10px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.adm-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7; }
.adm-badge.green{ background:var(--ds-brand-50); color:var(--ds-brand-700); border-color:var(--ds-brand-100); }
.adm-badge.amber{ background:#fffbeb; color:#b45309; border-color:#fde68a; }
.adm-badge.red{ background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.adm-badge.sky{ background:#f0f9ff; color:#0369a1; border-color:#bae6fd; }
.adm-badge.slate{ background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.adm-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:2px 0; }
.adm-search{ position:relative; max-width:340px; flex:1 1 240px; }
.adm-search i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:13px; }
.adm-search input{ width:100%; height:40px; padding:0 12px 0 34px; border:1px solid var(--ds-line); border-radius:10px; font-size:13.5px; outline:0; background:#fff; }
.adm-search input:focus{ border-color:var(--ds-brand); box-shadow:0 0 0 3px var(--ds-brand-50); }
.adm-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.adm-chip-count{ margin-left:6px; font-size:10.5px; background:rgba(0,0,0,.08); border-radius:999px; padding:1px 6px; }
.adm-table{ width:100%; }
.adm-table tbody tr.adm-click{ cursor:pointer; }
.adm-table tbody tr.adm-click:hover{ background:#f8fafc; }
.adm-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.adm-sub{ font-size:11.5px; color:var(--ds-muted); }
.adm-pager{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-top:4px; }
.adm-pager-btns{ display:flex; align-items:center; gap:8px; }
.adm-pager-num{ font-size:13px; font-weight:700; color:var(--ds-ink); }
.adm-center{ display:grid; place-items:center; gap:12px; padding:60px 0; }
.adm-spin{ width:34px; height:34px; border-radius:50%; border:4px solid var(--ds-brand-100); border-top-color:var(--ds-brand); animation:admspin .8s linear infinite; }
@keyframes admspin{ to{ transform:rotate(360deg); } }
.adm .ds-btn.block{ display:flex; width:100%; justify-content:center; }
.adm .ds-btn.sm{ padding:8px 12px; font-size:12.5px; }
.adm .ds-ci{ width:34px; height:34px; border-radius:9px; background:var(--ds-brand-50); color:var(--ds-brand); display:grid; place-items:center; font-size:14px; flex:0 0 auto; }