/* LO Toolkit portal. Brand: navy #0F1B2D, amber #E8A33D, Space Grotesk / Manrope / IBM Plex Mono. */
:root{
  --navy:#0F1B2D; --panel:#16263D; --line-d:#2A3D5A; --amber:#E8A33D; --amber-ink:#8A5A12;
  --bg:#F5F6F2; --card:#FFFFFF; --ink:#0F1B2D; --muted:#4A5668; --line:#DDE1DA; --soft:#EEF0EA;
  --ok:#2E7D4F; --warn:#9A5B00; --err:#B42318;
  --display:'Space Grotesk', system-ui, sans-serif; --body:'Manrope', system-ui, sans-serif; --mono:'IBM Plex Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--display); letter-spacing:-0.01em; line-height:1.15; margin:0}
button,input,select{font:inherit}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px}
.hidden{display:none !important}

/* top bar */
.top{background:var(--navy); color:#fff}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px}
.logo{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:20px; text-decoration:none; color:#fff}
.logo img{width:30px; height:30px}
.logo small{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:#9AA8BB; border-left:1px solid var(--line-d); padding-left:10px}
.top nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.top nav a,.top nav button{color:#D7DEE8; text-decoration:none; background:none; border:0; padding:8px 12px; border-radius:999px; cursor:pointer; font-size:15px; min-height:40px}
.top nav a:hover,.top nav button:hover{background:var(--panel); color:#fff}
.top nav a[aria-current="page"]{background:var(--panel); color:#fff}

/* auth screens */
.auth{min-height:calc(100vh - 64px); display:grid; place-items:center; padding:48px 20px; background:var(--navy); background-image:linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px); background-size:56px 56px}
.auth-card{width:100%; max-width:440px; background:var(--card); border-radius:20px; padding:36px 32px; box-shadow:0 24px 60px rgba(0,0,0,.28)}
.eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-ink); margin:0 0 10px}
.auth-card h1{font-size:30px; margin-bottom:8px}
.auth-card p.lead{color:var(--muted); margin:0 0 22px}

/* forms */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px; min-width:0}
.field label,.label{font-size:14px; font-weight:700}
.field .hint{font-size:13px; color:var(--muted)}
input[type=text],input[type=email],input[type=tel],select{width:100%; min-height:48px; padding:0 14px; border:1px solid #9AA8BB; border-radius:10px; background:#fff; color:var(--ink); font-size:16px}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
input[aria-invalid="true"]{border-color:var(--err)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:15px}
.check input{width:20px; height:20px; margin-top:2px; flex:0 0 auto; accent-color:var(--navy)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:999px; border:0; font-weight:700; font-size:16px; cursor:pointer; text-decoration:none}
.btn.primary{background:var(--navy); color:#fff}
.btn.amber{background:var(--amber); color:var(--navy)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid #9AA8BB}
.btn.block{width:100%}
.btn[disabled]{opacity:.6; cursor:default}
.msg{margin:14px 0 0; font-size:15px; font-weight:600}
.msg.ok{color:var(--ok)} .msg.err{color:var(--err)}
.small{font-size:14px; color:var(--muted)}
.divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:18px 0}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}

/* page sections */
.page{padding:40px 0 72px}
.page-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:24px}
.page-head h1{font-size:34px}
.page-head p{margin:6px 0 0; color:var(--muted)}
.panel{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px}
.grid2{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:0 20px}
.states{display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:6px}
.states label{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:14px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:#fff}
.states input{accent-color:var(--navy)}
fieldset{border:0; padding:0; margin:0 0 16px}
legend{font-size:14px; font-weight:700; margin-bottom:6px; padding:0}

/* notices */
.notice{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; border-radius:14px; padding:14px 18px; margin-bottom:20px; font-weight:600}
.notice.trial{background:#FFF4E0; border:1px solid #F0C982; color:#5C3B05}
.notice.info{background:#EAF1FB; border:1px solid #B9CDEB; color:#1B3A66}
.notice.warn{background:#FDECEC; border:1px solid #F1B4AE; color:#7A1A12}

/* dashboard */
.me{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:var(--muted); margin-top:8px}
.me b{color:var(--ink)}
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:3px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted)}
.pill.ok{border-color:#9BD0B0; color:var(--ok); background:#EEF8F1}
.pill.wait{border-color:#F0C982; color:var(--warn); background:#FFF8EA}
.tools{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px}
.tool{position:relative; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; min-height:190px}
a.tool:hover{border-color:var(--navy); box-shadow:0 10px 24px rgba(15,27,45,.08)}
.tool .ic{width:40px; height:40px; border-radius:12px; background:var(--navy); color:var(--amber); display:grid; place-items:center; font-family:var(--mono); font-weight:700}
.tool h3{font-size:20px}
.tool p{margin:0; color:var(--muted); font-size:15px; flex:1}
.tool .go{font-weight:700; font-size:15px}
.tool.locked{background:var(--soft)}
.tool.locked .ic{background:#C9D2DE; color:var(--navy)}
.tool .tag{position:absolute; top:18px; right:18px}
.section-label{font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:32px 0 12px}

/* setup screen when keys aren't in config.js yet */
.setup code{font-family:var(--mono); background:var(--soft); padding:2px 6px; border-radius:6px}

@media (max-width:560px){
  .auth-card{padding:28px 22px}
  .page-head h1{font-size:28px}
  .panel{padding:22px 18px}
  .logo small{display:none}
}