/* Shared colors for every page.
   Theme: data-theme="light" | "dark" on <html> (the user's choice), otherwise follow the device. */
:root{
  --bg:#0d1117; --panel:#151a23; --panel2:#1c2330; --border:#2a3342;
  --text:#e7ecf3; --muted:#8b97a8; --accent:#7c83ff; --accent2:#5b62f0; --on-accent:#ffffff;
  --user:#272e55; --err:#ef6461; --warn:#e0a43a; --ok:#3ccf8e; --code-bg:#0a0d13;
  --logo-a:#7c83ff; --logo-b:#b06cff; --shadow:0 18px 50px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f5f6fa; --panel:#ffffff; --panel2:#eef0f6; --border:#dde1ea;
    --text:#1b2130; --muted:#5f697b; --accent:#4f56d6; --accent2:#434ac8; --on-accent:#ffffff;
    --user:#e4e6ff; --err:#d23b36; --warn:#a86b12; --ok:#1e8e5a; --code-bg:#f2f4f8;
    --logo-a:#5b62f0; --logo-b:#9b55f5; --shadow:0 18px 50px rgba(20,25,45,.18);
    color-scheme: light;
  }
}
:root[data-theme="light"]{
  --bg:#f5f6fa; --panel:#ffffff; --panel2:#eef0f6; --border:#dde1ea;
  --text:#1b2130; --muted:#5f697b; --accent:#4f56d6; --accent2:#434ac8; --on-accent:#ffffff;
  --user:#e4e6ff; --err:#d23b36; --warn:#a86b12; --ok:#1e8e5a; --code-bg:#f2f4f8;
  --logo-a:#5b62f0; --logo-b:#9b55f5; --shadow:0 18px 50px rgba(20,25,45,.18);
  color-scheme: light;
}
.logo{display:inline-grid;place-items:center;flex-shrink:0;border-radius:28%;
  background:linear-gradient(135deg,var(--logo-a),var(--logo-b));color:#fff}
.logo svg{width:58%;height:58%}

/* Theme switch */
.theme-btn{background:var(--panel2);border:1px solid var(--border);color:var(--muted);border-radius:8px;
  padding:5px 8px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.theme-btn:hover{color:var(--text);border-color:var(--accent)}

/* Modals (ui.js) */
dialog.ui-modal{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:14px;
  padding:0;width:min(420px,calc(100vw - 32px));box-shadow:var(--shadow)}
dialog.ui-modal::backdrop{background:rgba(5,8,15,.55);backdrop-filter:blur(2px)}
dialog.ui-modal[open]{animation:ui-pop .14s ease-out}
@keyframes ui-pop{from{transform:translateY(6px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.ui-modal form{padding:22px 22px 18px;margin:0}
.ui-modal .ui-head{display:flex;gap:12px;align-items:flex-start}
.ui-modal .ui-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-weight:700;
  background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.ui-modal.error .ui-icon,.ui-modal.danger .ui-icon{background:color-mix(in srgb,var(--err) 18%,transparent);color:var(--err)}
.ui-modal.success .ui-icon{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.ui-modal h3{margin:4px 0 6px;font-size:17px}
.ui-modal .ui-msg{margin:0;color:var(--muted);font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ui-modal .ui-fields{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.ui-modal label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.ui-modal input{width:100%;box-sizing:border-box;padding:9px 11px;border-radius:8px;border:1px solid var(--border);
  background:var(--panel2);color:var(--text);font:inherit}
.ui-modal input:focus{outline:none;border-color:var(--accent)}
.ui-modal .ui-err{color:var(--err);font-size:13px;min-height:18px;margin-top:8px}
.ui-modal .ui-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.ui-modal button{border-radius:8px;padding:8px 16px;font:600 14px system-ui,sans-serif;cursor:pointer;border:1px solid var(--border);
  background:var(--panel2);color:var(--text)}
.ui-modal button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ui-modal.danger button.primary{background:var(--err);border-color:var(--err)}