:root {
    --bg: #0b0e17; --panel:#0f1424; --text:#e7eaf3; --muted:#9aa3b2;
    --accent:#7c5cff; --accent-2:#00d4ff; --card:#121935; --ring:#a996ff;
    --shadow: rgba(0,0,0,.35);
    --lamp-glow: rgba(255, 236, 142, .25);
    --lamp-cone: radial-gradient(70% 100% at 50% 0%, rgba(255, 240, 180, .55), rgba(255,240,180,.05) 70%, transparent 75%);
  }
  [data-theme="light"] {
    --bg:#f7f8fc; --panel:#ffffff; --text:#101424; --muted:#596077;
    --card:#f9faff; --ring:#7c5cff; --shadow: rgba(0,0,0,.18);
    --lamp-glow: rgba(255, 215, 100, .35);
    --lamp-cone: radial-gradient(70% 100% at 50% 0%, rgba(255, 230, 140, .75), rgba(255,230,140,.15) 70%, transparent 75%);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:
      radial-gradient(1200px 800px at 90% -10%, rgba(124,92,255,.25), transparent 60%),
      radial-gradient(900px 600px at -10% 110%, rgba(0,212,255,.18), transparent 60%),
      var(--bg);
    color:var(--text);
    font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    transition: background-color .35s ease, color .25s ease, background .6s ease;
  }
  
  
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
}

.muted {
  color: var(--muted);
}
.li {
  color: var(--muted);
}
  

  .container{max-width:1100px;margin:0 auto;padding:32px}
  header{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
  .logo{width:36px;height:36px;border-radius:12px;background:
    linear-gradient(135deg,var(--accent),var(--accent-2));
    display:grid;place-items:center;box-shadow:0 8px 24px rgba(124,92,255,.35), inset 0 0 0 1px rgba(255,255,255,.15)}
  .logo svg{width:20px;height:20px;fill:#fff}
  .brand span{font-weight:800;letter-spacing:.4px}

  /* ---------- Lamp toggle ---------- */
  .toggle-wrap{position:relative; display:flex; align-items:center; gap:10px}
  .lamp-btn{
    position:relative; width:48px; height:48px; border:1px solid rgba(255,255,255,.12);
    background:var(--panel); border-radius:14px; cursor:pointer;
    display:grid; place-items:center; box-shadow:0 10px 24px var(--shadow);
    transition: transform .15s ease, background .25s ease, border-color .25s ease;
  }
  .lamp-btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring)}
  .lamp{position:relative; width:26px; height:26px}
  /* cord */
  .lamp:before{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    top:-12px; width:2px; height:12px; background:currentColor; opacity:.6;
  }
  /* shade */
  .lamp .shade{
    position:absolute; left:50%; top:2px; transform:translateX(-50%);
    width:22px; height:10px; background:currentColor; border-radius:6px 6px 2px 2px;
  }
  /* bulb */
  .lamp .bulb{
    position:absolute; left:50%; top:11px; transform:translateX(-50%);
    width:8px; height:8px; border-radius:50%; background:#ffe08a;
    box-shadow:0 0 0 2px rgba(0,0,0,.15);
    transition: filter .25s ease, opacity .25s ease;
  }
  /* light cone (uses pseudo element on button for soft glow) */
  .lamp-btn::after{
    content:""; position:absolute; width:140px; height:120px; left:50%; top:52px;
    transform:translateX(-50%) rotate(0.001deg);
    background: var(--lamp-cone);
    opacity:0; pointer-events:none; filter: blur(0.2px);
    transition: opacity .35s ease, transform .35s ease;
  }
  .lamp-btn.on::after{ opacity:1; transform:translateX(-50%) translateY(2px); }
  .lamp-btn.on .bulb{ filter: drop-shadow(0 0 10px var(--lamp-glow)) drop-shadow(0 0 20px var(--lamp-glow)); }
  .mode-label{font-size:13px;color:var(--muted); user-select:none}

  .nav a{color:var(--muted);text-decoration:none;margin-left:16px}
  .nav a:hover{color:var(--text)}

  .hero{margin:48px 0 18px; display:grid; gap:10px}
  .hero h1{margin:0;font-size:clamp(28px,5vw,40px);line-height:1.15}
  .hero p{margin:0;color:var(--muted);max-width:60ch}

  .grid{display:grid;gap:18px;grid-template-columns:repeat(12,1fr);margin-top:22px}
  .card{
    grid-column: span 12;
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)), var(--card);
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px; padding:18px; text-decoration:none; color:var(--text);
    display:flex; gap:16px; align-items:center; position:relative; overflow:hidden;
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .25s ease;
  }
  .card:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring); transform:translateY(-2px)}
  .card:hover{transform:translateY(-4px); box-shadow:0 18px 38px var(--shadow)}
  .card .icon{ width:44px;height:44px;border-radius:14px;flex:0 0 44px;
    background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(0,212,255,.25));
    display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
  .card .icon svg{width:22px;height:22px;fill:#e9ecff}
  .card h3{margin:0;font-size:18px}
  .card p{margin:6px 0 0;color:var(--muted);font-size:14px}
  .chip{position:absolute;right:14px;top:14px;font-size:12px;color:#000;background:rgba(124,92,255,.2);
    border:1px solid rgba(124,92,255,.35); padding:4px 8px;border-radius:999px}
  @media (min-width:700px){ .card{grid-column: span 6} }
  @media (min-width:1000px){ .card{grid-column: span 4} }

  footer{margin:36px 0 10px;color:var(--muted);font-size:13px;display:flex;gap:8px;align-items:center}
  .tiny{opacity:.8}
  .btn{
    background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:none;
    padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none;
    box-shadow:0 8px 24px rgba(124,92,255,.35);
    transition:transform .15s ease, box-shadow .2s ease; display:inline-flex; align-items:center; gap:8px
  }
  .btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(124,92,255,.45)}
  .btn svg{width:16px;height:16px;fill:#fff}
  
  /* Generic modal shell (reuse if already present) */
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:60; pointer-events:none; }
.modal .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7); opacity:0; transition:opacity .25s ease; }
.modal .panel{
  position:relative; z-index:1; width:min(96vw,800px); max-height:92vh; overflow:auto;
  background:var(--panel); border:1px solid rgba(255,255,255,.1); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5); transform:scale(.96); opacity:0;
  transition: transform .25s ease, opacity .25s ease;
}
.modal.show{ pointer-events:auto; }
.modal.show .backdrop{ opacity:1; }
.modal.show .panel{ transform:scale(1); opacity:1; }

.modal .close{
  position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18); cursor:pointer;
}
.modal .close svg{ width:18px; height:18px; fill:#fff }

.alt-ok   { background:#112615; border:1px solid #1f7a2b; color:#b0ffc1; padding:10px 12px; border-radius:10px }
.alt-warn { background:#2a1b0e; border:1px solid #a46b27; color:#ffd9a8; padding:10px 12px; border-radius:10px }
.alt-err  { background:#2a1212; border:1px solid #b34a4a; color:#ffc0c0; padding:10px 12px; border-radius:10px }
.alt-muted{ color:var(--muted); font-size:14px }
.spinner{
  width:22px; height:22px; border:3px solid rgba(255,255,255,.25); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:middle;
}
@keyframes spin{ to { transform: rotate(360deg); } }