/* ==========================================================================
   Design System V1.0 — Stylesheet
   ========================================================================== */
:root {
  --blue-50:#f0f7ff; --blue-100:#e6f1ff; --blue-200:#bae0ff; --blue-300:#91caff;
  --blue-400:#69b1ff; --blue-500:#2492ff; --blue-600:#1d75cc; --blue-700:#165699;
  --blue-800:#0e3866; --blue-900:#071c33;

  --n-0:#fff; --n-50:#fafafa; --n-100:#f5f5f5; --n-200:#e9ebf8; --n-300:#d9d9d9;
  --n-400:#bababa; --n-500:#8e98a8; --n-600:#717171; --n-700:#404040;
  --n-800:#262626; --n-900:#1d1d1d; --n-1000:#070c12;

  --success:#1fa101; --success-bg:#f0faf5;
  --warning:#faad14; --warning-bg:#fff7e6;
  --error:#e43131;   --error-bg:#fff1f0;
  --info:#2492ff;    --info-bg:#e9f1ff;

  --ff:"Roboto","PingFang HK","PingFang SC","Microsoft JhengHei","Heiti TC",system-ui,sans-serif;
  --ff-zh:"PingFang HK","PingFang SC","Microsoft JhengHei",system-ui,sans-serif;
  --ff-en:"Roboto","Inter",system-ui,sans-serif;
  --ff-mono:"Roboto Mono",ui-monospace,"SFMono-Regular",monospace;

  --r-sm:4px; --r-md:6px; --r-lg:12px; --r-xl:22px;
  --shadow-1:0 1px 2px rgba(0,0,0,.06);
  --shadow-2:0 2px 8px rgba(0,0,0,.06);
  --shadow-3:0 8px 24px rgba(0,0,0,.08);
  --shadow-4:0 16px 32px rgba(0,0,0,.12);
  --dur-fast:120ms; --dur-base:200ms;
  --ease:cubic-bezier(.16,1,.3,1);

  --side-w:240px;
  --side-w-collapsed:0px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--ff);color:var(--n-900);background:#f1f3f5;-webkit-font-smoothing:antialiased}
a{color:var(--blue-500);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
code{font-family:var(--ff-mono);font-size:12px;background:var(--n-100);padding:2px 6px;border-radius:4px;color:var(--n-800)}

/* ---------- App shell ---------- */
.ds-app{display:grid;grid-template-rows:auto auto 1fr;min-height:100vh}

/* Full-width top navbar */
.ds-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;height:64px;padding:0 24px;background:#fff;border-bottom:1px solid var(--n-200);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.ds-topbar__logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--blue-400),var(--blue-600));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--ff-en);font-weight:700;font-size:20px;box-shadow:0 4px 12px rgba(36,146,255,.35);flex-shrink:0}
.ds-topbar__brand{display:flex;flex-direction:column;gap:0;line-height:1.1}
.ds-topbar__title{font-size:18px;font-weight:700;color:var(--n-900);letter-spacing:.02em}
.ds-topbar__sub{font-family:var(--ff-en);font-size:11px;color:var(--n-500);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.ds-topbar__spacer{flex:1}

/* Account / logout area */
.ds-account{display:flex;align-items:center;gap:12px;flex-shrink:0}
.ds-account__admin{font-size:13px;font-weight:600;color:var(--blue-600);padding:6px 12px;border:1px solid var(--blue-200);border-radius:8px;transition:background var(--dur-fast) var(--ease)}
.ds-account__admin:hover{background:var(--blue-50);text-decoration:none}
.ds-account__email{font-size:12.5px;color:var(--n-500);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-account__logout{height:32px;padding:0 14px;border:1px solid var(--n-200);border-radius:8px;background:#fff;color:var(--n-700);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.ds-account__logout:hover{border-color:var(--n-400);background:var(--n-50);color:var(--n-900)}

/* Body = sidebar + main */
.ds-app__body{display:grid;grid-template-columns:var(--side-w) 1fr;align-items:stretch}
.ds-app.is-collapsed .ds-app__body{grid-template-columns:0 1fr}
.ds-app.is-collapsed .ds-side{width:0;overflow:hidden;border-right:none}

/* ---------- Sidebar ---------- */
/* ---------- Sidebar ---------- */
.ds-side{position:sticky;top:114px;height:calc(100vh - 114px);overflow-y:auto;display:flex;flex-direction:column;background:var(--n-0);border-right:1px solid var(--n-200);width:var(--side-w);transition:width var(--dur-base) var(--ease);z-index:5}
.ds-side__brand{display:flex;align-items:center;gap:12px;padding:20px 18px;border-bottom:1px solid var(--n-200);position:relative}
.ds-side__logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--blue-400),var(--blue-600));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--ff-en);font-weight:700;font-size:18px;box-shadow:0 4px 12px rgba(36,146,255,.35);flex-shrink:0}
.ds-side__title{font-weight:600;font-size:15px;line-height:1.3;white-space:nowrap}
.ds-side__sub{font-family:var(--ff-en);font-size:11px;color:var(--n-500);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.is-collapsed .ds-side__toggle{transform:translateY(-50%) rotate(180deg)}

.ds-nav{padding:14px 12px;overflow-y:auto;flex:1}
.ds-nav__group{margin-bottom:4px}
.ds-nav__label{display:flex;align-items:center;gap:8px;padding:10px 12px 8px;font-family:var(--ff-en);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-500);cursor:pointer;user-select:none;border-radius:6px}
.ds-nav__label:hover{background:var(--blue-50)}
.ds-nav__label::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--blue-500);flex-shrink:0}
.ds-nav__label-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-nav__group-chev{transition:transform var(--dur-fast) var(--ease);color:var(--blue-500);flex-shrink:0}
.ds-nav__group.is-collapsed .ds-nav__group-chev{transform:rotate(-90deg)}
.ds-nav__items{display:flex;flex-direction:column;overflow:hidden;transition:max-height var(--dur-base) var(--ease)}
.ds-nav__group.is-collapsed .ds-nav__items{max-height:0!important}
.ds-nav__item{display:flex;align-items:baseline;gap:6px;padding:7px 14px 7px 24px;font-size:13px;color:var(--n-700);border-radius:6px;line-height:1.4;white-space:nowrap;overflow:hidden}
.ds-nav__item:hover{background:var(--blue-50);color:var(--blue-600);text-decoration:none}
.ds-nav__item.is-active{background:var(--blue-50);color:var(--blue-600);font-weight:500}
.ds-nav__item-en{font-family:var(--ff-en);font-weight:500}
.ds-nav__item-zh{font-size:11.5px;color:var(--n-500)}
.ds-nav__item.is-active .ds-nav__item-zh{color:var(--blue-500)}
.ds-nav__item-mark{display:none}

/* Nested sub-items inside Components groups */
.ds-nav__item-parent{display:flex;align-items:center;justify-content:space-between;padding:7px 10px 7px 24px;border-radius:6px;cursor:pointer}
.ds-nav__item-parent:hover{background:var(--blue-50)}
.ds-nav__item-parent.is-active-parent{background:var(--blue-50)}
.ds-nav__item-parent .ds-nav__item{padding:0;flex:1}
.ds-nav__item-parent .ds-nav__item:hover{background:transparent}
.ds-nav__item-parent .ds-nav__sub-chev{padding:4px;cursor:pointer;color:var(--n-500);display:inline-flex;border-radius:4px;transition:transform var(--dur-fast) var(--ease)}
.ds-nav__item-parent .ds-nav__sub-chev:hover{background:rgba(0,0,0,.05);color:var(--blue-500)}
.ds-nav__item-parent.is-open .ds-nav__sub-chev{transform:rotate(90deg);color:var(--blue-500)}
.ds-nav__subs{display:flex;flex-direction:column;overflow:hidden;transition:max-height var(--dur-base) var(--ease)}
.ds-nav__sub{display:flex;align-items:baseline;gap:6px;padding:6px 14px 6px 44px;font-size:12.5px;color:var(--n-600);border-radius:6px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-nav__sub:hover{background:var(--blue-50);color:var(--blue-600);text-decoration:none}
.ds-nav__sub.is-active{background:var(--blue-50);color:var(--blue-600);font-weight:500}
.ds-nav__sub-en{font-family:var(--ff-en);font-weight:500}
.ds-nav__sub-zh{font-size:11px;color:var(--n-500)}
.ds-nav__sub.is-active .ds-nav__sub-zh{color:var(--blue-500)}

.ds-main{min-width:0;background:#f1f3f5;display:flex;flex-direction:column}

/* Topbar toggle button */
.ds-topbar__toggle{width:34px;height:34px;border-radius:8px;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--n-700);transition:background var(--dur-fast) var(--ease)}
.ds-topbar__toggle:hover{background:var(--n-100);color:var(--blue-500)}

/* ---------- Breadcrumb (own row below topbar) ---------- */
.ds-crumb{position:sticky;top:64px;z-index:25;display:flex;align-items:center;gap:8px;padding:12px 28px;background:#fff;border-bottom:1px solid var(--n-200);font-size:13px;min-height:50px}
.ds-crumb__num{font-family:var(--ff-en);font-weight:700;color:var(--blue-500);font-size:14px}
.ds-crumb a.ds-crumb__link{color:var(--n-700);font-weight:500;text-decoration:none;display:inline-flex;align-items:baseline;gap:6px;padding:4px 6px;border-radius:4px;transition:background var(--dur-fast) var(--ease)}
.ds-crumb a.ds-crumb__link:hover{background:var(--blue-50);color:var(--blue-600)}
.ds-crumb a.ds-crumb__link .ds-crumb__zh{color:var(--n-500);font-weight:400;font-size:12.5px}
.ds-crumb a.ds-crumb__link:hover .ds-crumb__zh{color:var(--blue-500)}
.ds-crumb__sep{color:var(--n-400)}
.ds-crumb__current{color:var(--n-900);font-weight:600;display:inline-flex;align-items:baseline;gap:6px;padding:4px 6px}
.ds-crumb__current .ds-crumb__zh{color:var(--n-500);font-weight:400;font-size:12.5px}

/* sidebar 上方 Code 切換按鈕 */
.ds-side__code-row{padding:14px 16px 6px;display:flex}
.ds-side__code-row .ds-crumb__code{width:100%;justify-content:center}
.ds-crumb__code{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;border:1px solid var(--n-200);background:#fff;color:var(--n-700);font-family:var(--ff-mono);font-size:12.5px;font-weight:500;cursor:pointer;transition:all var(--dur-fast) var(--ease);white-space:nowrap}
.ds-crumb__code:hover{border-color:var(--blue-400);background:var(--blue-50);color:var(--blue-600)}
.ds-crumb__code.is-on{background:var(--n-900);border-color:var(--n-900);color:#fff}
.ds-crumb__code.is-on:hover{background:var(--n-800);border-color:var(--n-800)}

/* ---------- Routing: show only active section + card ---------- */
.ds-section{display:none;padding:20px 20px 48px;background:transparent}
.ds-section.is-active{display:block}
.ds-section__title{display:none}    /* legacy big header — hidden */
.ds-card{display:none}
.ds-card.is-active{display:block}

/* ---------- White card ---------- */
.ds-card{background:#fff;border-radius:14px;padding:28px 28px 32px;box-shadow:var(--shadow-1);border:1px solid var(--n-200)}
/* Flat 模式：移除卡片外框，讓 Code 全頁顯示 */
.ds-card--flat{background:transparent;border:none;box-shadow:none;padding:0}
.ds-card__head{display:flex;gap:12px;margin-bottom:28px;align-items:flex-start}
.ds-card__bar{width:4px;border-radius:2px;background:var(--blue-500);align-self:stretch}
.ds-card__title{font-family:var(--ff-en);font-size:24px;font-weight:700;color:var(--blue-500);letter-spacing:.02em;line-height:1.1}
.ds-card__ver{font-size:13px;font-weight:500;color:var(--n-700);margin-top:6px;font-family:var(--ff-zh)}
.ds-card__intro{margin:-12px 0 28px;padding:14px 18px;background:var(--blue-50);border-radius:8px;font-size:13.5px;line-height:1.7;color:var(--n-800);white-space:pre-wrap}

.ds-h2{font-size:20px;font-weight:600;color:var(--n-900);margin:32px 0 8px;line-height:1.3}
.ds-h2:first-child{margin-top:0}
.ds-h3{font-size:15px;font-weight:600;color:var(--n-800);margin:24px 0 10px}
.ds-desc{font-size:13.5px;line-height:1.7;color:var(--n-600);margin:0 0 16px;max-width:780px}

.ds-grid{display:grid;gap:14px}
.ds-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ds-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ds-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ds-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.ds-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}

.ds-demo{background:var(--n-50);border:1px solid var(--n-200);border-radius:10px;padding:20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ds-demo--col{flex-direction:column;align-items:flex-start}
.ds-demo--center{justify-content:center;align-items:center}

.ds-spec{width:100%;border-collapse:collapse;font-size:13px}
.ds-spec th{text-align:left;font-family:var(--ff-en);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#fff;padding:12px 14px;background:var(--n-900);border-bottom:1px solid var(--n-900)}
.ds-spec td{padding:14px;border-bottom:1px solid var(--n-200);vertical-align:middle}
.ds-spec tr:last-child td{border-bottom:none}

.ds-cap{font-size:12px;color:var(--n-500)}

.ds-pill{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:11px;font-family:var(--ff-en);font-size:11px;font-weight:500;background:var(--blue-50);color:var(--blue-600)}

/* Variable name / value pills — Figma 樣式 (icy blue name + soft grey value) */
.ds-vp{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;font-family:var(--ff-mono);font-size:12.5px;line-height:1.4;letter-spacing:.01em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:filter 120ms,box-shadow 120ms,transform 60ms;user-select:none}
.ds-vp:hover{filter:brightness(0.96);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.ds-vp:active{transform:translateY(0.5px)}
.ds-vp--muted{cursor:default}
.ds-vp--muted:hover{filter:none;box-shadow:none}

/* Copy toast */
.ds-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--n-900);color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;font-family:var(--ff);box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:9999;opacity:0;pointer-events:none;transition:opacity 180ms ease,transform 180ms ease;display:inline-flex;align-items:center;gap:8px;max-width:480px}
.ds-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
.ds-toast__icon{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--success);color:#fff;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.ds-toast__text{font-family:var(--ff-mono);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-vp--name{background:#eaf2ff;color:#1d75cc;border:1px solid #cfe0ff}
.ds-vp--name-custom{background:#eaf2ff;color:#1d75cc;border:1px solid #cfe0ff}
.ds-vp--path{background:#f8fafc;color:#475569;border:1px solid #e2e8f0}
.ds-vp--custom{background:#eaf2ff;color:#1d75cc;border:1px solid #cfe0ff}
.ds-vp--value{background:#fafafa;color:var(--n-800);border:1px solid #e5e7eb;font-weight:500}
.ds-vp--muted{background:transparent;color:var(--n-400);border:none;font-style:italic;padding-left:0;padding-right:0}
.ds-vp--wrap{white-space:normal;word-break:break-all;display:inline-block}
.ds-pill--success{background:var(--success-bg);color:var(--success)}
.ds-pill--error{background:var(--error-bg);color:var(--error)}
.ds-pill--warn{background:var(--warning-bg);color:#c97f00}
.ds-pill--n{background:var(--n-100);color:var(--n-700)}

.ds-nav::-webkit-scrollbar{width:6px}
.ds-nav::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:3px}

.ds-todo{padding:28px 32px;background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f5f5f5 10px,#f5f5f5 20px);border:1px dashed var(--n-300);border-radius:12px;color:var(--n-600);font-size:13px;line-height:1.7}
.ds-todo strong{color:var(--n-900)}

/* button real */
.b{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;font-size:14px;font-weight:500;border-radius:6px;border:1px solid transparent;cursor:pointer;font-family:var(--ff);transition:all var(--dur-fast) var(--ease);white-space:nowrap}
.b--filled{background:var(--blue-500);color:#fff}
.b--filled:hover{background:var(--blue-600)}
.b--filled:active{background:var(--blue-700)}
.b--toner{background:var(--blue-50);color:var(--blue-600)}
.b--toner:hover{background:var(--blue-100)}
.b--outline{background:#fff;color:var(--blue-500);border-color:var(--blue-500)}
.b--outline:hover{background:var(--blue-50)}
.b--ghost{background:transparent;color:var(--n-700)}
.b--ghost:hover{background:var(--n-100)}
.b--danger{background:var(--error);color:#fff}
.b--danger:hover{background:#c91e1e}
.b--sm{height:28px;padding:0 12px;font-size:13px}
.b--lg{height:44px;padding:0 20px;font-size:15px}

/* Interactive helpers */
.ds-clickable{cursor:pointer;user-select:none;transition:all var(--dur-fast) var(--ease)}

/* Collapse component */
.ds-collapse{border:1px solid var(--n-200);border-radius:8px;overflow:hidden;background:#fff}
.ds-collapse__item+.ds-collapse__item{border-top:1px solid var(--n-200)}
.ds-collapse__head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;font-weight:500;font-size:14px;color:var(--n-800)}
.ds-collapse__head:hover{background:var(--n-50)}
.ds-collapse__chev{transition:transform var(--dur-fast) var(--ease);color:var(--n-500)}
.ds-collapse__item.is-open .ds-collapse__chev{transform:rotate(90deg);color:var(--blue-500)}
.ds-collapse__body{padding:0 16px 16px;font-size:13px;color:var(--n-600);line-height:1.7}

/* Dropdown menu */
.ds-menu{background:#fff;border:1px solid var(--n-200);border-radius:8px;box-shadow:var(--shadow-3);padding:6px;min-width:180px}
.ds-menu__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;font-size:13px;color:var(--n-800);cursor:pointer}
.ds-menu__item:hover{background:var(--blue-50);color:var(--blue-600)}
.ds-menu__item.is-active{background:var(--blue-50);color:var(--blue-600);font-weight:500}
.ds-menu__sep{height:1px;background:var(--n-100);margin:4px 0}

/* Tooltip */
.ds-tip{position:relative;display:inline-block}
.ds-tip__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--n-900);color:#fff;font-size:12px;padding:6px 10px;border-radius:6px;white-space:nowrap;pointer-events:none}
.ds-tip__bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--n-900)}

/* Timeline */
.ds-timeline{display:flex;flex-direction:column;gap:0;padding-left:8px}
.ds-timeline__row{display:flex;gap:14px;position:relative;padding-bottom:18px}
.ds-timeline__row::before{content:"";position:absolute;left:5px;top:14px;bottom:-4px;width:2px;background:var(--n-200)}
.ds-timeline__row:last-child::before{display:none}
.ds-timeline__dot{width:12px;height:12px;border-radius:50%;background:var(--blue-500);margin-top:4px;flex-shrink:0;border:2px solid #fff;box-shadow:0 0 0 2px var(--blue-500);z-index:1}
.ds-timeline__dot--n{background:var(--n-400);box-shadow:0 0 0 2px var(--n-400)}
.ds-timeline__dot--ok{background:var(--success);box-shadow:0 0 0 2px var(--success)}
.ds-timeline__dot--err{background:var(--error);box-shadow:0 0 0 2px var(--error)}
.ds-timeline__body{flex:1;font-size:13px;color:var(--n-700);line-height:1.6}
.ds-timeline__title{font-weight:500;color:var(--n-900);margin-bottom:2px}
.ds-timeline__time{font-size:12px;color:var(--n-500);margin-top:2px}