/* Theme variables that can be updated from JS */
:root{
  --accent: #2563eb;
  --accent-2: #7c3aed;
}

/* Center support page content */
.support-page, .support-page .card, .support-card, #takoQr {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Make QR box centered and responsive */
#takoQr { display:flex; justify-content:center; align-items:center; width:180px; height:180px; margin:12px auto; background:transparent; padding:8px; border-radius:12px; }

/* Ensure menu theme toggle is hidden (remove dark mode) */
.menu-toggle { display:none !important; }

/* Modern Tech Light - assets/style.css */
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=Plus+Jakarta+Sans:wght@300;400;600&display=swap');

:root{
  --bg-1: #f7f9ff;
  --bg-2: #eef6ff;
  --surface: #ffffff;
  --muted: #6b7280;
  --text: #0b132b;
  --accent: #2563eb;
  --accent-2: #7c3aed;
  --card-radius: 18px;
  --shadow: 0 10px 30px rgba(11,19,43,0.06);
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: background .25s ease, color .25s ease;
  display:flex;flex-direction:column;align-items:center;padding:20px;
}

/* Topbar / header */
.topbar{
  width:100%;max-width:980px;margin-top:8px;display:flex;justify-content:center;align-items:center;padding:10px 12px;
}
.topbar h1{font-family:'Outfit',sans-serif;font-size:20px;margin:0;color:var(--text)}

/* Splash */
.splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffffff,#e8f4ff,#f3eefe);z-index:999999;transition:opacity .6s}
.splash-inner{text-align:center}
.splash-logo{font-size:56px;margin-bottom:8px}
.splash-title{font-size:22px;font-weight:700;margin-bottom:6px}

/* Layout */
.main{width:100%;max-width:980px;margin-top:12px}
.card{
  background:var(--surface);
  border-radius:var(--card-radius);
  padding:20px;
  box-shadow:var(--shadow);
  margin-bottom:16px;
}
.card h2, .card h1, .card h3 { text-align:center; font-family:'Outfit',sans-serif; color:var(--text); margin-top:0; }

/* Sidebar */
.hamburger{position:fixed;top:14px;left:14px;z-index:99999;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:none;width:50px;height:50px;border-radius:12px;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,99,235,0.18);cursor:pointer}
.sidebar{position:fixed;left:-360px;top:0;bottom:0;width:320px;background:rgba(255,255,255,0.9);backdrop-filter:blur(6px);box-shadow:8px 0 50px rgba(0,0,0,0.08);transition:left .32s;z-index:99998;padding:20px;display:flex;flex-direction:column;align-items:center}
.sidebar.open{left:0}

/* Menu */
.menu{display:flex;flex-direction:column;gap:8px;width:100%}
.menu-item{background:transparent;border:none;text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:700;width:100%;font-family:'Outfit',sans-serif;color:var(--text)}
.menu-item.active{background:linear-gradient(90deg,rgba(37,99,235,0.08),rgba(124,58,237,0.06))}

/* Overlay */
.overlay{position:fixed;inset:0;background:rgba(11,19,43,0.18);z-index:99990;opacity:0;pointer-events:none;transition:opacity .28s}
.overlay.visible{opacity:1;pointer-events:auto;}

/* Inputs and forms */
.input-card .row{display:flex;gap:12px;flex-wrap:wrap}
.input-group{display:flex;flex-direction:column;min-width:160px;flex:1}
.input-group label{font-weight:600;margin-bottom:6px;color:var(--text)}
.input-group input,.input-group select,textarea{padding:10px;border-radius:10px;border:1px solid #e6eef9;background:linear-gradient(180deg,#fff,#fbfdff);font-size:14px;color:var(--text)}

/* Buttons */
.glow-btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:none;padding:12px 14px;border-radius:12px;cursor:pointer;font-weight:700;box-shadow:0 8px 30px rgba(37,99,235,0.12);transition:transform .12s ease, box-shadow .12s ease}
.glow-btn:active{transform:translateY(1px)}

/* Result */
.result-text{word-break:break-all;background:#f3f6fb;padding:12px;border-radius:10px;color:#07213a;margin-top:12px}

/* QR & YAML */
.qr-box{margin-top:16px;display:flex;justify-content:center;align-items:center;padding:14px;border-radius:12px;background:#f7f9ff;box-shadow:0 8px 24px rgba(2,6,23,0.04)}
.yaml-card{margin-top:14px;background:#fbfdff;border-radius:10px;padding:12px}
.yaml-preview{max-height:420px;overflow:auto;background:#0b1220;color:#dff3ff;padding:12px;border-radius:8px;font-size:13px;white-space:pre;line-height:1.5}

/* Tools grid */
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.tools-grid{grid-template-columns:1fr} .hamburger{left:10px;top:10px} .sidebar{width:260px} .qr-box canvas{width:240px;height:240px}}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100005;background:rgba(11,19,43,0.35)}
.modal.hidden{display:none}
.modal-card{background:var(--surface);padding:14px;border-radius:12px;width:92%;max-width:720px;box-shadow:0 20px 60px rgba(11,19,43,0.06)}

/* Spinner & toast */
.spinner{position:fixed;right:20px;bottom:20px;background:rgba(11,19,43,0.85);color:#fff;padding:10px 12px;border-radius:10px;z-index:100010;box-shadow:0 8px 30px rgba(0,0,0,0.2)}
.hidden{display:none!important}
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:100020;display:flex;flex-direction:column;gap:8px}
.toast{background:linear-gradient(90deg,#06b6d4,#7c3aed);color:#fff;padding:10px 12px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.12);opacity:0;transform:translateY(10px);transition:all .28s}
.toast.show{opacity:1;transform:translateY(0)}

/* Footer */
footer{width:100%;max-width:980px;text-align:center;margin-top:8px;color:var(--muted);font-size:0.95rem;padding:12px}

/* small tweaks */
.card ul{padding-left:18px;margin-top:8px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}