/* Basic reset & font */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',sans-serif;background:linear-gradient(180deg,#f7fbff,#eef6ff);color:#0a0f1a;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:18px;transition:background .3s}
/* dynamic gradient accent */
:root{--accent1:#007BFF;--accent2:#FF1744;--bg:#fff}
body.dynamic-gradient { --g1: #ff1744; --g2:#2196f3; animation: gradientShift 10s linear infinite; }
@keyframes gradientShift{0%{--g1:#ff1744;--g2:#2196f3}50%{--g1:#7c4dff;--g2:#00bcd4}100%{--g1:#ff1744;--g2:#2196f3}}

/* 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}
.splash-sub{opacity:.8}

/* hamburger */
.hamburger{position:fixed;top:14px;left:14px;z-index:99999;background:linear-gradient(90deg,var(--g1,#ff1744),var(--g2,#2196f3));color:#fff;border:none;width:50px;height:50px;border-radius:10px;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,0.15);cursor:pointer}
.hamburger:active{transform:scale(.98)}

/* sidebar */
.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.12);transition:left .32s;z-index:99998;padding:20px;display:flex;flex-direction:column;align-items:center}
.sidebar.open{left:0;box-shadow:18px 0 80px rgba(0,0,0,0.2)}
.clock-wrap{text-align:center;margin-bottom:10px;width:100%}
.sidebar-clock{font-weight:800;font-size:34px}
.clock-label{font-size:12px;opacity:.85;margin-top:6px}
.sidebar-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.menu{display:flex;flex-direction:column;gap:8px;width:100%}
.menu-item{background:transparent;border:none;text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer;font-weight:700;width:100%}
.menu-item.active{background:linear-gradient(90deg,rgba(0,123,255,0.1),rgba(255,23,68,0.06))}
.menu-sep{height:1px;background:rgba(0,0,0,0.06);width:100%;margin:10px 0}

/* theme selector */
.theme-selector{width:100%;margin-top:8px;display:flex;flex-direction:column;gap:6px}
.theme-selector select{padding:8px;border-radius:8px;border:1px solid #d0d7de}

/* overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.28);z-index:99990;opacity:0;pointer-events:none;transition:opacity .28s}
.overlay.visible{opacity:1;pointer-events:auto;backdrop-filter:blur(3px)}

/* topbar & main */
.topbar{width:100%;max-width:980px;margin-top:8px;display:flex;justify-content:center;align-items:center}
.topbar h1{font-size:20px}
.main{width:100%;max-width:980px;margin-top:12px}
.card{background:var(--bg,#fff);border-radius:12px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,0.06);margin-bottom:12px}

/* inputs */
.input-card .row{display:flex;gap:12px;flex-wrap:wrap}
.input-group{display:flex;flex-direction:column;min-width:160px;flex:1}
.input-group.small{max-width:120px}
.input-group label{font-weight:600;margin-bottom:6px}
.input-group input,.input-group select,textarea{padding:10px;border-radius:8px;border:1px solid #d0d7de;font-size:14px}

/* buttons */
.glow-btn{background:linear-gradient(90deg,var(--g1,#007BFF),var(--g2,#FF1744));color:#fff;border:none;padding:12px 14px;border-radius:12px;cursor:pointer;font-weight:800;box-shadow:0 8px 30px rgba(0,0,0,0.12)}
.glow-btn.small{padding:8px 10px;font-size:14px}
.button-group{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap}

/* result area */
.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:#fff;box-shadow:0 10px 40px rgba(0,0,0,0.04)}
.qr-box canvas{width:300px;height:300px}
.yaml-card{margin-top:14px;background:#f7f9fc;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 layout */
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.tools-grid{grid-template-columns:1fr} .qr-box canvas{width:240px;height:240px} .hamburger{left:10px;top:10px} .sidebar{width:260px}}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:100005;background:rgba(0,0,0,0.35)}
.modal.hidden{display:none}
.modal-card{background:#fff;padding:14px;border-radius:10px;width:92%;max-width:720px;box-shadow:0 20px 60px rgba(0,0,0,0.4)}
/* spinner */
.spinner{position:fixed;right:20px;bottom:20px;background:rgba(0,0,0,0.7);color:#fff;padding:10px 12px;border-radius:10px;z-index:100010;box-shadow:0 8px 30px rgba(0,0,0,0.4)}
.hidden{display:none!important}

/* toast */
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:100020;display:flex;flex-direction:column;gap:8px}
.toast{background:rgba(10,18,30,0.95);color:#fff;padding:10px 12px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.4);opacity:0;transform:translateY(10px);transition:all .28s}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{background:linear-gradient(90deg,#06b6d4,#7c3aed)}
.toast.info{background:linear-gradient(90deg,#3b82f6,#06b6d4)}
.toast.warn{background:linear-gradient(90deg,#f59e0b,#ef4444)}

/* dark mode */
body.dark{background:#07070a;color:#daeefe}
body.dark .card{background:#0f1216;color:#e6eef8;box-shadow:0 10px 40px rgba(0,0,0,0.6)}
body.dark .glow-btn{background:linear-gradient(90deg,#ff1744,#2196f3)}
body.dark .yaml-preview{background:#061017;color:#e6f8ff}

/* dynamic theme colors (simple mapping) */
body.theme-red{--g1:#ff1744;--g2:#ff7a7a}
body.theme-blue{--g1:#007bff;--g2:#00bcd4}
body.theme-purple{--g1:#7c4dff;--g2:#ff63c3}
body.theme-cyan{--g1:#00bcd4;--g2:#7af0ff}