/* gigaflow-ui shared theme — the gallery design system.
   Linked by every page: <link rel="stylesheet" href="/theme.css">.
   Page-specific rules (gallery glimpse graph, golden organize modal,
   project/fixture card internals) stay inline in their own pages. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F6F6F2;--surface:#FFFFFF;--border:rgba(28,30,27,.12);--line2:rgba(28,30,27,.26);
  --text:#1C1E1B;--muted:#6A6D64;--faint:#9A9D93;--accent:#0F6E56;
  --grounded:#1D9E75;--tainted:#BA7517;--hall:#E24B4A;--hall-bg:#FCEBEB;--node-neutral:#9A9D93;
  --sans:'Public Sans',system-ui,sans-serif;--disp:'Fraunces',serif;--mono:'IBM Plex Mono',monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#171814;--surface:#1F211B;--border:rgba(233,233,226,.16);--line2:rgba(233,233,226,.3);
    --text:#E9E9E2;--muted:#A4A79B;--faint:#7C7F74;--accent:#5DCAA5;
    --grounded:#5DCAA5;--tainted:#FAC775;--hall:#F09595;--hall-bg:#4A1414;--node-neutral:#7C7F74;
  }
}
body{background:var(--bg);color:var(--text);font:400 14px/1.6 var(--sans);padding-bottom:60px}

header{display:flex;align-items:center;gap:12px;padding:12px 28px;border-bottom:1px solid var(--border)}
header .logo{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--text);text-decoration:none}
header .nav{margin-left:auto;display:flex;gap:6px}
header .nav a{color:var(--muted);font-size:12.5px;text-decoration:none;padding:5px 11px;border-radius:7px;border:1px solid transparent}
header .nav a:hover{color:var(--text);border-color:var(--border)}
header .nav a.active{color:var(--text);border-color:var(--border)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

.hero{padding:34px 0 26px;border-bottom:1px solid var(--border);margin-bottom:22px}
.hero .ey{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hero h1{font-family:var(--disp);font-weight:500;font-size:30px;line-height:1.15;margin:8px 0 4px}
.hero .by{color:var(--muted);font-size:13px;margin-bottom:22px}
/* Task 2 forward-reference: no element uses .hero a.back yet (it lands with the
   hero back-link in a later task). Verify it there. */
.hero a.back{color:var(--accent);font-size:12px;text-decoration:none;font-weight:600}
.stats{display:flex;gap:40px;flex-wrap:wrap}
.stat .n{font-family:var(--disp);font-size:30px;font-weight:600;line-height:1}
.stat .n.teal{color:var(--grounded)}
.stat .l{font-size:11.5px;color:var(--muted);margin-top:5px}

.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.toolbar input{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:7px 11px;font-size:12.5px;width:260px;font-family:var(--sans);outline:none}
.toolbar input:focus{border-color:var(--accent)}
.toolbar input::placeholder{color:var(--faint)}
.seg{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg button{background:transparent;border:none;color:var(--muted);font:500 12px var(--sans);padding:7px 12px;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--text)}
.toolbar .count{margin-left:auto;color:var(--muted);font-size:12px}

#loading{display:flex;align-items:center;gap:8px;color:var(--muted);padding:40px 0}
.spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#error-msg{background:var(--hall-bg);border:1px solid var(--hall);border-radius:8px;color:var(--hall);padding:12px 16px;display:none}
.empty-state{text-align:center;color:var(--muted);padding:60px 0}
.empty-state p{margin-top:8px;font-size:12px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:18px;display:flex;flex-direction:column;gap:13px;text-decoration:none;color:var(--text);transition:border-color .15s,transform .1s}
.card:hover{border-color:var(--line2);transform:translateY(-2px)}