/* SustAIn — paleta zielono-szara (ux.md §0a). Zieleń = postęp/akcent; brak czerwieni-wyrzutu. */
:root{
  --bg:#15191c;          /* grafit */
  --panel:#1d2422;       /* ciemny panel */
  --panel-2:#222b28;
  --line:#2c3733;
  --text:#d8ddd7;
  --muted:#8a948c;
  --accent:#6f9f7a;      /* szałwiowa zieleń */
  --accent-dim:#4a5d4f;
  --err:#c98b6b;         /* stonowany, nie alarmowa czerwień */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}

/* --- animowane tło: subtelny pełzający zielony gradient na graficie --- */
.bg{
  position:fixed; inset:-20%; z-index:0;
  background:
    radial-gradient(40% 55% at 25% 30%, rgba(111,159,122,.16), transparent 70%),
    radial-gradient(45% 50% at 80% 70%, rgba(74,93,79,.18), transparent 70%),
    radial-gradient(35% 40% at 60% 20%, rgba(111,159,122,.10), transparent 70%),
    var(--bg);
  filter:saturate(1.05);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(-3%,-2%,0) scale(1.05)}
  50%{transform:translate3d(2%,3%,0) scale(1.12)}
  100%{transform:translate3d(4%,-3%,0) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){ .bg{animation:none} }

/* --- ekran logowania --- */
.login{position:relative; z-index:1; min-height:100dvh; display:grid; place-items:center; padding:24px}
.modal{
  width:min(360px,92vw); padding:30px 26px 26px; text-align:center;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.45); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.badge{
  width:92px; height:92px; margin:-58px 0 4px; border-radius:22px;
  display:grid; place-items:center;
  background:var(--panel-2); border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(111,159,122,.15);
}
.badge img{border-radius:14px; display:block}
h1{margin:2px 0 0; font-size:26px; letter-spacing:.5px; font-weight:650}
.tagline{margin:0 0 8px; color:var(--muted); font-size:13px}
#pw{
  width:100%; padding:12px 14px; border-radius:12px;
  background:var(--bg); border:1px solid var(--line); color:var(--text); font-size:15px;
}
#pw:focus{outline:none; border-color:var(--accent-dim); box-shadow:0 0 0 3px rgba(111,159,122,.18)}
#enter{
  width:100%; padding:12px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg,var(--accent),var(--accent-dim)); color:#0e1311;
  font-weight:650; font-size:15px; transition:filter .15s;
}
#enter:hover{filter:brightness(1.08)}
#enter:disabled{opacity:.6; cursor:default}
.err{min-height:1.1em; margin:0; color:var(--err); font-size:13px}

/* --- shell aplikacji (M0) --- */
.shell{position:relative; z-index:1; min-height:100dvh; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel) 80%,transparent);
}
.logo{border-radius:7px}
.brand{font-weight:650; letter-spacing:.4px}
.env-tag{font-size:11px; color:var(--accent); border:1px solid var(--accent-dim); border-radius:6px; padding:1px 6px}
.ghost{margin-left:auto; background:none; border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:8px; cursor:pointer}
.ghost:hover{color:var(--text); border-color:var(--accent-dim)}
.stage{flex:1; display:flex; min-height:0}
.scene{flex:1; display:grid; place-items:center; padding:24px}
.placeholder{color:var(--muted)}
.drawer{width:300px; border-left:1px solid var(--line); background:color-mix(in srgb,var(--panel) 70%,transparent); display:flex; flex-direction:column}
.drawer-head{padding:12px 16px; border-bottom:1px solid var(--line); font-weight:600; color:var(--accent)}
.drawer-body{padding:16px}
.muted{color:var(--muted); font-size:13px}
@media (max-width:760px){ .drawer{display:none} }

/* ============ M1: nav, player, gryf, czat ============ */
.nav{display:flex; gap:4px; margin-left:18px}
.nav-btn{background:none; border:1px solid transparent; color:var(--muted); padding:6px 12px; border-radius:8px; cursor:pointer; font-size:14px}
.nav-btn:hover:not(:disabled){color:var(--text)}
.nav-btn.is-active{color:var(--text); border-color:var(--line); background:var(--panel-2)}
.nav-btn:disabled{opacity:.4; cursor:default}
.topbar .ghost{margin-left:0}
#logout{margin-left:auto}
#drawer-toggle{margin-left:auto}

.scene{flex:1; display:block; overflow:auto; padding:20px}
.view[hidden]{display:none}

.ex-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.ex-head h2{margin:0 0 2px; font-size:18px; font-weight:620}
.tag{color:var(--accent); border:1px solid var(--accent-dim); border-radius:6px; padding:0 6px; font-size:12px}

.transport{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.transport .play{background:linear-gradient(180deg,var(--accent),var(--accent-dim)); color:#0e1311; border:none; border-radius:10px; padding:9px 16px; font-weight:640; cursor:pointer; min-width:96px}
.transport .play:disabled{opacity:.5; cursor:default}
.transport .ghost{padding:9px 13px}
.transport .loop{color:var(--muted); font-size:13px; display:flex; align-items:center; gap:5px; cursor:pointer}
.transport .speed{color:var(--muted); font-size:13px; display:flex; align-items:center; gap:8px}
.transport .speed input[type=range]{accent-color:var(--accent)}
#t-bpm{color:var(--text); min-width:58px; text-align:right}

/* taśma: ciemna scena + głębia (winieta) + świecący playhead */
.at-stage{position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:radial-gradient(130% 120% at 35% -10%, #202923, #0f1310 70%);
  box-shadow:inset 0 0 70px rgba(0,0,0,.55), 0 8px 30px rgba(0,0,0,.35)}
.at-wrap{position:relative; z-index:1; overflow-x:auto; overflow-y:hidden; min-height:230px}
.at-main{padding:20px 10px}
.at-vignette{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, #0f1310 0, transparent 11%, transparent 89%, #0f1310 100%),
    linear-gradient(180deg, rgba(15,19,16,.65) 0, transparent 22%, transparent 72%, rgba(15,19,16,.75) 100%)}
.at-loading{position:absolute; inset:0; z-index:3; display:grid; place-items:center; color:var(--muted)}
.at-loading[hidden]{display:none}
/* kursor AlphaTab = świecący zielony playhead */
.at-wrap .at-cursor-bar{background:rgba(111,159,122,.10) !important}
.at-wrap .at-cursor-beat{background:var(--accent) !important; width:3px !important; border-radius:2px;
  box-shadow:0 0 14px 3px rgba(111,159,122,.75)}
.at-wrap .at-highlight *{fill:var(--accent) !important; stroke:var(--accent) !important}

/* panel gryfu */
.fb-panel{margin-top:18px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.fb-title{color:var(--accent); font-weight:600; font-size:13px; margin-bottom:8px}
.fretboard{max-width:100%; height:auto}
.fb-board{fill:#10322a22; stroke:var(--line)}
.fb-fret{stroke:#3a463f; stroke-width:1.5}
.fb-string{stroke:#566159; stroke-width:1}
.fb-inlay{fill:#3a463f}
.fb-fretnum{fill:var(--muted); font:600 11px system-ui; text-anchor:middle}
.fb-note{fill:var(--panel-2); stroke:var(--accent-dim); stroke-width:1.5}
.fb-note.fb-root{fill:var(--accent); stroke:var(--accent)}
.fb-notelbl{fill:var(--text); font:600 11px system-ui; text-anchor:middle; dominant-baseline:central}
.fb-rootlbl{fill:#0e1311}
.fb-legend{color:var(--muted); font-size:12px; margin:10px 0 0; display:flex; align-items:center; gap:6px}
.fb-legend .dot{width:12px; height:12px; border-radius:50%; background:var(--panel-2); border:1.5px solid var(--accent-dim); display:inline-block}
.fb-legend .dot.root{background:var(--accent); border-color:var(--accent)}

/* czat */
.chat-log{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px}
.msg{max-width:88%; padding:8px 11px; border-radius:12px; font-size:13px; line-height:1.45}
.msg.teacher{align-self:flex-start; background:var(--panel-2); border:1px solid var(--line)}
.msg.me{align-self:flex-end; background:var(--accent-dim); color:#0e1311}
.chat-form{display:flex; gap:6px; padding:10px; border-top:1px solid var(--line)}
.chat-form input{flex:1; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:9px 12px; font-size:14px}
.chat-form input:focus{outline:none; border-color:var(--accent-dim)}
.chat-form button{background:var(--accent); color:#0e1311; border:none; border-radius:10px; padding:0 14px; cursor:pointer; font-size:15px}

.shell.drawer-collapsed .drawer{display:none}