:root{--bg:#0F0A1A;--bg-card:#1a1230;--bg-input:#221940;--border:#352b52;--text:#e8e4f0;--text-sec:#a098b8;--text-muted:#6e6490;--primary:#8B5CF6;--accent:#F472B6;--green:#4ade80;--shade0:#161b22;--shade1:#0e4429;--shade2:#006d32;--shade3:#26a641;--shade4:#39d353;--radius:16px;--radius-sm:8px;--font:'Inter',-apple-system,sans-serif;--mono:'JetBrains Mono',monospace;--transition:200ms ease}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
.header{background:rgba(15,10,26,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header-inner{max-width:960px;margin:0 auto;padding:.55rem 1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.3rem}
.logo{display:flex;align-items:center;gap:.3rem}.logo-icon{font-size:1.1rem}.logo-text{font-size:.95rem;font-weight:800;color:var(--primary)}
.header-actions{display:flex;gap:.25rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.2rem;padding:.38rem .65rem;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:.78rem;font-weight:600;cursor:pointer;transition:all var(--transition)}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{filter:brightness(1.15)}
.btn-ghost{background:transparent;color:var(--text-sec);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-input)}
.btn-sm{font-size:.7rem;padding:.22rem .4rem}
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(120%);background:var(--bg-card);color:var(--text);padding:.5rem .8rem;border-radius:var(--radius);border:1px solid var(--border);font-size:.78rem;z-index:1000;opacity:0;transition:all 300ms ease}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.main{max-width:960px;margin:0 auto;padding:.75rem}
.controls{display:flex;gap:.5rem;margin-bottom:.6rem;flex-wrap:wrap;align-items:flex-end}
.control-group{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem}
.label{font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem}
.input{padding:.35rem .5rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:.78rem;color:var(--text)}
.shade-picker{display:flex;gap:3px}
.shade-btn{width:22px;height:22px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:all var(--transition)}
.shade-btn[data-level="0"]{background:var(--shade0)}.shade-btn[data-level="1"]{background:var(--shade1)}.shade-btn[data-level="2"]{background:var(--shade2)}.shade-btn[data-level="3"]{background:var(--shade3)}.shade-btn[data-level="4"]{background:var(--shade4)}
.shade-btn.active{border-color:var(--accent)}
.template-btns{display:flex;gap:.2rem}
.grid-container{display:flex;gap:4px;overflow-x:auto;padding:.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.6rem}
.day-labels{display:flex;flex-direction:column;gap:2px;padding-top:14px}
.day-labels span{height:11px;font-size:.55rem;color:var(--text-muted);line-height:11px}
.graph-grid{display:flex;gap:2px}
.graph-col{display:flex;flex-direction:column;gap:2px}
.graph-col-header{font-size:.5rem;color:var(--text-muted);text-align:center;height:12px}
.graph-cell{width:11px;height:11px;border-radius:2px;cursor:pointer;transition:all 100ms}
.graph-cell[data-level="0"]{background:var(--shade0)}.graph-cell[data-level="1"]{background:var(--shade1)}.graph-cell[data-level="2"]{background:var(--shade2)}.graph-cell[data-level="3"]{background:var(--shade3)}.graph-cell[data-level="4"]{background:var(--shade4)}
.script-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:.4rem .65rem;border-bottom:1px solid var(--border);font-size:.72rem;font-weight:600;color:var(--text-muted)}
.script-output{padding:.5rem;font-family:var(--mono);font-size:.7rem;color:var(--green);white-space:pre;overflow-x:auto;line-height:1.55;margin:0;max-height:250px}