/* ---- Color System ---- */
:root{
  /* light defaults */
  --bg:#f6f7fb; --card:#ffffff; --text:#0f1220; --muted:#5b6473;
  --border:#dfe3ee; --accent:#2563eb; --accent2:#7c3aed;
  --k-bg:#f1f5ff; --k-border:#cdd9ff;
  --br:16px; --gap:14px; --shadow:0 6px 20px rgba(0,0,0,.08); --max:1100px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1220; --card:#151933; --text:#e7ebf3; --muted:#9aa3b2;
    --border:#242a44; --accent:#7dd3fc; --accent2:#a78bfa;
    --k-bg:rgba(125,211,252,.06); --k-border:#2a3357;
    --shadow:0 8px 30px rgba(0,0,0,.25);
  }
}
/* explicit overrides win over system */
:root[data-theme="light"]{
  --bg:#f6f7fb; --card:#ffffff; --text:#0f1220; --muted:#5b6473;
  --border:#dfe3ee; --accent:#2563eb; --accent2:#7c3aed;
  --k-bg:#f1f5ff; --k-border:#cdd9ff; --shadow:0 6px 20px rgba(0,0,0,.08);
}
:root[data-theme="dark"]{
  --bg:#0f1220; --card:#151933; --text:#e7ebf3; --muted:#9aa3b2;
  --border:#242a44; --accent:#7dd3fc; --accent2:#a78bfa;
  --k-bg:rgba(125,211,252,.06); --k-border:#2a3357;
  --shadow:0 8px 30px rgba(0,0,0,.25);
}

:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

input, select, textarea { color-scheme: inherit; }

:root{
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

select{
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 2.25rem 10px 10px; /* room for arrow */
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px auto;
}

select:focus{
  outline: none;
  border-color: var(--accent2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent2) 25%, transparent);
}

select:disabled{ opacity:.55; cursor:not-allowed; }

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif}
.wrap{max-width:var(--max);margin:0 auto;padding:16px}

.bar{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0));backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10}
.bar__inner{display:flex;align-items:center;gap:12px;justify-content:space-between}
.brand{font-weight:700}

.btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:999px;cursor:pointer}

/* ---- Layout ---- */
.layout{display:grid;grid-template-columns:240px 1fr;gap:16px}
@media (max-width: 820px){
  .layout{grid-template-columns:1fr}
}

/* ---- Vertical nav ---- */
.sidenav{border:1px solid var(--border);border-radius:var(--br);padding:10px;background:var(--card);box-shadow:var(--shadow);position:sticky;top:70px;height:fit-content}
.sidenav .navlist{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.sidenav .navlist button{width:100%;text-align:left;background:transparent;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:10px;cursor:pointer}
.sidenav .navlist button[aria-current="page"]{border-color:var(--accent2);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent2) 25%, transparent) inset}

.sidenav .navlist a{
  display:block; text-decoration:none;
  background:transparent; border:1px solid var(--border);
  color:var(--text); padding:10px; border-radius:10px;
}
.sidenav .navlist a[aria-current="page"]{
  border-color:var(--accent2);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent2) 25%, transparent) inset;
}

/* Select Lite (themed, accessible, tiny) */
.select-lite{ position:relative; }
.select-lite > select{
  position:absolute; inset:auto auto auto auto; /* keep in DOM but invisible */
  opacity:0; pointer-events:none; width:0; height:0;
}
.select-lite__button{
  width:100%;
  text-align:left;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 2.25rem 10px 10px;
  cursor:pointer;
  background-image: var(--select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"));
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px auto;
}
.select-lite__button:focus{
  outline:none;
  border-color:var(--accent2);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent2) 25%, transparent);
}
.select-lite__menu{
  position:absolute; z-index:1000;
  top:calc(100% + 6px); left:0; right:0;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--shadow);
  max-height:260px; overflow:auto; padding:6px;
}
.select-lite__option{
  padding:8px 10px; border-radius:8px; outline:none;
}
.select-lite__option[aria-selected="true"],
.select-lite__option:hover,
.select-lite__option:focus{ background:var(--accent); color:white; }

.select-lite__option.search-match {
  background: var(--accent) !important;
  color: white !important;
  font-weight: bold !important;
}


/* ---- Main content ---- */
.content{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap)}
.card{background:var(--card);padding:14px;border-radius:var(--br);box-shadow:var(--shadow);border:1px solid var(--border)}
.card h2{margin:0 0 6px 0;font-size:18px}
.muted{color:var(--muted);font-size:14px}
label{display:block;margin-top:10px;margin-bottom:4px;color:var(--muted);font-size:14px}
input,select,textarea{width:100%;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px}
.result{margin-top:12px;padding:10px;border:1px dashed var(--k-border);border-radius:10px;background:var(--k-bg)}
.k{padding:2px 6px;border-radius:6px;border:1px solid var(--k-border);background:var(--k-bg)}
.foot{color:var(--muted);font-size:13px;margin-top:20px}

/* ---- Status indicators ---- */
.status {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  margin-top: 8px;
  text-align: center;
}

.status.loading {
  background-color: var(--k-bg);
  color: var(--accent);
  border: 1px solid var(--k-border);
}

.status.success {
  background-color: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.status.error {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Dark theme status adjustments */
@media (prefers-color-scheme: dark) {
  .status.success {
    background-color: #064e3b;
    color: #6ee7b7;
    border: 1px solid #065f46;
  }
  
  .status.error {
    background-color: #450a0a;
    color: #fca5a5;
    border: 1px solid #7f1d1d;
  }
}

:root[data-theme="dark"] .status.success {
  background-color: #064e3b;
  color: #6ee7b7;
  border: 1px solid #065f46;
}

:root[data-theme="dark"] .status.error {
  background-color: #450a0a;
  color: #fca5a5;
  border: 1px solid #7f1d1d;
}