@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap');

:root{
  --bg: #0b1020;
  --panel: #121a32;
  --panel-2: #0f162c;
  --text: #e6ebff;
  --muted: #9aa3c4;
  --primary: #7c94ff;
  --primary-2: #5b74ff;
  --border: #263155;
  --accent: #1f2b51;
  --danger: #ff6666;
  --success: #36d399;
  --header-h: 58px;
  --toplogo-h: 40px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 1200px at 10% 0%, #151c38, #0b1020 55%);
  color:var(--text);
}

.top-logo{ display:flex; align-items:center; justify-content:center; height:var(--toplogo-h); font-size:20px; gap:10px; font-weight:700; color:var(--text) }
.top-logo .logo{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:6px; background:linear-gradient(135deg,#0ea5e9,#38bdf8); color:#001827; font-weight:900; letter-spacing:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
.top-logo .name{letter-spacing:0.2px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; font-weight:700; color:var(--text)}

.app-header{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  position:sticky; top:0; backdrop-filter: blur(8px);
  background: color-mix(in lab, var(--panel) 80%, transparent);
}
.brand{display:flex;align-items:center;gap:8px}
.brand .logo{font-size:20px}
.brand h1{font-size:16px; margin:0; font-weight:600}
.controls{display:flex;align-items:center; gap:8px; width:100%}
.controls .spacer{flex:1}
.date-label{color:var(--muted); font-size:12px}

button, input, select {
  background: var(--panel);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:8px; padding:8px 10px;
}
button:hover{background:var(--panel-2)}
button.primary{background:var(--primary); border-color:transparent; color:#0b1020}
button.primary:hover{background:var(--primary-2)}
.btn-toggle[aria-pressed="true"]{ background: var(--accent); color: var(--text) }

.app-main{display:flex; flex-direction:column; gap:12px; padding:16px; height:calc(100% - (var(--header-h) + var(--toplogo-h)))}

.active-block-card{--active-accent:#3dd68c; --card-glow:color-mix(in lab,var(--active-accent) 34%, rgba(8,12,32,.85)); border:1px solid color-mix(in lab,var(--active-accent) 72%, white 18%); border-radius:18px; padding:20px 22px; background:linear-gradient(135deg, color-mix(in lab,var(--active-accent) 45%, rgba(255,255,255,.20)) 0%, color-mix(in lab,var(--panel) 68%, rgba(255,255,255,.16)) 55%, color-mix(in lab,var(--panel) 56%, rgba(255,255,255,.26)) 100%); display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--header-h) + 10px); z-index:5; box-shadow:0 32px 60px var(--card-glow), 0 0 0 1px rgba(255,255,255,.08); margin-bottom:16px}
.active-block-card.is-active{box-shadow:0 38px 70px color-mix(in lab,var(--active-accent) 48%, rgba(8,12,32,.7)), 0 0 0 1px color-mix(in lab,var(--active-accent) 40%, rgba(255,255,255,.7))}
.active-block-card.is-warning{--card-glow:color-mix(in lab,var(--active-accent) 50%, rgba(40,22,0,.78));}
.active-block-card.is-idle{--active-accent:color-mix(in lab,var(--muted) 80%, white 20%); border-color:color-mix(in lab,var(--border) 60%, white 30%); background:linear-gradient(135deg, rgba(255,255,255,.18) 0%, color-mix(in lab,var(--panel) 78%, rgba(255,255,255,.18)) 100%); box-shadow:0 26px 56px rgba(8,12,32,.55), 0 0 0 1px rgba(255,255,255,.08)}
.active-block-card[hidden]{display:none !important}
.active-block-header{display:flex; align-items:center; justify-content:space-between; gap:12px}
.active-block-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; color:color-mix(in lab,var(--active-accent) 55%, white 35%)}
.active-block-status{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; padding:4px 14px; border-radius:999px; background:color-mix(in lab,var(--active-accent) 38%, rgba(255,255,255,.28)); color:color-mix(in lab,var(--active-accent) 90%, white 20%); transition:all .2s ease}
.active-block-status.is-warning{background:color-mix(in lab,var(--active-accent) 55%, rgba(255,255,255,.45)); color:color-mix(in lab,var(--active-accent) 95%, black 15%)}
.active-block-status.is-idle{background:rgba(255,255,255,.16); color:color-mix(in lab,var(--muted) 85%, white 15%)}
.active-block-meta{display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; color:color-mix(in lab,var(--muted) 85%, white 15%)}
.active-block-meta > span{min-width:0}
.active-block-category{text-transform:uppercase; letter-spacing:0.08em; font-weight:600; color:color-mix(in lab,var(--active-accent) 70%, white 20%)}
.active-block-window{font-weight:500; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.active-block-main{display:flex; align-items:flex-end; justify-content:space-between; gap:22px; flex-wrap:wrap}
.active-block-task{font-size:23px; font-weight:700; color:color-mix(in lab,var(--text) 82%, white 18%); flex:1 1 auto; min-width:0}
.active-block-remaining{display:inline-flex; align-items:center; gap:12px; font-size:17px; font-weight:600; color:var(--active-accent); white-space:nowrap; transition:color .2s ease}
.active-block-remaining.is-warning{color:color-mix(in lab,var(--active-accent) 95%, black 5%)}
.active-block-remaining.is-warning .clock-icon{background:color-mix(in lab,var(--active-accent) 55%, rgba(255,255,255,.4)); border-color:color-mix(in lab,var(--active-accent) 70%, white 20%); box-shadow:0 10px 18px color-mix(in lab,var(--active-accent) 40%, rgba(8,12,32,.55))}
.active-block-remaining.is-warning .clock-icon svg{stroke:color-mix(in lab,var(--active-accent) 95%, black 15%)}
.active-block-remaining.is-idle{color:color-mix(in lab,var(--muted) 85%, white 10%)}
.active-block-remaining .clock-icon{width:34px; height:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:color-mix(in lab,var(--active-accent) 35%, rgba(255,255,255,.26)); border:1px solid color-mix(in lab,var(--active-accent) 60%, white 22%); box-shadow:0 8px 14px color-mix(in lab,var(--active-accent) 30%, rgba(8,12,32,.6)), inset 0 0 0 1px rgba(255,255,255,.2)}
.active-block-remaining .clock-icon svg{width:18px; height:18px; stroke:color-mix(in lab,var(--active-accent) 90%, white 18%); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none}
.active-block-remaining.is-idle .clock-icon{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); box-shadow:none}
.active-block-remaining.is-idle .clock-icon svg{stroke:color-mix(in lab,var(--muted) 85%, white 15%)}
@media (max-width: 640px){
  .active-block-card{top:calc(var(--header-h) + 6px); padding:18px 16px}
  .active-block-main{align-items:flex-start}
  .active-block-remaining{margin-top:10px}
}


.tabs{display:inline-flex; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:4px; width:100%}
.tab-btn{background:transparent; border:none; padding:8px 12px; border-radius:8px; color:var(--muted); cursor:pointer}
.tab-btn[aria-selected="true"], .tab-btn.active{background:var(--accent); color:var(--text)}

.panel{display:block}
.panel[hidden]{display:none}

.sidebar{border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--panel); max-height:calc(100svh - 160px); overflow:auto}
.sidebar h2{margin:4px 0 8px; font-size:14px; font-weight:600; color:var(--muted)}
.totals{font-size:13px; color:var(--muted); margin-bottom:8px}
.totals .cat{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.totals .dot{display:inline-block; width:8px; height:8px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.2) inset}
.block-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; overflow:auto; max-height:70vh}
.block-list li{display:grid; grid-template-columns:12px 1fr auto; grid-auto-rows:min-content; align-items:center; gap:6px 10px; border:1px solid var(--border); border-radius:12px; padding:10px; background:var(--panel-2)}
.badge{display:inline-block; width:10px; height:10px; border-radius:3px; grid-column:1; grid-row:1/span 2}
.list-title{grid-column:2; grid-row:1; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.meta{grid-column:2; grid-row:2; color:var(--muted); font-size:12px; display:flex; gap:6px; flex-wrap:wrap}
.meta-time{color:var(--muted)}
.actions{grid-column:3; grid-row:1 / span 2; display:flex; gap:6px; justify-self:end}
.actions button{padding:6px 10px}

/* Active highlighting */
.block.active{ border-color: var(--success); box-shadow: 0 0 0 2px color-mix(in lab, var(--success) 45%, transparent), 0 10px 20px rgba(0,0,0,.35) }
.block-list li.active{ border-color: var(--success); box-shadow: 0 0 0 2px color-mix(in lab, var(--success) 35%, transparent) }

/* Selected/focused item from interactions */
.block.selected{ border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 55%, transparent) }
.block-list li.selected{ border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 45%, transparent) }

/* Completed blocks in Blocks tab */
.block-list li.completed{ opacity:.55 }

/* Active block progress (Blocks tab) */
.progress-row{ display:flex; align-items:center; gap:8px; flex-basis:100%; margin-top:6px; grid-column:1 / -1 }
.progress{ flex:1; height:6px; background:rgba(255,255,255,.06); border-radius:6px; overflow:hidden; border:1px solid var(--border) }
.progress .bar{ height:100%; width:0%; background: var(--primary); transition: width .25s ease }
.progress-info{ font-size:12px; color:var(--muted) }

.schedule-wrap{border:1px solid var(--border); border-radius:12px; background:var(--panel); overflow:auto; position:relative; height:calc(100svh - 160px)}
.schedule{ position:relative; min-height: 1440px; /* 24h * 60min at 1px/min with scale */ padding-left:64px}
.hour-line{ position:absolute; left:0; right:0; height:1px; background: #1a2342}
.hour-label{ position:absolute; left:8px; width:48px; text-align:right; color:var(--muted); font-size:12px}
.now-line{ position:absolute; left:0; right:0; height:2px; background: var(--success); opacity:0.7}
.now-info{ position:absolute; right:10px; transform: translateY(-50%); padding:4px 8px; font-size:12px; color:var(--text);
  background: color-mix(in lab, var(--panel) 85%, black 0%);
  border:1px solid var(--border); border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.25); pointer-events:none; opacity:.95 }

.block{ position:absolute; left:72px; right:12px; border-radius:10px; padding:8px; 
  background: color-mix(in lab, var(--primary) 16%, transparent);
  border:1px solid var(--border);
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  cursor:grab;
  overflow:hidden; /* prevent content overspill on short blocks */
  z-index:1;
}
.block:hover{ z-index:2 }
.block.overlap{ box-shadow: 0 0 0 2px color-mix(in lab, var(--danger) 45%, transparent), 0 10px 22px rgba(0,0,0,.35) }
.block:active{cursor:grabbing}
.block-head{display:flex; align-items:center; gap:8px}
.block-details{font-weight:600}
.block-category{font-size:12px; color:var(--muted); margin-top:2px}
.block-actions{margin-left:auto; display:flex; gap:6px; opacity:0; pointer-events:none; transition:opacity .12s ease}
.block:hover .block-actions, .block:active .block-actions, .block.selected .block-actions, .block:focus-within .block-actions{opacity:1; pointer-events:auto}
.block-actions .icon{padding:4px 6px; border-radius:6px; font-size:12px; line-height:1}
.block-actions .delete{color:#ffd6d6}
.block-time{font-size:12px; color:var(--muted); margin-top:4px}
.block-notes{font-size:12px; color:var(--muted); margin-top:4px; opacity:.95;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap}

/* Compact mode for short blocks: hide notes to prevent overflow */
.block.compact{ padding:6px }
.block.compact .block-notes{ display:none !important }
.block.compact .block-actions .icon{ padding:3px 5px }
.resize-handle{ position:absolute; left:6px; right:6px; height:6px; bottom:2px; cursor:ns-resize; border-radius:3px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent)}

dialog::backdrop{background:rgba(0,0,0,.45)}
dialog{border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); padding:0}
dialog form{padding:14px; min-width:320px}
dialog h3{margin:0 0 10px; font-size:16px}

.settings-tablist{display:flex; gap:8px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); padding:4px; margin:0 0 12px}
.settings-tab{flex:1; background:transparent; border:none; color:var(--muted); padding:8px 12px; border-radius:8px; font-weight:600; cursor:pointer; transition:background .18s ease, color .18s ease}
.settings-tab:hover{color:var(--text)}
.settings-tab[aria-selected="true"], .settings-tab.is-active{background:var(--accent); color:var(--text)}
.settings-panels{min-height:0}
.settings-panel{display:none}
.settings-panel.is-active{display:block}
.settings-panel[hidden]{display:none}

.tools-grid{display:grid; gap:12px; margin:8px 0 14px}

.tool-card{border:1px solid var(--border); border-radius:12px; background:var(--panel-2); padding:12px 14px; display:flex; flex-direction:column; gap:12px}

.tool-head{display:flex; align-items:flex-start; gap:10px}

.tool-head h4{margin:0; font-size:14px}

.tool-head p{margin:4px 0 0; font-size:12px; color:var(--muted)}

.tool-icon{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:var(--accent); color:var(--text)}

.tool-icon svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.6; fill:none}

.tool-card .primary{display:flex; justify-content:center; align-items:center; width:100%; font-weight:600}

.tool-card.export .tool-icon{background:color-mix(in lab, var(--primary) 60%, black 15%)}

.tool-card.import .tool-icon{background:color-mix(in lab, var(--success) 55%, black 20%); color:#041110}

.file-select{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px dashed var(--border); border-radius:10px; background:rgba(255,255,255,.02); cursor:pointer; transition:background .2s ease, border-color .2s ease}

.file-select:hover{background:rgba(255,255,255,.06); border-color:color-mix(in lab, var(--primary) 40%, var(--border))}

.file-select span{font-size:13px}

.file-select input{display:none}

@media (min-width: 640px){.tools-grid{grid-template-columns:1fr 1fr}}


.settings-grid{ display:grid; grid-template-columns: 1fr; gap:12px; margin:8px 0 12px }
.settings-section{ border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--panel-2) }

.settings-section .hint{margin:0 0 8px; font-size:12px; color:var(--muted)}
.settings-section input[type="time"]{width:100%; font-family:inherit}
.settings-section h4{ margin:0 0 8px; font-size:13px; color:var(--muted) }
.alert-group{ border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--panel); margin-bottom:10px }
.alert-group h5{ margin:0 0 6px; font-size:12px; color:var(--muted) }
.settings .row{ display:grid; gap:8px; grid-template-columns:auto 1fr auto; align-items:center; margin:6px 0 }
.settings .row.split{ grid-template-columns: auto 1fr }
.settings .row.split > span{ white-space:nowrap }
.settings .row .controls{ display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center }
.settings .row .controls select{ min-width:0; width:100% }
.settings .row .controls .ghost{ white-space:nowrap }
@media (max-width: 520px){
  .settings .row.split{ grid-template-columns: 1fr }
  .settings .row.split > span{ margin-bottom:4px; white-space:normal }
}
.settings .row input[type="checkbox"]{ width:16px; height:16px }
.settings .row .ghost{ background:transparent }
.settings select{ width:100% }
.settings input[type="range"]{ width:100% }
/* help spacing for timeline settings */
.settings-section input[type="range"]{ accent-color: var(--primary) }
@media (min-width: 720px){
  .settings-grid{ grid-template-columns: 1fr 1fr }
}
.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.form-row.two{flex-direction:row; gap:10px}
.form-row.two > *{flex:1}
menu{display:flex; gap:8px; justify-content:flex-end; margin:0; padding:0}

/* Dialog Delete button: left-aligned with red outline */
#deleteBlockBtn{ margin-right:auto; border-color: var(--danger) !important; color:#ffd6d6; background:transparent }
#deleteBlockBtn:hover{ background: rgba(255,102,102,.12) }

/* Celebratory end-of-block styling */
dialog.celebrate{ 
  background: linear-gradient(180deg, rgba(40,32,90,0.95), rgba(20,24,60,0.98));
  border-image: linear-gradient(90deg, #f87171, #fbbf24, #34d399, #60a5fa, #a78bfa, #f472b6) 1;
  box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset;
}
dialog.celebrate h3{ font-size:18px }
.confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit }
.confetti span{ position:absolute; top:-12px; width:8px; height:12px; border-radius:2px; opacity:.95; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2));
  animation: confetti-fall linear forwards }
@keyframes confetti-fall{
  0%{ transform: translateY(-20px) rotate(0deg) }
  100%{ transform: translateY(220px) rotate(540deg) }
}

@media (max-width: 900px){
  .controls{flex-wrap: wrap}
  .controls > *{margin-top:4px}
  .tabs{gap:4px}
  .tab-btn{flex:1}
  .sidebar{max-height:calc(100svh - 200px)}
  .schedule-wrap{height:calc(100svh - 200px)}
  .block-list li{ grid-template-columns:12px 1fr }
  .actions{ grid-column:1 / -1; grid-row:auto; justify-self:start }
}

@media (max-width: 480px){
  button, input, select { padding:6px 8px; font-size:12px }
  .app-main{gap:8px; padding:10px}
}

@media (min-width: 1200px){
  .schedule-wrap{height:calc(100svh - 120px)}
  .sidebar{max-height:calc(100svh - 120px)}
  .schedule{padding-left:72px}
}