:root { --ink:#171813; --paper:#f0eee7; --panel:#f8f6ef; --line:#cbc8bc; --muted:#716f67; --signal:#ef5b39; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,"Noto Sans TC",sans-serif; }
button,input { font:inherit; }
button { color:inherit; }
.app-shell { min-height:100vh; background-color:var(--paper); background-image:radial-gradient(rgba(23,24,19,.10) .7px,transparent .7px); background-size:6px 6px; }
.topbar { height:68px; padding:0 clamp(20px,4vw,68px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ink); background:rgba(240,238,231,.94); }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; font-size:17px; font-weight:800; letter-spacing:.08em; }
.brand em { margin-left:4px; font-size:10px; font-style:normal; font-weight:700; letter-spacing:.13em; }
.brand-mark { width:34px; height:34px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; border:1px solid var(--ink); background:#eee7d7; }
.brand-mark i:nth-child(1),.brand-mark i:nth-child(4) { background:var(--ink); }
.brand-mark i:nth-child(2) { background:#e4ae35; }
.brand-mark i:nth-child(3) { background:var(--signal); }
.top-meta { display:flex; align-items:center; gap:7px; }
.top-meta span { padding:7px 10px 6px; border:1px solid var(--ink); border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:#f7f4ec; }
.intro { max-width:1480px; margin:0 auto; padding:46px clamp(20px,4vw,68px) 34px; display:flex; align-items:end; justify-content:space-between; gap:40px; }
.eyebrow,.section-label { margin:0 0 9px; color:var(--muted); font-size:10px; line-height:1; font-weight:800; letter-spacing:.17em; }
.intro h1 { margin:0; font-family:Georgia,"Times New Roman","Noto Serif TC",serif; font-size:clamp(42px,5.4vw,76px); line-height:.96; font-weight:400; letter-spacing:-.05em; }
.intro h1 span { color:var(--signal); }
.intro-copy { max-width:350px; margin:0 0 4px; font-size:13px; line-height:1.75; color:#53524c; }
.studio { max-width:1480px; margin:0 auto; padding:0 clamp(20px,4vw,68px); display:grid; grid-template-columns:minmax(0,1fr) 342px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.preview-panel { min-width:0; padding:27px clamp(24px,3vw,46px) 30px 0; border-right:1px solid var(--ink); }
.panel-heading { display:flex; justify-content:space-between; align-items:end; }
.panel-heading h2 { margin:0; font-family:Georgia,"Times New Roman","Noto Serif TC",serif; font-size:26px; font-weight:400; }
.dimension { text-align:right; }
.dimension span { display:block; font-size:12px; font-weight:800; letter-spacing:.05em; }
.dimension small { color:var(--muted); font-size:10px; }
.fabric-stage { position:relative; max-width:820px; margin:23px auto 0; padding:25px 0 0 25px; }
.canvas-wrap { position:relative; padding:13px; background:#dedbd1; border:1px solid var(--ink); box-shadow:11px 12px 0 rgba(23,24,19,.13); }
.canvas-wrap::before,.canvas-wrap::after { content:''; position:absolute; pointer-events:none; opacity:.48; z-index:1; }
.canvas-wrap::before { top:13px; bottom:13px; left:13px; width:8px; background:linear-gradient(90deg,rgba(0,0,0,.28),transparent); }
.canvas-wrap::after { left:13px; right:13px; top:13px; height:8px; background:linear-gradient(rgba(0,0,0,.25),transparent); }
.weave-canvas { display:block; width:100%; aspect-ratio:1; cursor:crosshair; background:#ddd; }
.weave-canvas:focus-visible { outline:3px solid var(--signal); outline-offset:4px; }
.axis-note { position:absolute; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.14em; white-space:nowrap; }
.axis-note span { color:#a09d94; margin-left:8px; }
.axis-note-top { top:4px; left:25px; }
.axis-note-left { top:25px; left:5px; transform-origin:left top; transform:translateY(128px) rotate(-90deg); }
.canvas-hint { margin:18px 0 0; color:var(--muted); text-align:center; font-size:11px; }
.canvas-hint span { color:var(--signal); font-size:17px; vertical-align:-2px; }
.controls-panel { background:var(--panel); }
.control-block { padding:25px 26px; border-bottom:1px solid var(--line); }
.axis-tabs { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--ink); margin-bottom:20px; }
.axis-tabs button { min-height:48px; border:0; background:transparent; font-size:13px; font-weight:800; cursor:pointer; }
.axis-tabs button + button { border-left:1px solid var(--ink); }
.axis-tabs button.active { background:var(--ink); color:white; }
.axis-tabs small { margin-left:3px; font-size:8px; letter-spacing:.1em; opacity:.7; }
.direction-icon { display:inline-block; width:9px; height:14px; margin-right:5px; vertical-align:-3px; border:1px solid currentColor; }
.direction-icon.horizontal { transform:rotate(90deg); }
.swatch-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:7px; }
.swatch-grid.weft-order { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(9,32px); grid-auto-flow:column; }
.swatch { position:relative; aspect-ratio:1; padding:0; border:1px solid rgba(23,24,19,.28); background:var(--swatch); cursor:pointer; transition:transform .15s ease,box-shadow .15s ease; }
.swatch-grid.weft-order .swatch { height:32px; aspect-ratio:auto; }
.swatch:hover { transform:translateY(-2px); }
.swatch.selected { box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ink); z-index:1; }
.swatch span { position:absolute; inset:auto 2px 1px auto; color:white; font-size:7px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.75); }
.swatch-hint { margin:14px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }
.swatch-hint kbd { padding:2px 4px; border:1px solid var(--line); border-bottom-color:#99968d; border-radius:3px; background:white; color:var(--ink); font-family:inherit; font-size:8px; }
.touch-clipboard-hint { display:none; }
.selected-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.selected-row h3 { margin:0; font-family:Georgia,serif; font-size:20px; font-weight:400; }
.large-swatch { width:38px; height:38px; border:1px solid var(--ink); border-radius:50%; }
.hex-control-row { display:grid; grid-template-columns:minmax(0,1fr) 76px; gap:8px; }
.hex-field { height:46px; display:grid; grid-template-columns:43px 1fr 42px; align-items:center; border:1px solid var(--ink); background:white; }
.hex-field > span { font-size:9px; font-weight:800; letter-spacing:.12em; text-align:center; color:var(--muted); }
.hex-field input { width:100%; min-width:0; border:0; outline:none; background:transparent; font-family:"Courier New",monospace; font-size:14px; font-weight:700; letter-spacing:.06em; }
.hex-field.error { border-color:#c83925; box-shadow:0 0 0 1px #c83925; }
.native-picker { width:29px!important; height:29px; margin:auto; padding:0; border:0; cursor:pointer; }
.native-picker::-webkit-color-swatch-wrapper { padding:0; }
.native-picker::-webkit-color-swatch { border:1px solid var(--ink); border-radius:50%; }
.copy-color { min-width:0; min-height:46px; padding:0 8px; border:1px solid var(--ink); background:var(--ink); color:white; font-size:10px; font-weight:800; cursor:pointer; touch-action:manipulation; }
.copy-color small { display:block; margin-top:2px; color:#d6d3c9; font-size:7px; letter-spacing:.12em; }
.copy-color:hover { background:var(--signal); }
.copy-color:active { transform:translateY(1px); }
.copy-color:focus-visible { outline:3px solid var(--signal); outline-offset:2px; }
.field-error { margin:7px 0 0; color:#b53120; font-size:10px; }
.apply-all { width:100%; margin-top:11px; padding:4px 0; display:flex; justify-content:space-between; border:0; border-bottom:1px solid #99968d; background:transparent; font-size:11px; cursor:pointer; }
.apply-all:hover { border-color:var(--ink); }
.palette-toolbar { display:grid; grid-template-columns:1.35fr .85fr; gap:7px; margin-bottom:12px; }
.palette-toolbar button { min-height:34px; padding:0 8px; border:1px solid var(--ink); background:transparent; font-size:9px; font-weight:800; cursor:pointer; }
.palette-toolbar button:first-child { background:var(--ink); color:white; }
.palette-toolbar button:hover { transform:translateY(-1px); box-shadow:2px 2px 0 var(--signal); }
.palette-form { margin-bottom:13px; padding:13px; border:1px solid var(--ink); background:#eee9dd; }
.palette-form[hidden] { display:none; }
.palette-form > strong { display:block; margin-bottom:10px; font-family:Georgia,"Noto Serif TC",serif; font-size:15px; font-weight:400; }
.palette-form > label:not(.overwrite-row) { display:grid; grid-template-columns:38px 1fr; align-items:center; margin-top:7px; color:var(--muted); font-size:9px; font-weight:800; }
.palette-form > label input { width:100%; min-width:0; height:32px; padding:0 8px; border:1px solid var(--line); background:white; color:var(--ink); outline:none; }
.palette-form > label input:focus { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.overwrite-row { display:flex; align-items:center; gap:7px; margin-top:10px; color:var(--ink); font-size:9px; cursor:pointer; }
.overwrite-row[hidden] { display:none; }
.overwrite-row input { width:14px!important; height:14px!important; margin:0; accent-color:var(--signal); }
.palette-form-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:11px; }
.palette-form-actions button { min-height:32px; border:1px solid var(--ink); background:transparent; font-size:9px; font-weight:800; cursor:pointer; }
.palette-form-actions button:last-child { background:var(--signal); color:white; }
.palette-list { display:grid; gap:7px; }
.palette-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; border-bottom:1px solid var(--line); }
.palette-apply { min-height:48px; padding:0; display:grid; grid-template-columns:81px 1fr 18px; align-items:center; gap:9px; border:0; background:transparent; text-align:left; cursor:pointer; }
.palette-apply:hover strong { color:var(--signal); }
.palette-item-actions { display:flex; align-items:center; gap:2px; padding-left:5px; }
.palette-icon-button { min-height:27px; padding:0 5px; border:0; background:transparent; color:var(--muted); font-size:8px; cursor:pointer; }
.palette-icon-button:hover { color:var(--ink); text-decoration:underline; }
.palette-icon-button.danger:hover { color:#b53120; }
.palette-dots { display:flex; }
.palette-dots i { width:18px; height:18px; border:1px solid rgba(23,24,19,.22); border-radius:50%; margin-left:-3px; }
.palette-dots i:first-child { margin-left:0; }
.palette-list strong { display:block; font-size:12px; transition:color .15s; }
.palette-list small { display:block; margin-top:2px; color:var(--muted); font-size:9px; }
.palette-list b { color:var(--muted); font-size:13px; }
.palette-empty { margin:2px 0 0; padding:14px 0; color:var(--muted); font-size:10px; line-height:1.6; }
.export-block { padding:24px 26px 27px; background:#ded7c8; }
.export-block > div:first-child { display:flex; align-items:end; justify-content:space-between; }
.export-block .section-label { margin-bottom:0; color:#55534d; }
.export-block > div > span { font-size:9px; color:var(--muted); }
.export-actions { display:grid; grid-template-columns:.75fr 1.25fr; gap:8px; margin-top:15px; }
.export-actions button { height:46px; cursor:pointer; font-size:11px; font-weight:800; letter-spacing:.05em; }
.export-secondary { border:1px solid var(--ink); background:transparent; }
.export-primary { display:flex; align-items:center; justify-content:space-between; padding:0 15px; border:1px solid var(--ink); background:var(--signal); color:white; }
.export-actions button:hover { transform:translateY(-1px); box-shadow:3px 3px 0 var(--ink); }
footer { max-width:1480px; margin:0 auto; padding:25px clamp(20px,4vw,68px) 42px; display:grid; grid-template-columns:1fr auto 1fr; gap:30px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
footer p { margin:0; font-size:10px; letter-spacing:.02em; text-transform:none; }
footer span:last-child { text-align:right; }
.toast { position:fixed; z-index:20; left:50%; bottom:24px; transform:translate(-50%,20px); padding:11px 16px; border:1px solid white; background:var(--ink); color:white; font-size:11px; opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; box-shadow:5px 5px 0 rgba(239,91,57,.8); }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:980px) {
  .studio { grid-template-columns:1fr; }
  .preview-panel { padding-right:0; border-right:0; border-bottom:1px solid var(--ink); }
  .controls-panel { display:grid; grid-template-columns:1fr 1fr; }
  .control-block { border-right:1px solid var(--line); }
  .export-block { display:flex; flex-direction:column; justify-content:center; }
}
@media (max-width:680px) {
  .topbar { height:60px; }
  .top-meta span:first-child,.top-meta span:last-child,.brand em { display:none; }
  .intro { padding-top:34px; display:block; }
  .intro-copy { margin-top:22px; }
  .intro h1 { font-size:clamp(39px,13vw,58px); }
  .studio { padding:0 16px; }
  .preview-panel { padding-top:22px; }
  .dimension small { display:none; }
  .fabric-stage { padding-left:16px; }
  .canvas-wrap { padding:7px; box-shadow:7px 8px 0 rgba(23,24,19,.13); }
  .axis-note-left { left:0; }
  .controls-panel { grid-template-columns:1fr; }
  .control-block { border-right:0; }
  footer { grid-template-columns:1fr; gap:8px; }
  footer p { grid-row:1; }
  footer span:last-child { display:none; }
}
@media (hover:none) and (pointer:coarse) {
  .desktop-clipboard-hint { display:none; }
  .touch-clipboard-hint { display:inline; }
  .copy-color { min-height:48px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }