:root{
--ink:#eef0fb;
--ink-dim:#c6c3e6;
--ink-faint:#928fc0;
--bg:#1a1830;
--bg-deep:#121022;
--panel:#252143;
--panel-raised:#2d2850;
--line: rgba(238,240,251,0.10);
--amber:#8f7cf0;
--amber-soft: rgba(143,124,240,0.20);
--rose:#d16bc9;
--moss:#5fa8e0;
--moss-soft: rgba(95,168,224,0.18);
--radius: 14px;
}
*{box-sizing:border-box;}
body{
margin:0;
background:
  radial-gradient(1200px 600px at 10% -10%, rgba(143,124,240,0.12), transparent 60%),
  radial-gradient(900px 500px at 100% 0%, rgba(95,168,224,0.09), transparent 55%),
  var(--bg);
color:var(--ink);
font-family:'Space Grotesk', sans-serif;
min-height:100vh;
padding: 32px 20px 80px;
}
.wrap{ max-width: 880px; margin: 0 auto; }

/* ---- signature: interlocking puzzle-tab divider ---- */
.tab-divider{
height: 18px;
width:100%;
position:relative;
margin: 2px 0;
pointer-events:none;
}
.tab-divider svg{ width:100%; height:100%; display:block; }

header.hero{
display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
flex-wrap:wrap;
margin-bottom: 6px;
}
h1{
font-family:'Fraunces', serif;
font-weight:600;
font-size: clamp(28px, 5vw, 40px);
margin:0;
letter-spacing: -0.01em;
color: var(--ink);
}
h1 em{ font-style:normal; color: var(--amber); }
.tagline{ color: var(--ink-faint); font-size:14px; margin-top:6px; max-width:46ch; }

.piece-icon{ width:34px; height:34px; flex:none; }

/* ---- panels ---- */
.panel{
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px;
margin-top: 22px;
}
.panel h2{
font-family:'Fraunces', serif;
font-weight:600;
font-size:18px;
margin:0 0 14px;
color: var(--ink);
}
label.field-label{
display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em;
color: var(--ink-faint); margin-bottom:6px;
}
input[type=password], input[type=text], select{
width:100%;
background: var(--bg-deep);
border:1px solid var(--line);
color: var(--ink);
padding: 11px 13px;
border-radius: 9px;
font-family: 'Space Mono', monospace;
font-size:14px;
outline:none;
}
input:focus, select:focus{ border-color: var(--amber); }
.row{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.row > div{ flex:1; min-width:220px; }

button{
font-family:'Space Grotesk', sans-serif;
font-weight:600;
font-size:14px;
border:none;
border-radius: 9px;
padding: 11px 20px;
cursor:pointer;
transition: transform .12s ease, filter .12s ease;
}
button.primary{ background: var(--amber); color: #22190a; }
button.primary:hover{ filter:brightness(1.08); }
button.ghost{ background: transparent; color: var(--ink); border:1px solid var(--line); }
button.ghost:hover{ border-color: var(--amber); color: var(--amber); }
button:disabled{ opacity:.5; cursor:not-allowed; }
button:active:not(:disabled){ transform: scale(0.98); }

.hint{ font-size:12px; color: var(--ink-faint); margin-top:10px; line-height:1.5;}
.error-box{
background: rgba(209,107,201,0.14);
border:1px solid rgba(209,107,201,0.4);
color:#f2d3ee;
padding:12px 14px;
border-radius:9px;
font-size:13px;
margin-top:14px;
}

/* ---- controls bar ---- */
.controls{
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.type-toggles{ display:flex; gap:8px; flex-wrap:wrap; }
.type-chip{
display:flex; align-items:center; gap:7px;
background: var(--bg-deep);
border:1px solid var(--line);
padding:8px 13px 8px 10px;
border-radius: 999px;
font-size:13px;
cursor:pointer;
user-select:none;
color: var(--ink-dim);
}
.type-chip input{ accent-color: var(--amber); }
.type-chip.active{ border-color: var(--amber); color: var(--ink); background: var(--amber-soft); }

.sort-controls{ display:flex; align-items:center; gap:10px; }
.count-pill{
font-family:'Space Mono', monospace;
font-size:12px; color: var(--ink-faint);
}

/* ---- filter chip groups ---- */
.filter-group{ margin-top:16px; }
.filter-group:first-child{ margin-top:0; }
.filter-group-head{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:8px;
}
.filter-group-head .field-label{ margin-bottom:0; }
.filter-group-head button{
background:none; border:none; padding:0; font-size:11px;
color: var(--ink-faint); text-decoration:underline; cursor:pointer;
}
.filter-group-head button:hover{ color: var(--amber); }
.filter-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-chip{
display:flex; align-items:center; gap:7px;
background: var(--bg-deep);
border:1px solid var(--line);
padding:7px 12px 7px 9px;
border-radius: 999px;
font-size:12.5px;
cursor:pointer;
user-select:none;
color: var(--ink-dim);
}
.filter-chip input{ accent-color: var(--amber); }
.filter-chip.active{ border-color: var(--amber); color: var(--ink); background: var(--amber-soft); }
.filter-empty-note{ font-size:12px; color: var(--ink-faint); font-style:italic; }

/* ---- puzzle list ---- */
.list{ margin-top: 18px; display:flex; flex-direction:column; }
.tier-label{
font-size:11px; text-transform:uppercase; letter-spacing:.1em;
color: var(--ink-faint);
margin: 22px 2px 8px;
display:flex; align-items:center; gap:8px;
}
.tier-label::after{ content:''; flex:1; height:1px; background: var(--line); }
.tier-label.tier0{ color: var(--rose); }
.tier-label.tier1{ color: var(--amber); }

.card{
display:flex; gap:16px;
background: var(--panel-raised);
border:1px solid var(--line);
border-radius: var(--radius);
padding: 16px;
margin-bottom: 10px;
position:relative;
}
.card.tier0{ border-left: 3px solid var(--rose); }
.card.tier1{ border-left: 3px solid var(--amber); }
.card.tier2{ border-left: 3px solid var(--moss); }

.thumb{
  display:block;
  width:64px; height:64px; border-radius:9px; flex:none;
  background-size:cover; background-position:center;
  background-color: var(--bg-deep);
  border:1px solid var(--line);
  cursor:pointer;
  transition: opacity .12s ease;
}
.thumb:hover{ opacity:0.85; }
.card-main{ flex:1; min-width:0; }
.card-top{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.puzzle-name{ font-weight:600; font-size:16px; color: var(--ink); }
.puzzle-meta{ font-size:12px; color: var(--ink-faint); margin-top:2px; }
.badge{
font-size:11px; font-family:'Space Mono', monospace;
padding: 3px 9px; border-radius:999px;
white-space:nowrap; height:fit-content;
}
.badge.tier0{ background: rgba(209,107,201,0.20); color:#f2c1ec; }
.badge.tier1{ background: var(--amber-soft); color: var(--amber); }
.badge.tier2{ background: var(--moss-soft); color: var(--moss); }

.type-results{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.type-result{
background: var(--bg-deep);
border:1px solid var(--line);
border-radius:9px;
font-size:12.5px;
min-width: 180px;
flex:1;
overflow:hidden;
}
.type-result > summary{
padding: 10px 12px;
cursor:pointer;
list-style:none;
position:relative;
}
.type-result > summary::-webkit-details-marker{ display:none; }
.type-result > summary::after{
content:'⌄';
position:absolute; top:10px; right:11px;
color: var(--ink-faint);
font-size:15px;
transition: transform .15s ease;
}
.type-result[open] > summary::after{ transform: rotate(180deg); }
.type-result .t-label{
font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
color: var(--ink-faint); margin-bottom:6px; display:flex; justify-content:space-between; align-items:center;
padding-right:16px;
}
.type-result .t-count-badge{
font-family:'Space Mono', monospace; font-size:12.5px; font-weight:700;
color: var(--ink);
background: var(--panel-raised);
border:1px solid var(--line);
padding: 2px 8px;
border-radius: 999px;
letter-spacing:0;
}
.type-result .t-time{ font-family:'Space Mono', monospace; font-size:16px; color: var(--ink); font-weight:600; }
.type-result .t-date{ color: var(--ink-dim); margin-top:2px; }
.type-result .t-date .approx{ color: var(--ink-faint); }
.type-result .tag-first{
display:inline-block; margin-top:5px;
font-size:10px; text-transform:uppercase; letter-spacing:.06em;
color: var(--moss); border:1px solid var(--moss); border-radius:999px;
padding:1px 7px;
}
.type-result .t-fastest{ margin-top:8px; padding-top:8px; border-top: 1px dashed var(--line); color: var(--ink-dim); }
.type-result .t-fastest .t-time{ font-size:14px; color: var(--amber); }
.type-result.empty{ padding: 9px 12px; color: var(--ink-faint); display:flex; align-items:center; justify-content:center; font-style:italic; cursor:default; }

.solve-list{
border-top: 1px solid var(--line);
max-height: 240px;
overflow-y:auto;
}
.solve-row{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding: 8px 12px;
border-bottom: 1px solid var(--line);
font-size:12px;
}
.solve-row:last-child{ border-bottom:none; }
.solve-row.fastest{ background: var(--amber-soft); }
.solve-row .solve-date{ color: var(--ink-dim); flex:1; }
.solve-row .solve-time{ font-family:'Space Mono', monospace; color: var(--ink); }
.solve-row.fastest .solve-time{ color: var(--amber); font-weight:700; }
.solve-row .solve-tags{ display:flex; gap:5px; }
.solve-row .mini-tag{
font-size:9px; text-transform:uppercase; letter-spacing:.05em;
padding: 1px 6px; border-radius:999px; white-space:nowrap;
}
.solve-row .mini-tag.first{ color: var(--moss); border:1px solid var(--moss); }
.solve-row .mini-tag.pr{ color: var(--amber); border:1px solid var(--amber); }

.empty-state, .loading-state{
text-align:center; padding: 50px 20px; color: var(--ink-faint);
}
.spinner{
width:26px; height:26px; border-radius:50%;
border:3px solid var(--line); border-top-color: var(--amber);
animation: spin 0.8s linear infinite;
margin: 0 auto 14px;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.connected-bar{
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
font-size:13px; color: var(--ink-faint);
}
.connected-bar b{ color: var(--ink); }
.dot{ width:7px; height:7px; border-radius:50%; background: var(--moss); display:inline-block; margin-right:6px; }

/* ---- suggestion panel ---- */
.suggestion-panel{
border-color: rgba(143,124,240,0.35);
background: linear-gradient(160deg, rgba(143,124,240,0.10), var(--panel) 55%);
}
.suggestion-head{
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
margin-bottom:14px;
}
.suggestion-head h2{ margin:0; }
.suggestion-controls{ display:flex; align-items:center; gap:10px; }
.suggestion-card{
display:flex; gap:16px;
background: var(--panel-raised);
border:1px solid rgba(143,124,240,0.4);
border-radius: var(--radius);
padding: 18px;
}
.suggestion-card .thumb{ width:84px; height:84px; }
.suggestion-main{ flex:1; min-width:0; }
.suggestion-name{ font-family:'Fraunces', serif; font-weight:600; font-size:19px; color: var(--ink); }
.suggestion-meta{ font-size:12px; color: var(--ink-faint); margin-top:2px; }
.suggestion-reason{
margin-top:10px;
font-size:13.5px;
color: var(--ink-dim);
background: var(--bg-deep);
border-left: 3px solid var(--amber);
padding: 8px 12px;
border-radius: 0 8px 8px 0;
}
.suggestion-empty{ color: var(--ink-faint); font-size:13.5px; font-style:italic; padding: 6px 2px; }

@media (max-width: 560px){
.card{ flex-direction:column; }
.thumb{ width:100%; height:120px; }
}