/* VERGAL design system — warm editorial ("Karupatti / Roots", HyperBridge) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,400&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* Warm "roots" palette — jaggery, red earth, palm, parchment.
     Accent vars keep their legacy names so every surface recolours at once:
     --cyan = jaggery gold, --blue = red-earth terracotta. */
  --navy:#130D07; --navy2:#1C140B; --panel:#241A0E; --panel2:#180F06;
  --cyan:#E3AE45; --blue:#BE5E37; --gold:#D9A441;
  --ink:#F2E8D4; --mist:#C8B595; --faint:#8E7A58;
  --line:rgba(227,174,69,.18); --line2:rgba(200,181,149,.12);
  --ok:#A6B85C; --warn:#E7B24A; --bad:#D2674A;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;color:var(--ink);line-height:1.6;min-height:100vh;overflow-x:hidden;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(190,94,55,.22), transparent 60%),
    radial-gradient(900px 600px at 10% 6%, rgba(227,174,69,.13), transparent 55%),
    linear-gradient(180deg,#1A1108 0%, var(--navy) 58%)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.orb{position:fixed;border-radius:50%;filter:blur(100px);opacity:.18;z-index:0;pointer-events:none}
.orb.a{width:520px;height:520px;background:var(--cyan);top:-160px;right:-120px;opacity:.16}
.orb.b{width:460px;height:460px;background:var(--blue);bottom:-180px;left:-140px;opacity:.16}
.orb.c{width:360px;height:360px;background:var(--ok);top:44%;left:58%;opacity:.06}

a{color:var(--cyan);text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
.mono{font-family:'JetBrains Mono',monospace}
.serif{font-family:'Fraunces',serif}
.muted{color:var(--mist)}
.faint{color:var(--faint)}

/* nav */
nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:rgba(19,13,7,.66);border-bottom:1px solid var(--line)}
.nav-in{max-width:1140px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:22px;letter-spacing:.06em}
.brand b{color:var(--cyan)}
.brand .tamil{color:var(--gold);font-size:16px;margin-left:8px}
.nav-right{display:flex;align-items:center;gap:14px;font-size:13.5px}
.badge{font-family:'JetBrains Mono',monospace;font-size:11px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--cyan)}
.badge.role{color:var(--gold);border-color:rgba(217,164,65,.42)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:11px;cursor:pointer;font-family:'Outfit';font-weight:600;font-size:14px;padding:11px 18px;transition:transform .15s,filter .2s,border-color .2s,background .2s}
.btn.primary{color:#211405;background:linear-gradient(120deg,var(--cyan),var(--blue));box-shadow:0 8px 24px rgba(190,94,55,.22)}
.btn.primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--mist)}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn.tiny{padding:6px 12px;font-size:12.5px;border-radius:9px}
.btn.danger{background:transparent;border:1px solid rgba(210,103,74,.42);color:var(--bad)}
.btn.danger:hover{background:rgba(210,103,74,.12)}

/* inputs */
input,select,textarea{font-family:'Outfit';font-size:14px;color:var(--ink);background:rgba(13,8,4,.55);border:1px solid var(--line);border-radius:11px;padding:11px 14px;outline:none;width:100%;transition:border .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(227,174,69,.16)}
label.fld{display:block;font-size:12.5px;color:var(--mist);margin:0 0 6px}
select option{background:var(--navy2)}

/* cards / panels */
.panel{background:linear-gradient(160deg,rgba(42,30,16,.9),rgba(25,17,8,.6));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 50px rgba(0,0,0,.36)}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.3em;color:var(--cyan);text-transform:uppercase}

/* gate */
.gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 26%,#2C1E10 0%,var(--navy) 72%)}
.gate-card{position:relative;width:min(440px,92vw);padding:46px 38px;text-align:center;background:rgba(36,26,14,.74);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.gate-title{font-family:'Fraunces',serif;font-size:52px;font-weight:600;letter-spacing:.04em;margin:12px 0 0;background:linear-gradient(120deg,#F7EFDC,var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gate-tamil{font-family:'Fraunces',serif;color:var(--gold);font-size:20px}
.gate-sub{color:var(--mist);font-size:13.5px;margin:8px 0 26px}
.err{color:var(--bad);font-size:13px;min-height:18px;margin-top:10px}

/* table */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:12px 14px;border-bottom:1px solid var(--line)}
td{padding:12px 14px;border-bottom:1px solid var(--line2);color:var(--ink);vertical-align:middle}
tr:hover td{background:rgba(227,174,69,.05)}

/* pills */
.pill{font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--mist);white-space:nowrap}
.pill.view{color:var(--cyan);border-color:rgba(227,174,69,.4)}
.pill.download{color:var(--blue);border-color:rgba(190,94,55,.4)}
.pill.login{color:var(--ok);border-color:rgba(166,184,92,.4)}
.pill.delete,.pill.login_fail,.pill.download_denied,.pill.version_delete{color:var(--bad);border-color:rgba(210,103,74,.4)}
.pill.upload,.pill.edit,.pill.share_create,.pill.version_create,.pill.version_view{color:var(--warn);border-color:rgba(231,178,74,.4)}
.pill.page_time{color:var(--mist)}
.pill.listen{color:#CFA079;border-color:rgba(207,160,121,.45)}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 20px;font-size:14px;opacity:0;pointer-events:none;transition:all .25s;z-index:80;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:rgba(166,184,92,.5)}
.toast.bad{border-color:rgba(210,103,74,.5)}

/* misc layout */
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.grid{display:grid;gap:18px}
.stat{padding:22px;border-radius:var(--radius)}
.stat .n{font-family:'Fraunces',serif;font-size:42px;font-weight:600;line-height:1;color:#F7EFDC}
.stat .l{font-size:12.5px;color:var(--mist);margin-top:6px}
.hidden{display:none!important}
.center{text-align:center}
.shimmer{background:linear-gradient(110deg,#F7EFDC 20%,var(--cyan) 50%,#F7EFDC 80%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sh 6s linear infinite}
@keyframes sh{to{background-position:200% center}}