:root{
  --bg:#111111; /* near-black */
  --card:#221c15; /* warm card base, slightly lighter */
  --muted:#e0dbd0; /* warm muted */
  --gold-1:#b8863b; /* main gold — less yellow, warmer */
  --gold-2:#b8923b; /* highlight gold */
  --gold-3:#614320; /* deep gold/bronze for contrast */
  --accent: var(--gold-1);
  --accent-2: var(--gold-2);
  --accent-dark: var(--gold-3);
  --glass: rgba(255,245,220,0.03);
}

*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg); /* use a solid near-black background instead of gradient */
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.wrap{
  max-width:900px;
  margin:0 auto; /* moved to top of page - removed top margin */
  padding:12px 28px 28px; /* small top padding so header isn't flush to viewport edge */
  position:relative; /* ensure wrapper/content sits above the svg */
  z-index:2; /* ensure content sits above the ink overlay */
}
.header{
  text-align:center;
  margin-bottom:28px;
  position:relative;
  padding-top:0; /* ensure no extra space above brand */
}
.brand{
  font-weight:700;
  margin:0;
  font-size:36px;
  letter-spacing:0.6px;
  color: var(--accent); /* match countdown clocks */
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-image{height:138px;display:inline-block;object-fit:contain}
/* reduce spacing when logo present on small screens */
@media (max-width:480px){ .brand-image{height:64px} }
.subtitle{
  margin:0;
  margin-top:6px;
  font-weight:500;
  color:var(--muted);
}
.timers{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:stretch;
}
.card{
  background: linear-gradient(180deg,var(--card), rgba(35,26,20,0.95));
  padding:18px 22px;
  border-radius:12px;
  width:320px;
  box-shadow: 0 8px 24px rgba(16,12,8,0.6);
  border: 1px solid rgba(255,255,255,0.03);
}
.card-label{
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}
.countdown{
  font-family: 'Inter', sans-serif;
  font-size:36px;
  font-weight:600;
  color:var(--accent);
}
.footer{
  text-align:center;
  margin-top:28px;
  color: rgba(224,219,208,0.9);
  opacity:0.95;
}

/* Two-column tasks layout — use flex so columns are independent (no tall-gap alignment) */
.lists{
  display:flex;
  gap:18px;
  align-items:flex-start; /* keep columns aligned to top, don't stretch to same height */
  margin-top:20px;
}
.tasks-column{
  flex:1 1 0;
  min-width:260px;
  background: linear-gradient(180deg, rgba(40,32,26,0.98), rgba(30,24,20,0.96));
  padding:14px;
  border-radius:10px;
  border:1px solid rgba(220,185,130,0.04);
}
.column-header{font-weight:600;margin:0 0 10px 0}
.task-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.task-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;background:linear-gradient(180deg, rgba(255,240,215,0.04), rgba(255,240,215,0.01));border:1px solid rgba(220,185,130,0.08);box-shadow: 0 6px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.02);transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease}
.task-row:hover{transform: translateY(-3px);box-shadow: 0 10px 26px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03);border-color: rgba(220,185,130,0.12)}
.task-icon{width:40px;height:40px;border-radius:8px;overflow:hidden}
.task-icon{width:40px;height:40px;border-radius:8px;overflow:hidden;cursor:pointer;transition:transform 120ms ease, box-shadow 140ms ease}
.task-icon:focus-within{box-shadow: 0 6px 18px rgba(96,165,250,0.08);border-radius:8px}
.task-icon:hover{transform: translateY(-2px) scale(1.03);box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.02)}
.task-icon img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 140ms ease}
.task-icon:active img{transform: scale(0.98)}
.task-name{flex:1;font-size:15px;color:#e6eef6}
.task-name.done{opacity:0.6;text-decoration:line-through}

/* Make task names clearly clickable */
.task-name{
  cursor: pointer;
  transition: color 150ms ease, transform 120ms ease;
}
.task-name:hover{
  color: var(--accent-2);
  text-decoration: underline;
  transform: translateX(2px);
}
.task-name:focus{
  outline: none;
  box-shadow: 0 0 0 6px rgba(140,90,43,0.08); /* gold focus */
  border-radius:4px;
}

.task-actions{display:flex;gap:8px;align-items:center}
.add-box{display:flex;gap:8px;margin-top:10px}
.add-box input{flex:1;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.add-box button{padding:8px 12px;border-radius:8px;border:none;background:linear-gradient(180deg, var(--accent-2), var(--accent));color:var(--accent-dark);cursor:pointer;box-shadow: 0 6px 18px rgba(60,38,18,0.06);
}
.remove-btn{color:var(--muted);background:transparent;border:none;cursor:pointer;padding:6px}

/* Custom checkbox styling used in task rows */
.checkbox{display:inline-flex;align-items:center}
.checkbox .real-checkbox{position:absolute;opacity:0;width:1px;height:1px;clip:rect(0 0 0 0);border:0;padding:0;margin:0}
.checkbox .custom-check{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.01);display:inline-block;box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);transition:all 150ms ease;overflow:hidden}
.checkbox .custom-check::after{content:'';display:block;width:6px;height:10px;border:2px solid transparent;border-width:0 2px 2px 0;transform:rotate(45deg);position:relative;left:7px;top:3px}
.checkbox .real-checkbox:checked + .custom-check{background:var(--accent);border-color:var(--accent);box-shadow:none}
.checkbox .real-checkbox:checked + .custom-check::after{border-color:var(--accent-dark)}

/* Icon picker dialog (image thumbnails) */
.icon-picker-overlay{position:fixed;inset:0;background:rgba(2,6,10,0.6);display:flex;align-items:center;justify-content:center;z-index:1200}
.icon-picker{background:linear-gradient(180deg,#1b1208,#120c08);padding:40px 14px 14px 14px;border-radius:10px;min-width:260px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.icon-picker-title{color:var(--muted);margin-bottom:8px}
.icon-grid{display:grid;grid-template-columns:repeat(5,48px);gap:8px}
.icon-thumb{width:48px;height:48px;border-radius:8px;border:none;background:rgba(255,255,255,0.02);cursor:pointer;padding:4px}
.icon-thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.icon-thumb.selected{outline:2px solid var(--accent)}

/* Close button for icon picker */
.icon-picker{ position: relative }
.icon-picker-close{ position: absolute; top:8px; right:8px; border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:18px; padding:6px; border-radius:6px }
.icon-picker-close:hover{ background: rgba(255,255,255,0.02); transform: translateY(-1px) }
.icon-picker-close:focus{ outline:none; box-shadow: 0 0 0 6px rgba(96,165,250,0.06) }

/* Custom checkbox styling inside task rows */
.task-actions input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width:18px;
  height:18px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.06);
  background: transparent;
  display:inline-block;
  position:relative;
  cursor:pointer;
  transition: all 150ms ease;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
}
.task-actions input[type="checkbox"]:hover{ transform: translateY(-1px); }
.task-actions input[type="checkbox"]:focus{ outline: none; box-shadow: 0 0 0 4px rgba(96,165,250,0.08); }
/* checkmark */
.task-actions input[type="checkbox"]::after{
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.task-actions input[type="checkbox"]:checked{
  background: var(--accent);
  border-color: var(--accent);
}
.task-actions input[type="checkbox"]:checked::after{
  border-color: var(--accent-dark);
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* slightly larger touch area without moving layout */
.task-actions input[type="checkbox"]{ margin-right:4px }

/* Custom panels area */
.custom-creator{margin-top:18px}
.custom-panels{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:12px}
.custom-panel .panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;min-height:40px}
.panel-title{flex:1;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.panel-title-wrap{display:flex;gap:4px;align-items:center;flex:1}
.panel-title-wrap .column-header{ color: #f3e7d8 }
.panel-title-input-inline{padding:6px 8px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.edit-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:6px 8px;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;margin-left:0}
.custom-panel .edit-btn{
  /* slightly raise the button so it sits a bit higher visually */
  transform: translateY(-2px);
  align-self: center;
  padding:6px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.custom-panel .edit-btn svg{ display:inline-block; vertical-align:middle }
.panel-delete-x{background:transparent;border:none;color:#ff6b6b;font-weight:700;cursor:pointer;padding:6px 10px;font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.panel-mode{display:flex;gap:8px;align-items:center}
.panel-mode-label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.panel-remove{background:transparent;color:var(--muted);border:none;cursor:pointer;padding:8px}
.create-panel-box{display:flex;gap:8px;margin-top:6px;justify-content:center;align-items:center}
.create-panel-box input{width:280px;max-width:calc(100% - 110px);padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.create-panel-box button{padding:8px 12px;border-radius:8px;border:none;background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-dark);cursor:pointer}

/* Side panel (notes) */
.side-panel{
  position:fixed;
  top:0;
  left:-380px; /* hidden by default */
  height:100vh;
  width:360px;
  max-width:90vw;
  background: linear-gradient(180deg,#241a12, rgba(22,16,12,0.96));
  border-right:1px solid rgba(220,185,130,0.04);
  padding:14px;
  box-shadow: 6px 0 24px rgba(0,0,0,0.6);
  z-index:1300;
  transition: left 240ms ease;
  display:flex;
  flex-direction:column;
}
body.side-open .side-panel{ left:0; }
.side-header{ display:flex;align-items:center;gap:8px;margin-bottom:8px }
.side-header h3{ margin:0; font-size:16px }
.side-header img#side-icon{ width:36px; height:36px; border-radius:8px; object-fit:cover; display:inline-block }

.side-body{ flex:1; display:flex; flex-direction:column }
#side-notes{ flex:1; width:100%; resize:vertical; min-height:120px; padding:10px; border-radius:8px; background:transparent; color:inherit; border:1px solid rgba(255,255,255,0.04); }
.side-actions{ margin-top:10px; display:flex; justify-content:flex-end }
.side-actions .btn{ padding:8px 12px; border-radius:8px; border:none; background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--accent-dark); cursor:pointer }
.side-footer{ display:flex; justify-content:flex-end }
.side-footer .btn{ padding:8px 12px; border-radius:8px; border:none; background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--accent-dark); cursor:pointer; box-shadow: 0 6px 18px rgba(165,122,32,0.06); }
/* Add extra spacing below the Save button so it sits away from the panel bottom */
.side-footer{ margin-top:12px; padding-bottom:12px }

@media (max-width:760px){
  .timers{flex-direction:column;gap:12px}
  .card{width:100%}
  .task-row{padding:8px}
  #ink-overlay{ display:none !important; }
}
@media (max-width:900px){
  .lists{ flex-direction:column; }
  .tasks-column{ width:100%; }
  .timers{flex-direction:column;gap:12px}
  .card{width:100%}
  .custom-panels{grid-template-columns:1fr}
  .tasks-column{ background: linear-gradient(180deg, rgba(42,34,28,0.98), rgba(34,28,22,0.96)); }
  .custom-panel{ background: linear-gradient(180deg, rgba(46,38,32,0.98), rgba(36,28,22,0.96)); }
}
@media (max-width:640px){
  .side-panel{ width:100vw; left:-100vw }
  body.side-open .side-panel{ left:0 }
}
@media (max-width:480px){
  .create-panel-box input{width:100%;max-width:100%}
}

/* Make the radios sit closer to the title but give space below before the task list */
.panel-mode-below{margin-bottom:14px;display:flex;gap:12px;align-items:center;margin-top:0}

/* Custom radio appearance for better contrast with panel background */
.panel-mode-below input[type="radio"]{
  -webkit-appearance: none;
  appearance: none;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.015); /* darker, subtle */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.35);
  cursor: pointer;
  margin-right:8px;
  position:relative;
}
.panel-mode-below input[type="radio"]::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:#042018;
  opacity:0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.panel-mode-below input[type="radio"]:checked{
  background: var(--accent);
  border-color: var(--accent);
}
.panel-mode-below input[type="radio"]:checked::after{
  opacity:1;
  background: var(--accent-dark);
}
/* reduce radio label gap slightly to keep layout compact */
.panel-mode-below{gap:10px}

/* Final tweaks: center and enlarge radio inner dot, and nudge edit button closer */
.panel-title-wrap{gap:2px}
.edit-btn{transform:translateX(-6px)}

/* Header actions for import/export */
.header-actions{ position:absolute; right:14px; top:12px; display:flex; gap:8px }
.header-left{ position:absolute; left:14px; top:12px; display:flex; gap:8px }
.ghost-btn{ background:transparent;border:1px solid rgba(220,185,130,0.08);color:var(--muted);padding:6px 10px;border-radius:8px;cursor:pointer }

/* Make header export/import buttons and todo toolbar button match panel background */
.header-actions .ghost-btn,
.todo-toolbar button#todo-btn{
  background: linear-gradient(180deg, rgba(40,32,26,0.98), rgba(30,24,20,0.96));
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--muted);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}
.header-actions .ghost-btn:hover,
.todo-toolbar button#todo-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

/* Ensure left header buttons match the right-side header actions */
.header-left .ghost-btn{
  background: linear-gradient(180deg, rgba(40,32,26,0.98), rgba(30,24,20,0.96));
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--muted);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}
.header-left .ghost-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

/* Modal overlay */
.modal-overlay{ position:fixed; inset:0; background:rgba(2,6,10,0.6); display:flex; align-items:center; justify-content:center; z-index:1400 }
.modal{ background: linear-gradient(180deg,#241a12, rgba(20,16,12,0.96)); padding:18px; border-radius:10px; width:640px; max-width:94vw; color:inherit; border:1px solid rgba(255,255,255,0.04) }
.modal .modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.modal textarea{ width:100%; min-height:220px; resize:vertical; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit }
.modal .modal-body{ margin-bottom:12px }
.modal .modal-actions{ display:flex; gap:8px; justify-content:flex-end }
.modal .btn{ padding:8px 12px; border-radius:8px; border:none; background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--accent-dark); cursor:pointer; box-shadow: 0 6px 18px rgba(165,122,32,0.08);
}
.modal .btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--muted) }
.modal .error{ color:#ff7b7b; margin-bottom:8px }

/* Changelog content: read-only scrollable region */
.changelog-content{
  max-height: 60vh;
  overflow:auto;
  padding:8px;
  border-radius:6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.02);
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
  font-size: 13px;
  color: var(--muted);
}

/* Right-side todo toolbar & drawer */
.todo-toolbar{ position:fixed; right:12px; top:12px; z-index:1500 }
.todo-toolbar button#todo-btn{
  width:44px; height:44px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:18px;
  border:1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(40,32,26,0.98), rgba(30,24,20,0.96));
  color: var(--muted);
}
.todo-toolbar button#todo-btn:hover{ box-shadow: 0 10px 24px rgba(0,0,0,0.55); transform: translateY(-1px) }

.todo-drawer{ position:fixed; right:-320px; top:0; height:100vh; width:300px; background: linear-gradient(180deg,#241a12, rgba(22,16,12,0.96)); box-shadow: -6px 0 24px rgba(0,0,0,0.6); border-left:1px solid rgba(220,185,130,0.04); padding:14px; transition: right 240ms ease; z-index:1500; display:flex; flex-direction:column }
body.todo-open .todo-drawer{ right:0 }
.todo-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.todo-body{ flex:1; overflow:auto }
.todo-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.todo-row{ display:flex; align-items:center; gap:8px; padding:10px; border-radius:10px; background:linear-gradient(180deg, rgba(255,235,200,0.04), rgba(255,235,200,0.01)); border:1px solid rgba(220,185,130,0.08); box-shadow: 0 6px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.02); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease }
.todo-row:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.03); border-color: rgba(220,185,130,0.12) }
.todo-row input[type="checkbox"]{ width:18px; height:18px }
.todo-name{ flex:1 }
.todo-name.done{ text-decoration: line-through; opacity:0.6 }
.todo-row.checked .remove-btn{ color: #c86f4b }
.todo-add-box{ display:flex; gap:8px; margin-top:10px }
.todo-add-box input{ flex:1; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit }
.todo-add-box button{ padding:8px 12px; border-radius:8px; border:none; background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--accent-dark); cursor:pointer; box-shadow:0 6px 12px rgba(165,122,32,0.06) }

/* ensure drawer appears above side-panel */
.todo-drawer{ z-index:1600 }
/* Style quick-todo checkboxes to match app checkbox visuals */
.todo-row input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width:18px;
  height:18px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.06);
  background: transparent;
  display:inline-block;
  position:relative;
  cursor:pointer;
  transition: all 150ms ease;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
}
.todo-row input[type="checkbox"]:hover{ transform: translateY(-1px); }
.todo-row input[type="checkbox"]:focus{ outline: none; box-shadow: 0 0 0 4px rgba(140,90,43,0.08); }
.todo-row input[type="checkbox"]::after{
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.todo-row input[type="checkbox"]:checked{
  background: var(--accent);
  border-color: var(--accent);
}
.todo-row input[type="checkbox"]:checked::after{
  border-color: var(--accent-dark);
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* ensure checkbox has small right margin so text doesn't stick */
.todo-row input[type="checkbox"]{ margin-right:8px }

/* Ensure the inline SVG overlay sits fixed behind the page and doesn't affect layout */
#ink-overlay{
  display:none !important;
}

/* Make custom panels visually match the tasks columns */
.custom-panel{
  background: linear-gradient(180deg, rgba(40,32,26,0.98), rgba(30,24,20,0.96));
  padding:14px;
  border-radius:10px;
  border:1px solid rgba(220,185,130,0.04);
}