:root{
  --bg:#FDFDF7;--surface:#ffffff;--surface2:#f4f3ee;
  --text:#111111;--muted:#77746e;--line:#E7E7E2;
  --radius:12px;--shadow:0 18px 50px rgba(0,0,0,.06)
}
html[data-theme="dark"]{
  --bg:#0e0e0e;--surface:#151515;--surface2:#1c1c1c;
  --text:#f4f3ef;--muted:#96938d;--line:#292929;
  --shadow:0 18px 50px rgba(0,0,0,.25)
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:var(--bg)}
.brand{display:flex;align-items:center;gap:12px}.brand img{height:28px;width:auto;display:block}.brand .logo-dark{display:none}html[data-theme='dark'] .brand .logo-light{display:none}html[data-theme='dark'] .brand .logo-dark{display:block}
.brand small{font-size:11px;color:var(--muted);font-weight:500;margin-left:8px;letter-spacing:0}
.iconbtn{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:9px 12px;border-radius:9px}
.login-wrap{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:24px}
.login-card{width:min(430px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.eyebrow{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
h1{font-size:32px;line-height:1.05;letter-spacing:-1.5px;margin:12px 0 10px}
p{color:var(--muted);line-height:1.6}
.field{width:100%;padding:14px 15px;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:9px;margin:12px 0}
.primary{width:100%;padding:14px;border:0;border-radius:9px;background:var(--text);color:var(--bg);font-weight:700}
.error{min-height:22px;color:#b64040;font-size:13px;margin-top:10px}
.shell{display:none;min-height:calc(100vh - 68px);grid-template-columns:220px 1fr}
.sidebar{border-right:1px solid var(--line);padding:22px}
.navitem{padding:11px 12px;border-radius:8px;color:var(--muted);margin-bottom:4px}
.navitem.active{background:var(--surface2);color:var(--text);font-weight:650}
.main{padding:34px;max-width:1180px;width:100%}
.page-title{font-size:34px;letter-spacing:-1.5px;margin:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card .label{color:var(--muted);font-size:13px}
.card .value{font-size:28px;font-weight:700;margin-top:12px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.status{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;background:#4d8d59}
@media(max-width:760px){
  .shell{grid-template-columns:1fr}.sidebar{display:none}.main{padding:22px}.grid{grid-template-columns:1fr}
}


/* =========================================
   LETRAS GRADIENT BRAND — WEB V2
   ========================================= */

:root {
  --bg: #F9F8F4;
  --surface: rgba(255,255,255,.78);
  --surface2: #F2F1ED;

  --text: #151528;
  --muted: #737281;

  --line: rgba(21,21,40,.11);

  --brand-aqua: #3DDACF;
  --brand-blue: #5E9AF6;
  --brand-purple: #B68AF4;
  --brand-pink: #F6B4D1;
  --brand-ink: #151528;
}

html[data-theme="dark"] {
  --bg: #11121C;
  --surface: #171824;
  --surface2: #1C1D2A;

  --text: #F9F8F4;
  --muted: #AAA9B5;

  --line: rgba(255,255,255,.09);
}

.logo-light {
  display: block;
}

.logo-dark {
  display: none;
}

html[data-theme="dark"] .logo-light {
  display: none;
}

html[data-theme="dark"] .logo-dark {
  display: block;
}

.brand img,
.landing-brand img {
  object-fit: contain;
  width: auto;
}


/* LETRAS WEB V4 — neutral product family */
:root{--bg:#f5f3ee;--surface:#fcfbf8;--surface2:#efede7;--text:#151511;--muted:#736f67;--line:rgba(23,23,22,.07);--radius:12px;--shadow:0 1px 2px rgba(23,23,22,.025),0 14px 38px rgba(23,23,22,.055)}html[data-theme="dark"]{--bg:#0f0f0f;--surface:#151514;--surface2:#1d1d1b;--text:#f2f2ef;--muted:#9a9a93;--line:rgba(255,255,255,.065);--shadow:0 14px 38px rgba(0,0,0,.22)}body{font-family:Inter,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.topbar{border-bottom:0;background:var(--surface);height:64px}.iconbtn{border:0;background:var(--surface2);border-radius:8px}.login-card{border:0;box-shadow:var(--shadow)}.field{border-color:var(--line);background:var(--surface)}.primary{border-radius:8px}.panel,.card{border:0;box-shadow:var(--shadow)}