/* LugntBoard DevOp v1.1 – themes, fonts, spacing */
:root{
  --bg:#0b0f14; --glass:rgba(255,255,255,0.08); --glass-2:rgba(255,255,255,0.14);
  --txt:#eef2f6; --muted:#a9b3bf; --accent:#5cc7ff; --good:#6ee7b7; --danger:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.35); --radius:18px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --base:16px; --gutter:18px; --container:1400px;
}
.theme-light{
  --bg:#f6f8fb; --glass:rgba(0,0,0,0.04); --glass-2:rgba(0,0,0,0.08);
  --txt:#0b0f14; --muted:#5b6571; --accent:#3178ff; --shadow:0 10px 30px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font);
  font-size:var(--base); color:var(--txt); background:var(--bg); overflow:hidden;
}
.container{ max-width: var(--container); margin: 0 auto; padding: 0 16px; }
.bg-wallpaper, .bg-canvas{
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:saturate(1.05) brightness(.9);
}
.bg-canvas{ z-index:-1; opacity:0; transition:opacity .3s }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
}
.app-title{ font-weight:800; letter-spacing:.2px; margin:0; opacity:.95 }
.icon-btn{
  background:var(--glass); border:none; color:var(--txt); padding:10px 12px; border-radius:12px;
  backdrop-filter: blur(16px); box-shadow: var(--shadow); cursor:pointer;
}
.icon-btn.small{ padding:6px 8px; border-radius:10px }
.icon-btn:hover{ background:var(--glass-2) }
.grid{
  display:grid; gap:var(--gutter); padding:12px 0 80px 0;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
}
.card{
  background:var(--glass); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  backdrop-filter: blur(20px) saturate(1.1); box-shadow:var(--shadow); padding:16px;
}
.card-title{ font-weight:700; opacity:.9; font-size:1.05rem }
.card-title-row{ display:flex; justify-content:space-between; align-items:center }
.weather{ grid-column: span 4 }
.timer{ grid-column: span 4 }
.notes{ grid-column: span 4 }
.calendar{ grid-column: span 7; grid-row: span 3 }
.tasks{ grid-column: span 5; grid-row: span 2 }
.music{ grid-column: span 7 }
.quote{ grid-column: span 5 }

/* Weather */
.weather-body{ display:grid; gap:6px; margin-top:8px }
.temp{ font-size:48px; font-weight:800 }
.desc{ color:var(--muted); font-size:.95rem }
.meta{ color:var(--muted); font-size:.8rem }
#refreshWeather{ position:absolute; top:10px; right:10px; opacity:0; transition:.2s }
.weather:hover #refreshWeather{ opacity:1 }

/* Timer */
.timer-face{ font-size:64px; font-weight:900; letter-spacing:2px; margin:12px 0 }
.timer-controls button{ margin-right:8px; padding:10px 12px; border-radius:12px; border:0; cursor:pointer;
  background:var(--glass-2); color:var(--txt) }
.timer-info{ color:var(--muted); font-size:.8rem; margin-top:6px }

/* Notes */
.notes-list{ display:flex; gap:10px; flex-wrap:wrap; padding-top:10px }
.note{
  width:160px; min-height:130px; border-radius:16px; background:#fde68a; color:#2d2a20;
  padding:12px; box-shadow:0 10px 18px rgba(0,0,0,.25); position:relative; cursor:pointer;
  font-weight:600;
}
.note .del{ position:absolute; right:8px; top:6px; opacity:.5; }
.note-editor{
  position:fixed; top:60px; right:40px; width:460px; max-width:92vw; height:360px;
  background:#fde68a; color:#2d2a20; border-radius:18px; padding:16px; box-shadow:var(--shadow); display:none;
}
.note-editor.open{ display:block }
.note-editor textarea{ width:100%; height:250px; background:transparent; border:0; font-size:18px }

/* Tasks with drag */
.tasks-list{ display:flex; flex-direction:column; gap:12px; margin:12px 0; max-height:300px; overflow:auto }
.task{
  display:grid; grid-template-columns: 28px 1fr 28px; align-items:center; gap:12px;
  padding:14px 16px; border-radius:16px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.12);
}
.theme-light .task{ background:rgba(255,255,255,.7) }
.task .handle{ cursor:grab; opacity:.7 }
.task.done{ opacity:.55; text-decoration: line-through }
.tasks-new{ display:flex; gap:10px }
.tasks-new input{ flex:1; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:var(--txt); padding:12px }

/* Calendar */
.calendar-header{ display:flex; align-items:center; justify-content:center; gap:8px }
.calendar-title{ font-weight:800; letter-spacing:.5px }
.calendar-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; margin-top:8px }
.day{ aspect-ratio:1/1; border-radius:14px; padding:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); position:relative }
.theme-light .day{ background:rgba(0,0,0,.04); border-color: rgba(0,0,0,.06) }
.day .num{ font-weight:800; opacity:.85 }
.day.today{ outline:2px solid var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent) inset }
.day .add{ position:absolute; right:8px; bottom:8px; opacity:.55 }
.event{ margin-top:6px; font-size:.8rem; opacity:.9 }
.calendar-footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px }
.chip{ background:var(--glass); border:1px solid rgba(255,255,255,.15); padding:8px 12px; border-radius:999px; color:var(--txt); cursor:pointer }
.chip.primary{ border-color: var(--accent); }
.chip.danger{ border-color: var(--danger); }

/* Music */
.music .music-body{ display:grid; gap:10px }
.viz-controls{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }

/* Quote */
.quote blockquote{ font-size:1.1rem; line-height:1.5; margin:10px 0 0 }
.quote-author{ color:var(--muted); font-size:.8rem }

/* Footer */
.footer .clock{
  position:fixed; right:18px; bottom:18px; opacity:.7; font-weight:900; letter-spacing:1px;
  font-size:40px; background:transparent;
}

/* Settings modal */
#settingsModal::backdrop{ background:rgba(0,0,0,.6); backdrop-filter: blur(4px) }
.settings{ min-width: 840px; max-width: calc(100vw - 40px); color:var(--txt) }
.settings-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px }
.settings-section{ background:var(--glass); padding:12px; border-radius:14px; margin:12px 0; border:1px solid rgba(255,255,255,.1) }
.section-title{ font-weight:800; margin-bottom:8px; display:block }
.row{ display:flex; gap:12px; flex-wrap:wrap }
.wrap{ flex-wrap:wrap }
.settings input, .settings select{ border-radius:12px; border:1px solid rgba(255,255,255,.15); padding:10px; background:rgba(255,255,255,.08); color:var(--txt) }
.thumbs{ display:grid; grid-template-columns: repeat(5, 1fr); gap:10px }
.thumbs img{ width:100%; height:78px; object-fit:cover; border-radius:12px; cursor:pointer; opacity:.9; border:2px solid transparent }
.thumbs img.active{ border-color: var(--accent); opacity:1 }

/* Responsive */
@media (max-width: 1100px){
  .calendar{ grid-column: span 12 }
  .tasks{ grid-column: span 12 }
  .music{ grid-column: span 12 }
  .quote{ grid-column: span 12 }
  .weather, .timer, .notes{ grid-column: span 4 }
}
@media (max-width: 860px){
  .weather, .timer, .notes{ grid-column: span 12 }
  .grid{ grid-auto-rows: auto; overflow:auto; height: calc(100vh - 120px) }
  .settings{ min-width: auto }
}