/* =================================================================
   September — Study OS
   Dark desktop, glassy windows, warm autumn accent.
   ================================================================= */
:root{
  --bg-1:#10131c; --bg-2:#1a2030;
  --glass:rgba(26,32,48,.88);
  --glass-border:rgba(255,255,255,.09);
  --text:#e8eaf0; --muted:rgba(232,234,240,.55);
  --accent:#e8734a;
  --radius:10px;
  --shadow:0 18px 50px rgba(0,0,0,.5);
  font-size:15px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:"Inter",system-ui,sans-serif; font-weight:400;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 75% -10%, #2b2338 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #14283a 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{ font:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }

/* ---------------- login ---------------- */
#login{ height:100%; display:flex; align-items:center; justify-content:center; }
.login-box{
  text-align:center; padding:3rem 3.4rem; border-radius:16px;
  background:var(--glass); border:1px solid var(--glass-border); box-shadow:var(--shadow);
}
.login-logo{ font-size:3rem; }
.login-box h1{ font-weight:600; letter-spacing:.06em; margin:.4rem 0 .2rem; }
.login-sub{ color:var(--muted); margin-bottom:1.6rem; font-size:.9rem; }
.login-box input{
  display:block; width:230px; margin:0 auto .8rem; padding:.6rem .9rem;
  background:rgba(255,255,255,.06); border:1px solid var(--glass-border);
  border-radius:8px; outline:none; text-align:center;
}
.login-box input:focus{ border-color:var(--accent); }
.login-box button{
  width:230px; padding:.6rem; border:none; border-radius:8px;
  background:var(--accent); color:#fff; font-weight:500;
}
#login-err{ color:#e86a6a; margin-top:.9rem; font-size:.85rem; }

/* ---------------- desktop ---------------- */
#desktop{ height:100%; position:relative; }

/* living wallpaper: the dot cloud. Behind everything, never clickable */
#fx{
  position:absolute; left:0; top:0;
  pointer-events:none; z-index:0;
}
#icons, #windows, #taskbar, #start-menu, #studybar{ z-index:1; }

/* study bar: today's hours + streak (top-left) */
#studybar{
  position:absolute; left:14px; top:14px;
  display:flex; align-items:center; gap:.7rem;
  padding:.5rem .8rem; border-radius:10px;
  background:var(--glass); backdrop-filter:blur(12px);
  border:1px solid var(--glass-border); box-shadow:0 8px 24px rgba(0,0,0,.35);
}
#sb-flame{ font-size:.92rem; font-weight:600; }
#sb-flame.dead{ filter:grayscale(1); opacity:.55; }
.sb-main{ min-width:150px; }
.sb-text{ font-size:.74rem; color:var(--muted); margin-bottom:.3rem; }
.sb-text b{ color:var(--text); font-weight:600; }
#sb-goal{ cursor:pointer; border-bottom:1px dashed rgba(255,255,255,.35); }
#sb-fill{ display:block; height:100%; border-radius:99px; background:var(--accent); width:0; transition:width .5s; }
#sb-goal-input{ width:44px; background:rgba(255,255,255,.08); border:1px solid var(--glass-border);
  border-radius:5px; color:var(--text); font-size:.74rem; padding:0 .2rem; outline:none; }

/* tiny wallpaper toggle in the tray */
#wp-toggle{
  border:none; background:transparent; color:var(--accent);
  font-size:.9rem; padding:.15rem .3rem; border-radius:6px; line-height:1;
}
#wp-toggle.off{ color:var(--muted); opacity:.5; }
#wp-toggle:hover{ background:rgba(255,255,255,.1); }
#windows{ position:absolute; inset:0; pointer-events:none; }
#windows .win{ pointer-events:auto; }

#icons{
  position:absolute; inset:18px 18px 70px auto;
  display:flex; flex-direction:column; flex-wrap:wrap; gap:6px;
  align-content:flex-end;
}
.icon{
  width:92px; padding:10px 4px; border-radius:10px; border:1px solid transparent;
  background:transparent; color:var(--text); text-align:center;
}
.icon{ transition:transform .18s cubic-bezier(.2,1.3,.4,1), background .18s; }
.icon:hover{ background:rgba(255,255,255,.07); border-color:var(--glass-border); transform:translateY(-3px) scale(1.04); }
.icon:active{ transform:scale(.95); }
.icon .glyph{ font-size:1.9rem; display:block; margin-bottom:.35rem;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.45)); }
.icon .label{ font-size:.72rem; line-height:1.25; color:var(--text); opacity:.9; }

/* ---------------- windows ---------------- */
.win{
  position:absolute; min-width:340px; min-height:200px;
  display:flex; flex-direction:column;
  background:var(--glass); backdrop-filter:blur(14px);
  border:1px solid var(--glass-border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
  animation:win-in .26s cubic-bezier(.2,1.25,.35,1);
}
@keyframes win-in{ from{ opacity:0; transform:scale(.92) translateY(12px); } }
.win.focus{ border-color:rgba(232,115,74,.35); box-shadow:0 22px 60px rgba(0,0,0,.6); }
.win-title{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .8rem; user-select:none; cursor:grab;
  background:rgba(255,255,255,.04); border-bottom:1px solid var(--glass-border);
  font-size:.85rem; font-weight:500;
}
.win-title .t-glyph{ font-size:1rem; }
.win-title .t-text{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.win-btn{
  width:26px; height:26px; border-radius:7px; border:none; color:var(--text);
  background:rgba(255,255,255,.08); font-size:.8rem; line-height:1;
}
.win-btn:hover{ background:rgba(255,255,255,.18); }
.win-btn.close:hover{ background:#c0442e; }
.win-body{ flex:1; overflow:auto; padding:1rem; }

/* ---------------- taskbar ---------------- */
#taskbar{
  position:absolute; left:12px; right:12px; bottom:10px; height:46px;
  display:flex; align-items:center; gap:.5rem; padding:0 .55rem;
  background:var(--glass); backdrop-filter:blur(14px);
  border:1px solid var(--glass-border); border-radius:12px; box-shadow:var(--shadow);
}
#start-btn{
  border:none; border-radius:8px; padding:.42rem .8rem; font-weight:600; font-size:.85rem;
  background:linear-gradient(135deg, #e8734a, #c05430); color:#fff;
}
#task-items{ flex:1; display:flex; gap:.35rem; overflow-x:auto; }
.task-item{
  border:1px solid var(--glass-border); border-radius:8px; padding:.35rem .7rem;
  background:rgba(255,255,255,.05); color:var(--text); font-size:.8rem; white-space:nowrap;
}
.task-item.active{ background:rgba(232,115,74,.22); border-color:rgba(232,115,74,.5); }
.task-item.min{ opacity:.55; }
#tray{ display:flex; align-items:center; gap:.9rem; font-size:.8rem; color:var(--muted); }
#tray-countdown{ color:var(--accent); font-weight:600; }
#clock{ font-family:"JetBrains Mono",monospace; }

/* ---------------- start menu ---------------- */
#start-menu{
  position:absolute; left:12px; bottom:64px; width:290px; z-index:9000;
  background:var(--glass); backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:12px; box-shadow:var(--shadow);
  padding:.6rem;
}
#start-menu .sm-head{ padding:.5rem .6rem .7rem; font-size:.75rem; color:var(--muted);
  letter-spacing:.14em; text-transform:uppercase; }
#start-menu button.sm-app{
  display:flex; align-items:center; gap:.7rem; width:100%;
  padding:.55rem .6rem; border:none; border-radius:8px;
  background:transparent; color:var(--text); text-align:left; font-size:.88rem;
}
#start-menu button.sm-app:hover{ background:rgba(255,255,255,.08); }
#start-menu .sm-foot{ display:flex; justify-content:flex-end; padding:.4rem .3rem 0; }
#start-menu .sm-foot button{
  border:none; background:transparent; color:var(--muted); font-size:.78rem;
}
#start-menu .sm-foot button:hover{ color:var(--text); }

/* =================================================================
   Shared app widgets
   ================================================================= */
.pill{
  display:inline-block; padding:.12rem .55rem; border-radius:99px;
  font-size:.68rem; font-weight:600; color:#10131c;
}
.row{ display:flex; align-items:center; gap:.6rem; }
.grow{ flex:1; }
.muted{ color:var(--muted); }
.small{ font-size:.78rem; }

.sep-input, .sep-select{
  background:rgba(255,255,255,.06); border:1px solid var(--glass-border);
  border-radius:8px; padding:.42rem .6rem; outline:none; min-width:0;
}
.sep-input:focus{ border-color:var(--accent); }
.sep-select option{ background:#1a2030; }
.sep-btn{
  border:none; border-radius:8px; padding:.42rem .8rem;
  background:rgba(255,255,255,.1); color:var(--text); font-size:.85rem;
}
.sep-btn:hover{ background:rgba(255,255,255,.2); }
.sep-btn.primary{ background:var(--accent); color:#fff; font-weight:500; }
.sep-btn.danger:hover{ background:#c0442e; }
.icon-btn{
  border:none; background:transparent; color:var(--muted); border-radius:6px;
  padding:.2rem .4rem; font-size:.85rem;
}
.icon-btn:hover{ color:#fff; background:rgba(255,255,255,.1); }

.list-item{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .6rem; border-radius:8px; margin-bottom:.3rem;
  background:rgba(255,255,255,.04); border:1px solid transparent;
}
.list-item:hover{ border-color:var(--glass-border); }
.list-item .done-toggle{ cursor:pointer; font-size:1rem; background:none; border:none; }

.progress{
  height:7px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden;
}
.progress span{ display:block; height:100%; border-radius:99px; }

.tabs{ display:flex; gap:.35rem; margin-bottom:1rem; flex-wrap:wrap; }
.tab{
  border:1px solid var(--glass-border); background:rgba(255,255,255,.05);
  color:var(--text); border-radius:8px; padding:.35rem .75rem; font-size:.8rem;
}
.tab.active{ background:rgba(232,115,74,.25); border-color:rgba(232,115,74,.6); }

/* dashboard cards */
.dash-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.8rem; }
.dash-card{
  padding:.9rem 1rem; border-radius:10px;
  background:rgba(255,255,255,.045); border:1px solid var(--glass-border);
}
.dash-card h3{ font-size:.92rem; font-weight:600; margin-bottom:.15rem; }
.dash-days{ font-size:1.9rem; font-weight:600; font-family:"JetBrains Mono",monospace; }
.dash-days em{ font-style:normal; font-size:.8rem; color:var(--muted); font-family:"Inter",sans-serif; }
.dash-meta{ margin:.5rem 0 .45rem; }
.dash-card input[type=date]{
  background:rgba(255,255,255,.06); border:1px solid var(--glass-border);
  color:var(--text); border-radius:6px; padding:.15rem .4rem; font-size:.75rem;
  color-scheme:dark;
}

/* pomodoro */
.pomo{ text-align:center; padding:.6rem 0; }
.pomo-time{ font-family:"JetBrains Mono",monospace; font-size:3.6rem; font-weight:600; letter-spacing:.04em; }
.pomo-state{ color:var(--muted); font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:1rem; }
.pomo-ring{ margin:0 auto 1rem; width:190px; height:190px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--accent) var(--p,0%), rgba(255,255,255,.08) 0); }
.pomo-ring .inner{ width:164px; height:164px; border-radius:50%; background:#1a2030;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pomo-stats{ margin-top:1.1rem; text-align:left; }

/* weekly plan */
.plan-grid{ display:grid; grid-template-columns:repeat(7,minmax(140px,1fr)); gap:.5rem; min-width:1020px; }
.plan-day{ background:rgba(255,255,255,.035); border:1px solid var(--glass-border);
  border-radius:10px; padding:.55rem; }
.plan-day h4{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.5rem; text-align:center; }
.plan-day.today{ border-color:rgba(232,115,74,.55); }
.plan-block{
  border-left:3px solid; border-radius:6px; padding:.35rem .5rem .35rem .55rem;
  background:rgba(255,255,255,.05); margin-bottom:.35rem; font-size:.78rem;
  display:flex; gap:.4rem; align-items:flex-start;
}
.plan-block .icon-btn{ padding:0 .2rem; }

/* notes */
.note-area{
  width:100%; min-height:280px; resize:vertical;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border);
  border-radius:10px; padding:.8rem .9rem; outline:none; line-height:1.55;
}
.note-area:focus{ border-color:var(--accent); }

/* material */
.mat-drop{
  border:1.5px dashed var(--glass-border); border-radius:10px; padding:1rem;
  text-align:center; color:var(--muted); font-size:.82rem; margin-bottom:.9rem;
}
.mat-drop.drag{ border-color:var(--accent); color:var(--text); }

/* ---------------- exercise pop-up (caught the orb) ---------------- */
#ex-overlay{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,10,16,.55); backdrop-filter:blur(4px);
  animation:ex-in .18s ease-out;
}
@keyframes ex-in{ from{ opacity:0; } to{ opacity:1; } }
.ex-card{
  width:min(560px, calc(100vw - 32px));
  background:var(--glass); backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:14px;
  box-shadow:var(--shadow); padding:1rem 1.2rem 1.2rem;
  animation:ex-pop .22s cubic-bezier(.2,1.4,.4,1);
}
@keyframes ex-pop{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }
.ex-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.ex-cat{ font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.ex-tech{ font-size:.72rem; color:var(--muted); padding:.1rem .5rem; border:1px solid var(--glass-border); border-radius:99px; white-space:nowrap; }
.ex-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 6px rgba(0,0,0,.4); }
#ex-math{
  padding:1.4rem .4rem .8rem; text-align:center; font-size:1.3rem;
  overflow-x:auto; color:#fff;
}
.ex-reveal{ margin:.2rem .2rem .5rem; padding:.6rem .8rem; border-radius:9px; font-size:.85rem; line-height:1.5;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border); color:var(--text); }
.ex-reveal.solution{ border-color:rgba(78,203,113,.4); background:rgba(78,203,113,.08); text-align:center; }
.ex-tools{ display:flex; justify-content:center; gap:.5rem; margin:.2rem 0 .5rem; }
.sep-btn.tiny{ padding:.3rem .6rem; font-size:.76rem; }
.ex-assess{ display:flex; gap:.5rem; margin-top:.3rem; }
.ex-assess .assess{ flex:1; border:1px solid var(--glass-border); border-radius:9px; padding:.55rem .3rem;
  background:rgba(255,255,255,.05); color:var(--text); font-size:.82rem; font-weight:500; transition:all .15s; }
.ex-assess .assess.good:hover{ background:rgba(78,203,113,.18); border-color:#4ecb71; }
.ex-assess .assess.hard:hover{ background:rgba(226,193,78,.18); border-color:#e2c14e; }
.ex-assess .assess.fail:hover{ background:rgba(232,115,74,.18); border-color:#e8734a; }
.ex-foot{ display:flex; justify-content:center; gap:.6rem; margin-top:.7rem; }

/* Ασκήσεις app */
.pr-legend{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.6rem; }
.pr-leg{ display:flex; align-items:center; gap:.35rem; font-size:.76rem; color:var(--muted); }
.pr-h{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:.9rem 0 .4rem; }
.pr-item{ display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  padding:.45rem .6rem; margin-bottom:.3rem; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid transparent; color:var(--text); }
.pr-item:hover{ border-color:var(--glass-border); background:rgba(255,255,255,.07); }
.pr-tech{ font-size:.74rem; color:var(--muted); min-width:130px; }
.pr-math{ flex:1; overflow-x:auto; font-size:.9rem; }
.pr-course{ display:flex; align-items:center; gap:.5rem; margin:1.1rem 0 .3rem;
  padding-bottom:.35rem; border-bottom:1px solid var(--glass-border); }
.pr-empty{ padding:1.4rem 1rem; text-align:center; line-height:1.6; color:var(--text);
  background:rgba(255,255,255,.03); border:1px dashed var(--glass-border); border-radius:10px; margin-top:.4rem; }
.sep-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* Ταπετσαρία toggles */
input[type=checkbox]{ accent-color:var(--accent); width:16px; height:16px; }

/* Σήμερα */
.td-date{ font-size:1.05rem; font-weight:600; text-transform:capitalize; margin-bottom:.5rem; }
.td-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.td-chip{
  font-size:.76rem; padding:.28rem .65rem; border-radius:99px;
  border:1px solid; background:rgba(255,255,255,.05); white-space:nowrap;
}
.td-chip b{ font-family:"JetBrains Mono",monospace; }

/* start menu pop */
#start-menu{ animation:win-in .2s cubic-bezier(.2,1.25,.35,1); }

/* Στατιστικά */
.st-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:.45rem; }
.st-lbl{ width:110px; flex:0 0 auto; font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-track{ flex:1; height:14px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.st-track span{ display:block; height:100%; border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.st-val{ width:86px; flex:0 0 auto; text-align:right; font-size:.8rem; font-family:"JetBrains Mono",monospace; }
.st-val em{ font-style:normal; color:var(--muted); font-size:.68rem; }
.st-chart{ position:relative; display:flex; align-items:flex-end; gap:4px; height:120px;
  padding:.3rem .2rem 0; border-bottom:1px solid var(--glass-border); }
.st-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; min-width:0; }
.st-stack{ flex:1; width:100%; max-width:26px; display:flex; flex-direction:column-reverse; justify-content:flex-start; border-radius:4px 4px 0 0; overflow:hidden; }
.st-stack i{ display:block; width:100%; }
.st-day{ font-size:.6rem; color:var(--muted); margin-top:.25rem; font-family:"JetBrains Mono",monospace; }
.st-goal{ position:absolute; left:0; right:0; border-top:1px dashed rgba(255,255,255,.35); pointer-events:none; }
.st-urgent{ color:#e8734a; font-weight:600; }

/* Πλάνο ύλης */
.sg-card{ padding:.7rem .8rem; border-radius:10px; margin-bottom:.6rem;
  background:rgba(255,255,255,.045); border:1px solid var(--glass-border); }
.sg-day{ display:flex; align-items:flex-start; gap:.5rem; flex-wrap:wrap;
  padding:.4rem .5rem; border-radius:8px; margin-bottom:.3rem; background:rgba(255,255,255,.03); }
.sg-date{ flex:0 0 74px; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-family:"JetBrains Mono",monospace; padding-top:.15rem; }
.sg-block{ font-size:.76rem; padding:.2rem .55rem; border-radius:6px;
  border-left:3px solid; background:rgba(255,255,255,.06); }

/* ---------------- phones: windows go fullscreen ---------------- */
@media (max-width:640px){
  .win{ inset:0 0 58px 0 !important; width:auto !important; height:auto !important;
    min-width:0; border-radius:0; }
  #icons{ inset:14px 10px 70px 10px; flex-direction:row; align-content:flex-start; }
  .plan-grid{ min-width:840px; }
}