zark-design 1.0.0 → 3.0.0

package/templates/jsx/components.css

@@ -0,0 +1,740 @@
+/* ============================================================
+   ZARK DESIGN SYSTEM — COMPONENTS
+   v3 · Sistemas/Apps · 2026
+   Importe APÓS tokens.css.
+   ============================================================ */
+
+/* ============================================================
+   PRIMITIVES
+   ============================================================ */
+
+/* ---------- BUTTON ---------- */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: 6px;
+  height: 32px; padding: 0 12px;
+  font-size: var(--fs-md); font-weight: 500;
+  font-family: var(--font-sans);
+  border: 1px solid transparent;
+  border-radius: var(--r-md);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background var(--t-fast) var(--ease-out),
+              color var(--t-fast) var(--ease-out),
+              box-shadow var(--t-fast);
+}
+.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
+.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
+
+.btn-xs { height: 22px; padding: 0 8px; font-size: var(--fs-xs); border-radius: var(--r-sm); gap: 4px; }
+.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-sm); border-radius: var(--r-md); }
+.btn-md { height: 32px; padding: 0 12px; font-size: var(--fs-md); border-radius: var(--r-md); }
+.btn-lg { height: 40px; padding: 0 16px; font-size: var(--fs-base); border-radius: var(--r-lg); gap: 8px; }
+.btn-full { width: 100%; }
+
+.btn-primary {
+  background: var(--brand-600); color: #fff;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(168, 53, 8, 0.18);
+}
+.btn-primary:hover { background: var(--brand-700); }
+.btn-secondary {
+  background: var(--surface); color: var(--ink-700);
+  border-color: var(--line-300);
+  box-shadow: var(--shadow-xs);
+}
+.btn-secondary:hover { background: var(--paper); }
+.btn-soft       { background: var(--brand-50);  color: var(--brand-700); }
+.btn-soft:hover { background: var(--brand-100); }
+.btn-ghost      { background: transparent;       color: var(--ink-600); }
+.btn-ghost:hover{ background: var(--ink-50); }
+.btn-danger     { background: var(--surface);    color: var(--danger-700); border-color: var(--line-300); }
+.btn-danger:hover{ background: var(--danger-50); }
+
+.btn-icon-only { padding: 0; width: 32px; }
+.btn-icon-only.btn-sm { width: 28px; }
+.btn-icon-only.btn-xs { width: 22px; }
+
+.spinner {
+  width: 14px; height: 14px;
+  border: 1.5px solid rgba(255,255,255,0.4);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: zk-spin 0.8s linear infinite;
+}
+
+/* ---------- INPUT ---------- */
+.input {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 36px; padding: 0 12px;
+  background: var(--surface);
+  border: 1px solid var(--line-300);
+  border-radius: var(--r-lg);
+  width: 100%;
+  transition: box-shadow var(--t-fast), border-color var(--t-fast);
+}
+.input:focus-within { box-shadow: var(--ring-focus); border-color: var(--brand-400); }
+.input.invalid { border-color: var(--danger-500); }
+.input.invalid:focus-within { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); }
+.input-sm { height: 28px; padding: 0 8px; font-size: var(--fs-sm); }
+.input-md { height: 36px; }
+.input-lg { height: 44px; padding: 0 14px; font-size: var(--fs-base); }
+.input input {
+  flex: 1; border: none; outline: none; background: transparent;
+  font-size: var(--fs-md); color: var(--ink-700);
+  font-family: var(--font-sans); min-width: 0;
+}
+.input.mono input { font-family: var(--font-mono); }
+.input .ico    { color: var(--ink-300); display: inline-flex; }
+.input .suffix { color: var(--ink-300); display: inline-flex; align-items: center; gap: 4px; }
+
+/* ---------- URL INPUT FULL (search-style, full width) ---------- */
+.url-input-full {
+  display: flex; align-items: center; width: 100%; max-width: 520px; height: 44px;
+  background: var(--surface);
+  border: 1px solid var(--line-300);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+.url-input-full .scheme {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 0 14px; height: 100%;
+  color: var(--ink-400); font-family: var(--font-mono); font-size: var(--fs-sm);
+  border-right: 1px solid var(--line-200);
+}
+.url-input-full input {
+  flex: 1; border: none; outline: none; background: transparent;
+  padding: 0 16px; font-size: var(--fs-md); color: var(--ink-700);
+  font-family: var(--font-mono);
+}
+
+/* ---------- TAG (tone variants) ---------- */
+.tag {
+  display: inline-flex; align-items: center; gap: 4px;
+  height: 22px; padding: 0 8px;
+  font-size: var(--fs-xs); font-weight: 500;
+  font-family: var(--font-mono);
+  letter-spacing: var(--ls-wide);
+  text-transform: uppercase;
+  border-radius: var(--r-sm);
+  background: var(--ink-50); color: var(--ink-500);
+}
+.tag-xs { height: 18px; padding: 0 6px; font-size: var(--fs-2xs); }
+.tag-sm { height: 22px; padding: 0 8px; font-size: var(--fs-xs); }
+.tag-md { height: 26px; padding: 0 10px; font-size: var(--fs-sm); }
+.tag-square  { border-radius: var(--r-xs); }
+.tag-ember   { background: var(--brand-50);   color: var(--brand-700); }
+.tag-mono    { background: var(--tag-bg);     color: var(--tag-fg); }
+.tag-success { background: var(--success-50); color: var(--success-700); }
+.tag-warning { background: var(--warning-50); color: var(--warning-700); }
+.tag-danger  { background: var(--danger-50);  color: var(--danger-700); }
+.tag-info    { background: var(--info-50);    color: var(--info-700); }
+
+/* ---------- TAG-DOT (status / priority / space, with leading dot) ---------- */
+.tag-dot {
+  display: inline-flex; align-items: center; gap: 4px;
+  height: 22px; padding: 0 8px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  letter-spacing: var(--ls-wide);
+  text-transform: uppercase;
+  border-radius: var(--r-sm);
+  white-space: nowrap;
+}
+.tag-dot::before {
+  content: '';
+  width: 6px; height: 6px; border-radius: var(--r-xs);
+  background: currentColor; opacity: 0.85;
+}
+
+/* Status — 5 estados base */
+.s-todo     { background: #fff8e6; color: #9a6500; }
+.s-progress { background: var(--brand-50);   color: var(--brand-700); }
+.s-review   { background: var(--info-50);    color: var(--info-700); }
+.s-done     { background: var(--success-50); color: var(--success-700); }
+.s-canceled { background: var(--ink-50);     color: var(--ink-500); }
+/* Modificadores */
+.s-overdue  { background: var(--danger-50);  color: var(--danger-700); }
+.s-paused   { background: var(--warning-50); color: var(--warning-700); }
+.s-followup { background: var(--brand-50);   color: var(--brand-700); }
+
+/* Prioridade */
+.p-urgent { background: var(--danger-50);  color: var(--danger-700); }
+.p-high   { background: var(--warning-50); color: var(--warning-700); }
+.p-med    { background: #fff8e6;           color: #9a6500; }
+.p-low    { background: var(--ink-50);     color: var(--ink-500); }
+
+/* Space/Cliente */
+.sp { font-weight: 600; }
+.sp-zark    { background: var(--space-zark-soft);    color: var(--space-zark); }
+.sp-allsec  { background: var(--space-allsec-soft);  color: var(--space-allsec); }
+.sp-vipcar  { background: var(--space-vipcar-soft);  color: var(--space-vipcar); }
+.sp-limppe  { background: var(--space-limppe-soft);  color: var(--space-limppe); }
+.sp-gerais  { background: var(--space-gerais-soft);  color: var(--space-gerais); }
+.sp-mixshop { background: var(--space-mixshop-soft); color: var(--space-mixshop); }
+.sp-vipseg  { background: var(--space-vipseg-soft);  color: var(--space-vipseg); }
+
+/* ---------- BADGE (notification counter) ---------- */
+.badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 18px; height: 18px; padding: 0 5px;
+  background: var(--brand-500); color: #fff;
+  font-size: var(--fs-2xs); font-weight: 600;
+  border-radius: var(--r-sm);
+}
+.badge-ink { background: var(--ink-600); }
+
+/* ---------- TOGGLE (square switch) ---------- */
+.toggle {
+  width: 36px; height: 20px; padding: 2px;
+  border-radius: var(--r-sm);
+  background: var(--ink-200);
+  border: none; cursor: pointer; position: relative;
+  transition: background var(--t-base) var(--ease-out);
+}
+.toggle.on { background: var(--brand-500); }
+.toggle .knob {
+  position: absolute; top: 2px; left: 2px;
+  width: 16px; height: 16px; border-radius: var(--r-xs);
+  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.18);
+  transition: left var(--t-base) var(--ease-out);
+}
+.toggle.on .knob { left: 18px; }
+.toggle-sm { width: 28px; height: 16px; }
+.toggle-sm .knob { width: 12px; height: 12px; }
+.toggle-sm.on .knob { left: 14px; }
+
+/* ---------- SEGMENTED ---------- */
+.segmented {
+  display: inline-flex; padding: 3px; gap: 2px;
+  background: var(--ink-50);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-lg);
+}
+.segmented button {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 28px; padding: 0 12px;
+  font-size: var(--fs-sm); font-weight: 500;
+  color: var(--ink-400);
+  background: transparent;
+  border: none; cursor: pointer;
+  border-radius: var(--r-md);
+  transition: all var(--t-fast);
+}
+.segmented button.active {
+  color: var(--ink-700); font-weight: 600;
+  background: var(--surface);
+  box-shadow: var(--shadow-xs), 0 0 0 1px var(--line-200);
+}
+
+/* ---------- CHIP (filter) ---------- */
+.chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
+.chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 28px; padding: 0 12px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  letter-spacing: var(--ls-wide);
+  text-transform: uppercase;
+  color: var(--ink-500);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  transition: all var(--t-fast);
+}
+.chip:hover  { background: var(--ink-50); color: var(--ink-700); }
+.chip.active { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
+.chip .count { font-family: var(--font-mono); font-size: var(--fs-2xs); color: inherit; opacity: 0.7; }
+
+/* ---------- AVATAR ---------- */
+.avatar {
+  width: 24px; height: 24px;
+  background: var(--brand-500); color: #fff;
+  border-radius: 50%;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 11px; font-weight: 600;
+  font-family: var(--font-display);
+  flex-shrink: 0;
+}
+.avatar-sq { border-radius: var(--r-sm); }
+.av-space {
+  width: 24px; height: 24px;
+  border-radius: var(--r-sm);
+  display: inline-flex; align-items: center; justify-content: center;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 11px;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+/* ---------- KBD ---------- */
+.kbd {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 18px; height: 18px; padding: 0 4px;
+  font-family: var(--font-mono); font-size: var(--fs-2xs);
+  color: var(--ink-400);
+  background: var(--surface);
+  border: 1px solid var(--line-200); border-bottom-width: 2px;
+  border-radius: var(--r-xs);
+}
+
+/* ============================================================
+   LAYOUTS / PANELS
+   ============================================================ */
+
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+.panel-head {
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--line-100);
+  display: flex; align-items: center; justify-content: space-between;
+  background: var(--paper);
+}
+.panel-title  { font-size: var(--fs-md); font-weight: 600; color: var(--ink-600); }
+.panel-kicker {
+  font-family: var(--font-mono);
+  font-size: var(--fs-2xs);
+  letter-spacing: var(--ls-wider);
+  text-transform: uppercase;
+  color: var(--ink-300);
+}
+.panel-body { padding: 24px; }
+.panel-body.flush { padding: 0; }
+
+.section {
+  border-top: 1px solid var(--line-200);
+  padding: 80px 64px;
+}
+.section:first-child { border-top: none; }
+.section-inner { max-width: var(--container-max); margin: 0 auto; }
+.section-header {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) 1fr;
+  gap: 64px;
+  margin-bottom: 56px;
+  align-items: start;
+}
+.eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  letter-spacing: var(--ls-widest);
+  text-transform: uppercase;
+  color: var(--brand-600);
+  margin-bottom: 14px;
+}
+.section h2 {
+  font-family: var(--font-display);
+  font-size: var(--fs-3xl);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--ls-tight);
+  margin: 0;
+  color: var(--ink-700);
+  font-weight: 700;
+}
+.section-desc {
+  margin: 0;
+  color: var(--ink-400);
+  font-size: var(--fs-lg);
+  line-height: 1.55;
+  max-width: 640px;
+}
+
+.spec {
+  display: flex; justify-content: space-between; gap: 16px;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--line-200);
+  font-size: var(--fs-sm);
+}
+.spec:last-child { border-bottom: none; }
+.spec .l { color: var(--ink-400); }
+.spec .v { color: var(--ink-600); font-family: var(--font-mono); }
+
+.divider {
+  height: 1px; background: var(--line-200);
+  margin: 24px 0;
+}
+
+/* ============================================================
+   APP PATTERNS
+   ============================================================ */
+
+/* ---------- STAT CARD ---------- */
+.stat {
+  background: var(--surface);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-lg);
+  padding: 18px;
+  display: flex; flex-direction: column; gap: 12px;
+  transition: border-color var(--t-fast);
+}
+.stat:hover { border-color: var(--line-300); }
+.stat.is-critical { border-color: var(--danger-500); background: var(--danger-50); }
+.stat-head { display: flex; align-items: center; justify-content: space-between; }
+.stat-label {
+  font-family: var(--font-mono);
+  font-size: var(--fs-2xs);
+  letter-spacing: var(--ls-wider);
+  text-transform: uppercase;
+  color: var(--ink-400);
+  font-weight: 500;
+}
+.stat-icon {
+  width: 28px; height: 28px;
+  border-radius: var(--r-md);
+  display: inline-flex; align-items: center; justify-content: center;
+  color: #fff;
+}
+.stat-icon.green  { background: var(--success-500); }
+.stat-icon.orange { background: var(--brand-500); }
+.stat-icon.blue   { background: var(--info-500); }
+.stat-icon.purple { background: #7c3aed; }
+.stat-icon.red    { background: var(--danger-500); }
+.stat-icon.ghost  { background: var(--ink-50); color: var(--ink-500); }
+.stat-value {
+  font-family: var(--font-sans);
+  font-size: var(--fs-3xl);
+  font-weight: 700;
+  letter-spacing: var(--ls-tight);
+  color: var(--ink-700);
+  line-height: 1;
+}
+.stat.is-critical .stat-value { color: var(--danger-700); }
+.stat-sub { font-size: var(--fs-xs); color: var(--ink-400); font-family: var(--font-mono); }
+.stat-progress {
+  height: 4px; background: var(--ink-50);
+  border-radius: var(--r-xs); overflow: hidden;
+  margin-top: 4px;
+}
+.stat-progress > span {
+  display: block; height: 100%;
+  background: var(--success-500);
+  border-radius: var(--r-xs);
+}
+
+/* ---------- CRITICAL ALERT ---------- */
+.alert-critical {
+  background: var(--danger-50);
+  border: 1px solid var(--danger-500);
+  border-radius: var(--r-lg);
+  padding: 16px 20px;
+}
+.alert-critical-head {
+  display: flex; align-items: center; gap: 8px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  letter-spacing: var(--ls-wider);
+  text-transform: uppercase;
+  font-weight: 600;
+  color: var(--danger-700);
+  margin-bottom: 12px;
+}
+.alert-critical-list { display: flex; flex-direction: column; gap: 2px; }
+.alert-critical-row {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  gap: 12px; align-items: center;
+  padding: 8px 10px;
+  border-radius: var(--r-sm);
+  font-size: var(--fs-md);
+  color: var(--danger-700);
+}
+.alert-critical-row:hover { background: rgba(220, 53, 69, 0.06); }
+.alert-critical-row .src {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  color: var(--danger-700); opacity: 0.7;
+}
+.alert-critical-foot {
+  margin-top: 8px; padding: 8px 10px;
+  font-size: var(--fs-xs);
+  color: var(--danger-700); opacity: 0.7;
+  font-family: var(--font-mono);
+}
+
+/* ---------- FUNNEL ---------- */
+.funnel {
+  display: flex; height: 8px;
+  background: var(--ink-50);
+  border-radius: var(--r-xs);
+  overflow: hidden;
+  gap: 2px;
+}
+.funnel > span { display: block; height: 100%; }
+.funnel-stages {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 8px;
+  margin-top: 12px;
+}
+.funnel-stage { display: flex; flex-direction: column; gap: 2px; }
+.funnel-stage-label { font-size: var(--fs-xs); color: var(--ink-500); }
+.funnel-stage-count {
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  color: var(--ink-700);
+}
+
+/* ---------- KANBAN ---------- */
+.kanban {
+  display: flex; gap: 12px;
+  overflow-x: auto;
+  padding-bottom: 8px;
+}
+.k-col {
+  flex: 1; min-width: 240px;
+  background: transparent;
+  display: flex; flex-direction: column; gap: 8px;
+}
+.k-col-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 12px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  letter-spacing: var(--ls-wide);
+  text-transform: uppercase;
+  font-weight: 600;
+  color: var(--ink-600);
+}
+.k-col-head .lh    { display: inline-flex; align-items: center; gap: 8px; }
+.k-col-head .dot   { width: 8px; height: 8px; border-radius: 50%; }
+.k-col-head .count { color: var(--ink-400); font-weight: 500; }
+.k-add {
+  display: flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 8px;
+  font-size: var(--fs-sm); color: var(--ink-400);
+  background: transparent;
+  border: 1px dashed var(--line-300);
+  border-radius: var(--r-md);
+  cursor: pointer;
+  transition: all var(--t-fast);
+}
+.k-add:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
+
+/* ---------- LEAD CARD ---------- */
+.lead-card {
+  background: var(--surface);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-md);
+  padding: 12px;
+  display: flex; flex-direction: column; gap: 8px;
+  cursor: grab;
+  transition: all var(--t-fast);
+  position: relative;
+}
+.lead-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-300); }
+.lead-card.is-paused  { border-left: 3px solid var(--warning-500); }
+.lead-card.is-overdue { border-left: 3px solid var(--danger-500); }
+.lead-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.lead-card-name { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); font-weight: 600; color: var(--ink-700); }
+.lead-card-name .flame { color: var(--brand-500); }
+.lead-card-sub  { font-size: var(--fs-xs); color: var(--ink-400); }
+.lead-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-400); }
+.lead-card-meta .icons { display: inline-flex; gap: 6px; color: var(--ink-300); }
+.lead-card-foot {
+  display: flex; align-items: center; gap: 6px;
+  padding-top: 8px;
+  border-top: 1px dashed var(--line-200);
+  font-size: var(--fs-xs); color: var(--ink-400);
+}
+.lead-card-followup {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: var(--fs-xs); color: var(--brand-700); font-weight: 500;
+}
+
+/* ---------- EMPTY STATE ---------- */
+.empty-state {
+  border: 1px dashed var(--line-300);
+  border-radius: var(--r-md);
+  padding: 32px 16px;
+  display: flex; flex-direction: column; align-items: center; gap: 8px;
+  color: var(--ink-300);
+  text-align: center;
+  background: transparent;
+}
+.empty-state .ico  {
+  width: 32px; height: 32px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--ink-300);
+}
+.empty-state .text { font-size: var(--fs-sm); color: var(--ink-400); }
+
+/* ---------- TABLE ACTIONS ---------- */
+.t-actions { display: inline-flex; align-items: center; gap: 6px; }
+.t-act {
+  width: 22px; height: 22px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  cursor: pointer;
+  transition: all var(--t-fast);
+}
+.t-act:hover { background: var(--paper); }
+.t-act.t-confirm        { color: var(--success-700); }
+.t-act.t-confirm:hover  { background: var(--success-50); border-color: var(--success-500); }
+.t-act.t-edit           { color: var(--ink-500); }
+.t-act.t-delete         { color: var(--danger-700); }
+.t-act.t-delete:hover   { background: var(--danger-50); border-color: var(--danger-500); }
+
+/* ---------- SIDEBAR ---------- */
+.zk-sidebar {
+  width: var(--sidebar-w);
+  background: var(--canvas);
+  border-right: 1px solid var(--line-200);
+  padding: 20px 14px;
+  display: flex; flex-direction: column;
+}
+.zk-sidebar-brand {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 8px 22px;
+}
+.zk-sidebar-logo { height: 36px; width: auto; display: block; }
+.zk-sidebar-eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--fs-2xs);
+  letter-spacing: var(--ls-widest);
+  text-transform: uppercase;
+  color: var(--ink-300);
+  padding: 6px 10px 8px;
+  margin-top: 18px;
+}
+.zk-sidebar-link {
+  display: flex; align-items: center; gap: 10px;
+  padding: 7px 10px;
+  font-size: var(--fs-md);
+  color: var(--ink-500);
+  border-radius: var(--r-md);
+  cursor: pointer;
+  transition: all var(--t-fast) var(--ease-out);
+  position: relative;
+}
+.zk-sidebar-link:hover { background: var(--ink-50); color: var(--ink-700); }
+.zk-sidebar-link.active {
+  color: var(--brand-700);
+  background: var(--brand-50);
+  font-weight: 500;
+}
+
+/* ---------- MODAL ---------- */
+.modal-overlay {
+  position: fixed; inset: 0;
+  background: rgba(20, 17, 12, 0.60);
+  backdrop-filter: blur(2px);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 100;
+}
+.modal {
+  position: relative;
+  max-width: 460px; width: calc(100% - 32px);
+  background: var(--surface);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-2xl);
+  box-shadow: var(--shadow-modal);
+  overflow: hidden;
+  animation: zk-fadein var(--t-slow) var(--ease-out);
+}
+.modal-head { padding: 24px 24px 0; }
+.modal-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
+.modal-title {
+  margin: 0;
+  font-size: var(--fs-xl); font-weight: 700;
+  font-family: var(--font-display);
+  letter-spacing: -0.012em;
+  color: var(--ink-700);
+}
+.modal-desc  { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--ink-400); }
+.modal-body  { padding: 16px 24px; }
+.modal-foot  {
+  padding: 16px 20px;
+  border-top: 1px solid var(--line-100);
+  display: flex; justify-content: flex-end; gap: 8px;
+}
+
+/* ---------- CODE BLOCK ---------- */
+.code-block {
+  background: var(--code-bg);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-lg);
+  padding: 16px;
+  font-family: var(--font-mono); font-size: var(--fs-sm);
+  line-height: 1.7;
+  color: var(--ink-600);
+  position: relative;
+  overflow-x: auto;
+}
+.code-block .copy { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
+.code-block .k { color: var(--code-fg); }
+.code-block .s { color: var(--success-700); }
+
+/* ---------- BANNERS / TOASTS ---------- */
+.announce {
+  width: 100%;
+  background: var(--paper);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-md);
+  padding: 10px 16px;
+  text-align: center;
+  font-size: var(--fs-md); color: var(--ink-600);
+}
+.announce a { color: var(--brand-700); text-decoration: underline; }
+.tip {
+  display: flex; gap: 12px; padding: 14px;
+  background: var(--surface);
+  border: 1px solid var(--line-200);
+  border-radius: var(--r-lg);
+  max-width: 320px;
+  box-shadow: var(--shadow-md);
+}
+.tip .ico   { color: var(--brand-500); margin-top: 2px; }
+.tip .what  {
+  font-size: var(--fs-xs); font-family: var(--font-mono);
+  letter-spacing: var(--ls-wider);
+  color: var(--ink-300);
+  text-transform: uppercase; margin-bottom: 4px;
+}
+.tip .title { font-size: var(--fs-md); font-weight: 600; color: var(--ink-700); margin-bottom: 4px; }
+.tip .desc  { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.45; }
+
+.toast {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 8px 14px;
+  background: var(--ink-700); color: #fff;
+  border-radius: var(--r-md);
+  font-size: var(--fs-sm); box-shadow: var(--shadow-lg);
+}
+.toast-success { background: var(--success-500); color: #fff; }
+.toast-danger  { background: var(--danger-500);  color: #fff; }
+
+/* ---------- DATA TABLE ---------- */
+.zk-table { width: 100%; }
+.zk-table-head {
+  font-family: var(--font-mono);
+  font-size: var(--fs-2xs);
+  letter-spacing: var(--ls-wider);
+  text-transform: uppercase;
+  color: var(--ink-300);
+  background: var(--paper);
+  border-bottom: 1px solid var(--line-100);
+  padding: 10px 18px;
+}
+.zk-table-row {
+  padding: 14px 18px;
+  align-items: center;
+  border-bottom: 1px solid var(--line-100);
+  font-size: var(--fs-sm);
+  transition: background var(--t-fast);
+}
+.zk-table-row:hover { background: var(--paper); }
+.zk-table-row .url  { color: var(--ink-600); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.zk-table-row .num  { color: var(--ink-500); font-family: var(--font-mono); }
+.zk-table-row .date { color: var(--ink-400); font-family: var(--font-mono); font-size: var(--fs-xs); }