/* Hallmark · shape: app screen · genre: modern-minimal · theme: rim (night) · scope: app · v2.0.0
 * critique: the old screens were stock dark cards on a gradient logo, no tokens, no focus state,
 *   emoji as icons and middle-dot meta strings; the density of a real tool was missing.
 * reworded "抖音 · 视频号 · 公众号 → 素材库" to a plain enumeration - 63 names the meta string
 */
/* Hallmark · dismissed 23 · the accent fill on .prog i is a 2px progress track, never a viewport fill */
:root{
  /* palette, Rim night */
  --color-paper:oklch(9% 0.008 75);
  --color-paper-2:oklch(12.5% 0.009 75);
  --color-paper-3:oklch(6.5% 0.007 75);
  --color-ink:oklch(94% 0.010 80);
  --color-ink-2:oklch(84% 0.011 80);
  --color-muted:oklch(68% 0.012 80);
  --color-muted-2:oklch(64% 0.010 80);
  --color-rule:oklch(25% 0.010 78);
  --color-rule-2:oklch(16% 0.009 78);
  --color-accent:oklch(72% 0.17 45);
  --color-accent-ink:oklch(10% 0.02 45);
  --color-accent-2:oklch(74% 0.12 250);
  --color-focus:oklch(78% 0.15 45);

  /* type: the system stack for words, the system mono for anything that measures */
  --font-display:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  --font-body:var(--font-display);
  --font-outlier:ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC",monospace;
  --display-weight:500;
  --tracking-display:-0.04em;

  /* fixed app scale, ratio 1.2 */
  --text-xs:12px; --text-s:13px; --text-m:15px; --text-l:17px;
  --text-xl:21px; --text-2xl:26px; --text-3xl:32px;

  /* 4px spacing scale */
  --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px;
  --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px;

  --rule-hair:1px;
  --radius-card:0; --radius-pill:0; --shadow-card:none;
  --control-h:34px;
  --page-max:1080px;
  --dur-micro:90ms; --dur-short:160ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{background:var(--color-paper);scrollbar-color:var(--color-rule) var(--color-paper);caret-color:var(--color-accent)}
body{
  margin:0;background:var(--color-paper);color:var(--color-ink-2);
  font:400 var(--text-m)/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:var(--display-weight);line-height:1.12;letter-spacing:-0.03em;color:var(--color-ink);margin:0}
h1{font-size:var(--text-3xl);letter-spacing:var(--tracking-display);text-wrap:balance}
h2{font-size:var(--text-l)}
p{margin:0}
a{color:var(--color-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
code,.m{font-family:var(--font-outlier);font-variant-numeric:tabular-nums;font-size:var(--text-s);letter-spacing:0}
::selection{background:color-mix(in oklab,var(--color-accent) 35%,transparent);color:var(--color-ink)}

:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
:where(button,input,textarea,a,select):focus:not(:focus-visible){outline:none}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important}
}

/* ---- chrome ---- */
.bar{
  display:flex;align-items:center;gap:var(--space-md);
  height:52px;padding:0 var(--space-lg);
  border-bottom:var(--rule-hair) solid var(--color-rule);
  background:var(--color-paper);
}
.brand{
  display:flex;align-items:center;gap:var(--space-xs);
  font-weight:500;color:var(--color-ink);letter-spacing:-0.01em;text-decoration:none;
}
.brand::before{
  content:"";width:16px;height:16px;background:var(--color-accent);
  display:block;flex:none;
}
.brand:hover{text-decoration:none;color:var(--color-ink)}
.brand--home{
  gap:var(--space-2xs);height:var(--control-h);padding:0 var(--space-sm);
  border:var(--rule-hair) solid var(--color-rule);color:var(--color-ink-2);
  transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out);
}
.brand--home::before{display:none}
.brand--home:hover,.brand--home.is-hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.brand--home:active{transform:translateY(1px)}
.bar-current{color:var(--color-muted);font-size:var(--text-s)}
.bar-sep{width:var(--rule-hair);height:16px;background:var(--color-rule);flex:none}
.bar-spacer{flex:1}
.bar-note{font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-muted-2)}

/* ---- wordmark: the text-swap hover, in this palette ---- */
.wm{display:inline-block;position:relative;overflow:hidden;padding:0 0 2px;margin:0}
.wm .wm-a,.wm .wm-b{display:block;transition:transform var(--dur-short) var(--ease-out)}
.wm .wm-b{position:absolute;left:0;top:0;width:100%;color:var(--color-accent);transform:translateY(105%)}
.wm:hover .wm-a,.wm.is-hover .wm-a{transform:translateY(-105%)}
.wm:hover .wm-b,.wm.is-hover .wm-b{transform:translateY(0)}

/* ---- page ---- */
.page{max-width:var(--page-max);margin:0 auto;padding:var(--space-2xl) var(--space-lg) var(--space-3xl)}
.page-head{display:flex;align-items:baseline;gap:var(--space-md);flex-wrap:wrap}

.sec{margin-top:var(--space-2xl)}
.sec-rule{height:var(--rule-hair);background:var(--color-rule);margin-bottom:var(--space-md)}
.sec-head{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.sec-head h2{flex:none}
.sec-head .spacer{flex:1}
.lab{font-size:var(--text-xs);color:var(--color-muted);font-weight:500}
.hint{font-size:var(--text-xs);color:var(--color-muted)}
.hint code{color:var(--color-muted)}

/* ---- controls ---- */
.btn{
  height:var(--control-h);padding:0 var(--space-md);
  border:var(--rule-hair) solid var(--color-rule);
  background:transparent;color:var(--color-ink);
  font:500 var(--text-s)/1 var(--font-body);
  border-radius:var(--radius-card);cursor:pointer;
  transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out);
}
.btn:hover{background:var(--color-paper-2);border-color:var(--color-muted-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{color:var(--color-muted-2);border-color:var(--color-rule-2);cursor:not-allowed;transform:none}
.btn--primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.btn--primary:hover{background:color-mix(in oklab,var(--color-accent) 88%,var(--color-ink));border-color:transparent}
.btn--quiet{border-color:transparent;color:var(--color-muted);padding:0 var(--space-xs)}
.btn--quiet:hover{color:var(--color-ink);background:var(--color-paper-2)}

/* ---- wells ---- */
.well{
  position:relative;background:var(--color-paper-2);color:var(--color-ink-2);
  border:var(--rule-hair) solid var(--color-rule-2);
  padding:var(--space-md);
}
.ticks::before,.ticks::after{
  content:"";position:absolute;width:12px;height:12px;border:0 solid var(--color-muted-2);pointer-events:none;
}
.ticks::before{top:calc(-1 * var(--space-xs));left:calc(-1 * var(--space-xs));border-width:1px 0 0 1px}
.ticks::after{right:calc(-1 * var(--space-xs));bottom:calc(-1 * var(--space-xs));border-width:0 1px 1px 0}

textarea,input[type="text"]{
  width:100%;background:var(--color-paper);color:var(--color-ink);
  border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius-card);
  font:400 var(--text-s)/1.6 var(--font-outlier);
  padding:var(--space-sm);
  resize:vertical;
}
textarea::placeholder{color:var(--color-muted-2)}
textarea:focus-visible,input[type="text"]:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;border-color:var(--color-muted-2)}

/* ---- tool rows (home) ---- */
.tool-list{border-top:var(--rule-hair) solid var(--color-rule)}
.tool-row{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto auto;
  gap:var(--space-lg);align-items:center;
  padding:var(--space-lg) var(--space-sm);
  border-bottom:var(--rule-hair) solid var(--color-rule-2);
  color:var(--color-ink-2);text-decoration:none;
  transition:background-color var(--dur-micro) var(--ease-out);
}
a.tool-row:hover{background:var(--color-paper-2);text-decoration:none}
a.tool-row:hover .tool-name{color:var(--color-accent)}
.tool-name{font-size:var(--text-l);color:var(--color-ink);font-weight:500;letter-spacing:-0.01em}
.tool-desc{color:var(--color-muted);font-size:var(--text-s);min-width:0;text-wrap:pretty}
.tool-state{justify-self:end}
.tool-ext{justify-self:end;font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-muted-2);white-space:nowrap}
a.tool-row:hover .tool-ext{color:var(--color-accent)}

/* ---- rows (jobs / assets / library) ---- */
.table{border-top:var(--rule-hair) solid var(--color-rule)}
.rrow{
  display:grid;align-items:center;gap:var(--space-md);
  padding:var(--space-sm) 0;
  border-bottom:var(--rule-hair) solid var(--color-rule-2);
  font-size:var(--text-s);
}
.rrow--jobs{grid-template-columns:74px minmax(0,1fr) auto auto}
.rrow--lib{grid-template-columns:74px minmax(0,1fr) auto auto}
.rrow .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-ink)}
.cell{min-width:0}
.asset .kind{font-size:var(--text-xs);color:var(--color-muted)}
.rrow .size{font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-muted);white-space:nowrap}
.rrow .acts{display:flex;gap:var(--space-sm);align-items:center;justify-content:flex-end}
.rrow .acts a,.rrow .acts button{font-size:var(--text-xs);color:var(--color-muted);background:none;border:0;padding:0;cursor:pointer}
.rrow .acts a:hover,.rrow .acts button:hover{color:var(--color-accent);text-decoration:none}
.empty{color:var(--color-muted-2);font-size:var(--text-s);padding:var(--space-lg) 0}

/* ---- chips: square, sentence case, never tracked ---- */
.chip{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  padding:2px var(--space-xs);border:var(--rule-hair) solid var(--color-rule);
  font-size:var(--text-xs);color:var(--color-muted);white-space:nowrap;
  border-radius:var(--radius-card);
}
.chip::before{content:"";width:6px;height:6px;background:var(--color-muted-2);display:block}
.chip--live{color:var(--color-ink);border-color:var(--color-rule)}
.chip--live::before{background:var(--color-accent)}
.chip--done::before{background:var(--color-accent-2)}
.chip--wait::before{background:var(--color-muted-2)}
.chip--err{color:var(--color-accent);border-color:color-mix(in oklab,var(--color-accent) 40%,transparent)}
.chip--err::before{background:var(--color-accent)}
.chip--soon{color:var(--color-muted-2)}

/* ---- result block ---- */
.result{
  display:grid;grid-template-columns:116px minmax(0,1fr);gap:var(--space-lg);
  padding:var(--space-lg) 0;border-bottom:var(--rule-hair) solid var(--color-rule-2);
}
.result--noimg{grid-template-columns:minmax(0,1fr)}
.cover{width:116px;height:116px;object-fit:cover;background:var(--color-paper-2);
  outline:var(--rule-hair) solid color-mix(in oklab,var(--color-ink) 8%,transparent);outline-offset:-1px}
.result .title{font-size:var(--text-l);color:var(--color-ink);font-weight:500;letter-spacing:-0.01em;margin:var(--space-2xs) 0 var(--space-2xs);overflow-wrap:break-word;min-width:0}
.result .sub{color:var(--color-muted);font-size:var(--text-s)}
.result .desc{color:var(--color-muted);font-size:var(--text-s);margin-top:var(--space-2xs);text-wrap:pretty}
.assets{margin-top:var(--space-sm);border-top:var(--rule-hair) solid var(--color-rule-2)}
.asset{
  display:grid;grid-template-columns:64px minmax(0,1fr) 72px auto;gap:var(--space-sm);align-items:center;
  padding:var(--space-xs) 0;border-bottom:var(--rule-hair) solid var(--color-rule-2);font-size:var(--text-s);
}
.asset .lbl{color:var(--color-ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset .sz{font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-muted-2)}
.assets .assets-foot{display:flex;justify-content:flex-end;padding-top:var(--space-sm)}
.notes{margin:var(--space-xs) 0 0;padding-left:var(--space-md);color:var(--color-muted);font-size:var(--text-xs)}
.notes li{margin:2px 0}

/* ---- progress: transform only ---- */
.prog{height:2px;background:var(--color-rule);position:relative;overflow:hidden}
.prog i{position:absolute;inset:0;background:var(--color-accent);transform-origin:left center;transform:scaleX(0);transition:transform var(--dur-short) var(--ease-out)}

/* ---- foot ---- */
.foot{border-top:var(--rule-hair) solid var(--color-rule);margin-top:var(--space-2xl);padding-top:var(--space-md);
  display:flex;gap:var(--space-xl);flex-wrap:wrap;color:var(--color-muted);font-size:var(--text-xs)}
.foot .lab{margin-right:var(--space-xs)}

@media (max-width:56rem){
  .tool-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name state" "desc desc";row-gap:var(--space-2xs)}
  .tool-name{grid-area:name}.tool-desc{grid-area:desc}.tool-state{grid-area:state}
  .tool-ext{display:none}
  .rrow--jobs,.rrow--lib{grid-template-columns:66px minmax(0,1fr) auto;row-gap:var(--space-2xs)}
  .rrow--jobs .acts,.rrow--lib .acts{grid-column:1/-1;justify-content:flex-start;gap:var(--space-lg);padding-top:var(--space-2xs)}
  .result{grid-template-columns:minmax(0,1fr)}
  .cover{width:100%;height:180px}
  .asset{grid-template-columns:56px minmax(0,1fr) auto;}
  .asset .sz{display:none}
}