*{box-sizing:border-box}
.hidden{display:none!important}
body{font-family:'Inter',sans-serif;min-height:100vh;overflow-x:hidden}

:root{
  --bg:#0a0a0f;
  --bg2:#111118;
  --bg3:#1a1a24;
  --bg4:#242432;
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.16);
  --text:#f1f1f3;
  --text2:rgba(241,241,243,.55);
  --text3:rgba(241,241,243,.3);
  --src-text:#e2e8f0;
  --src-strong:#ffffff;
  --src-em:#cbd5e1;
  --ex-title:#f1f1f3;
  --ex-type:rgba(241,241,243,.35);
  --instr-bg:#111118;
  --instr-header:#1a1a24;
  --sidebar-bg:#111118;
  --toolbar-bg:#111118;
  --input-bg:#1a1a24;
  --input-text:#f1f1f3;
  --input-ph:rgba(255,255,255,.25);
  --editor-bg:#1a1a24;
  --editor-text:#f1f1f3;
  --editor-ph:#4a5568;
  --ql-toolbar:#111118;
  --ql-border:#2e2e3e;
  --ql-icon:#9ca3af;
  --resize-bg:#1a1a24;
  --saved-name:#f1f1f3;
  --saved-member:rgba(241,241,243,.35);
}

body.light{
  --bg:#f8fafc;
  --bg2:#ffffff;
  --bg3:#f1f5f9;
  --bg4:#e8edf2;
  --border:#e2e8f0;
  --border2:#cbd5e1;
  --text:#0f172a;
  --text2:#475569;
  --text3:#94a3b8;
  --src-text:#1e293b;
  --src-strong:#0f172a;
  --src-em:#334155;
  --ex-title:#0f172a;
  --ex-type:#64748b;
  --instr-bg:#ffffff;
  --instr-header:#fffbeb;
  --sidebar-bg:#ffffff;
  --toolbar-bg:#ffffff;
  --input-bg:#f1f5f9;
  --input-text:#0f172a;
  --input-ph:#94a3b8;
  --editor-bg:#ffffff;
  --editor-text:#0f172a;
  --editor-ph:#94a3b8;
  --ql-toolbar:#f8fafc;
  --ql-border:#e2e8f0;
  --ql-icon:#475569;
  --resize-bg:#e2e8f0;
  --saved-name:#0f172a;
  --saved-member:#64748b;
}

body{background:var(--bg);color:var(--text);transition:background .25s,color .25s}

#topnav{background:var(--bg2);border-bottom:1px solid var(--border);transition:background .25s,border-color .25s}
#sidebar{background:var(--sidebar-bg);border-right:1px solid var(--border);transition:background .25s,border-color .25s}
#instructions-pane{background:var(--instr-bg);border-right:1px solid var(--border);transition:background .25s,border-color .25s}
.instr-header-bg{background:var(--instr-header);border-bottom:1px solid var(--border);transition:background .25s,border-color .25s}
#editor-toolbar{background:var(--toolbar-bg);border-bottom:1px solid var(--border);transition:background .25s,border-color .25s}
#editor-pane{background:var(--editor-bg);transition:background .25s}
#welcome-panel{background:var(--bg);transition:background .25s}

#resize-handle{width:5px;background:var(--resize-bg);cursor:col-resize;flex-shrink:0;transition:background .2s}
#resize-handle:hover{background:#ffb300}

.sidebar-label{color:var(--text3);transition:color .25s}
.sidebar-divider{border-color:var(--border);transition:border-color .25s}
.nav-text{color:var(--text);transition:color .25s}
.nav-text-muted{color:var(--text2);transition:color .25s}
.toolbar-label{color:var(--text3);transition:color .25s}
.word-count-text{color:var(--text3);transition:color .25s}
.welcome-title{color:var(--text);transition:color .25s}
.welcome-sub{color:var(--text2);transition:color .25s}
.instr-title{color:var(--text);transition:color .25s}
.instr-callout{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);transition:all .25s}
.instr-source-label{color:var(--text3);transition:color .25s}

.sidebar-ex-title{color:var(--ex-title);transition:color .25s}
.sidebar-ex-type{color:var(--ex-type);transition:color .25s}
.saved-name{color:var(--saved-name);transition:color .25s}
.saved-member{color:var(--saved-member);transition:color .25s}

#instr-source{color:var(--src-text);transition:color .25s;user-select:none;-webkit-user-select:none}
#instr-source p{margin:0}
#instr-source strong{color:var(--src-strong)}
#instr-source em{color:var(--src-em)}
#instr-source u{color:var(--src-strong)}

.fmt-tag{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.68rem;font-weight:700;
  background:var(--bg4);color:#f59e0b;
  padding:.18rem .6rem;border-radius:99px;
  border:1px solid rgba(245,158,11,.3);
  letter-spacing:.02em;margin-bottom:.1rem;
  transition:background .25s,color .25s;
}
body.light .fmt-tag{background:#1e293b;color:#fbbf24}

.src-line{padding-left:.6rem;border-left:3px solid #ffb300;margin-bottom:.06rem!important}

.app-input{
  background:var(--input-bg);
  border:1px solid var(--border2);
  color:var(--input-text);
  transition:all .25s;outline:none;
}
.app-input::placeholder{color:var(--input-ph)}
.app-input:focus{border-color:#ffb300;box-shadow:0 0 0 3px rgba(255,179,0,.15)}

.ex-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .75rem;border-radius:.75rem;
  cursor:pointer;border-left:3px solid transparent;
  transition:all .18s;
}
.ex-item:hover{background:var(--bg3)}
.ex-item.active{background:var(--bg3);border-left-color:#ffb300}
body.light .ex-item:hover{background:#f1f5f9}
body.light .ex-item.active{background:#fff8e6;border-left-color:#ffb300}

.saved-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem .75rem;border-radius:.75rem;
  cursor:pointer;transition:all .15s;
}
.saved-item:hover{background:var(--bg3)}
body.light .saved-item:hover{background:#f1f5f9}

.ql-toolbar.ql-snow{border:none;border-bottom:1px solid var(--ql-border);background:var(--ql-toolbar);padding:.5rem .75rem;transition:all .25s}
.ql-container.ql-snow{border:none;flex:1;overflow-y:auto;background:var(--editor-bg);font-family:'Inter',sans-serif;transition:background .25s}
.ql-editor{padding:2rem 2.5rem;min-height:100%;max-width:720px;margin:0 auto;font-size:1rem;line-height:1.8;color:var(--editor-text);transition:color .25s}
.ql-editor.ql-blank::before{font-style:italic;color:var(--editor-ph)}
.ql-snow .ql-stroke{stroke:var(--ql-icon)}
.ql-snow .ql-fill{fill:var(--ql-icon)}
.ql-snow .ql-picker{color:var(--ql-icon)}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke{stroke:#ffb300}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill{fill:#ffb300}

.nav-star{display:inline-block;animation:starPop .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes starPop{
  from{transform:scale(0) rotate(-40deg);opacity:0}
  to{transform:scale(1) rotate(0);opacity:1}
}

#no-copy-hint{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  background:#ef4444;color:#fff;font-size:.82rem;font-weight:600;
  padding:.55rem 1.4rem;border-radius:99px;
  opacity:0;pointer-events:none;transition:opacity .3s;
  z-index:9998;white-space:nowrap;
}
#no-copy-hint.show{opacity:1}

#celebration{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
}
#celebration.hidden{display:none!important}
.celeb-content{text-align:center;animation:celebPop .5s cubic-bezier(.34,1.56,.64,1)}
.celeb-emoji{font-size:7rem;display:block;animation:celebSpin .8s cubic-bezier(.34,1.56,.64,1)}
@keyframes celebPop{
  from{transform:scale(.3) translateY(40px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}
@keyframes celebSpin{
  from{transform:scale(0) rotate(-180deg);opacity:0}
  to{transform:scale(1) rotate(0);opacity:1}
}
#confetti-container{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.confetti-piece{position:absolute;border-radius:3px;animation:confettiFall linear forwards}
@keyframes confettiFall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0}
}

.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);display:flex;align-items:center;
  justify-content:center;z-index:500;
}
.modal-box{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:1rem;padding:1.5rem;max-width:380px;width:92%;
  box-shadow:0 20px 60px rgba(0,0,0,.4);border-top:3px solid #ffb300;
}
.modal-box h3{color:var(--text);font-size:1.1rem;font-weight:800;margin-bottom:.5rem}
.modal-box p{color:var(--text2);font-size:.875rem;font-weight:500;line-height:1.6;margin-bottom:1.2rem}

#theme-btn{background:var(--bg3);color:var(--text2);border:1px solid var(--border2);transition:all .2s}
#theme-btn:hover{background:var(--bg4);color:var(--text)}
#theme-btn svg{stroke:currentColor}

#logout-btn{background:var(--bg3);color:var(--text2);border:1px solid var(--border2);transition:all .2s}
#logout-btn:hover{background:var(--bg4);color:var(--text)}

.nav-divider{background:var(--border2)}

#nav-logros-block{background:var(--bg3);border-color:var(--border2);transition:all .25s}