:root{
  --bg0:#f7f3ee;
  --bg1:#eef3fb;
  --paper:rgba(255,255,255,.78);
  --paper2:rgba(255,255,255,.92);
  --text:#101828;
  --muted:#475467;
  --border:rgba(16,24,40,.14);
  --shadow:0 18px 45px rgba(16,24,40,.12);
  --shadow2:0 8px 20px rgba(16,24,40,.10);
  --accent:#0ea5a4;
  --accent2:#f97316;
  --radius:18px;
  --radius2:14px;
}

*{box-sizing:border-box}
html{
  color-scheme:light;
  background:
    radial-gradient(1200px 900px at 14% -10%, rgba(14,165,164,.22), transparent 60%),
    radial-gradient(900px 700px at 98% 8%, rgba(249,115,22,.18), transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
}
body{
  margin:0 auto;
  max-width:1100px;
  padding:clamp(16px,3vw,36px);
  color:var(--text);
  font:16px/1.55 "Segoe UI Variable","Segoe UI",Tahoma,sans-serif;
}
@media (prefers-reduced-motion:no-preference){
  body{animation:rise .45s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}

h1,h2,h3{
  margin:0 0 .6rem;
  letter-spacing:-.01em;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",serif;
}
h2{font-size:clamp(22px,2.6vw,34px)}
h3{font-size:clamp(18px,2vw,22px);margin-top:1.2rem}

p{margin:.6rem 0}
small{color:var(--muted)}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95em;
  padding:.1em .35em;
  border-radius:10px;
  background:rgba(16,24,40,.06);
  border:1px solid rgba(16,24,40,.08);
}

a{color:inherit;text-decoration-color:rgba(14,165,164,.45);text-underline-offset:3px}
a:hover{text-decoration-color:rgba(14,165,164,.9)}

button,.btn,input,select{
  font:inherit;
}
button,.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.55rem .9rem;
  border-radius:999px;
  border:1px solid rgba(16,24,40,.14);
  background:rgba(255,255,255,.72);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  cursor:pointer;
  text-decoration:none;
}
button:hover,.btn:hover{border-color:rgba(14,165,164,.55);background:rgba(255,255,255,.9)}
button:active,.btn:active{transform:translateY(1px)}
button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed}

input,select{
  border-radius:12px;
  border:1px solid rgba(16,24,40,.14);
  background:rgba(255,255,255,.86);
  padding:.5rem .65rem;
  outline:none;
}
input:focus,select:focus{border-color:rgba(14,165,164,.75);box-shadow:0 0 0 4px rgba(14,165,164,.14)}
label{display:inline-flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.35rem .6rem .35rem 0}

/* Top bars (index/viewer) */
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--paper2),var(--paper));
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(10px);
}
.top h1,.top h2,.top h3{margin:0}
.top a{white-space:nowrap}

/* Lists */
ul{padding-left:1.1rem}
ul.docs{list-style:none;padding:0;margin:.5rem 0 0}
ul.docs li{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 12px;
  padding:12px 14px;
  margin:10px 0;
  border-radius:var(--radius2);
  background:linear-gradient(180deg,var(--paper2),var(--paper));
  border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}
ul.docs li a{
  padding:.42rem .72rem;
  border-radius:999px;
  border:1px solid rgba(14,165,164,.35);
  text-decoration:none;
  background:rgba(14,165,164,.10);
}
ul.docs li a:hover{background:rgba(14,165,164,.16);border-color:rgba(14,165,164,.55)}

/* Tables (admin) */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--paper2),var(--paper));
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
}
th,td{
  border-bottom:1px solid rgba(16,24,40,.10);
  padding:10px 12px;
  vertical-align:top;
}
tr:last-child td{border-bottom:0}
th{
  text-align:left;
  font-weight:700;
  color:rgba(16,24,40,.86);
  background:rgba(16,24,40,.04);
}
td form{margin:0}
@media (max-width:720px){
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{white-space:nowrap}
}

/* Auth pages */
body.is-auth{max-width:560px}
body.is-auth h2{text-align:center;margin-top:.2rem}
body.is-auth form{
  margin-top:12px;
  padding:16px;
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--paper2),var(--paper));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

/* Viewer */
body.is-viewer{max-width:none;padding:0}
body.is-viewer .top{border-radius:0;border-left:0;border-right:0}
#canvasWrap{display:flex;justify-content:center;padding:18px}
canvas{max-width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow)}

/* Simple status colors */
.err{color:#b42318}
.ok{color:#067647}