:root{
  --bg:#0b1020;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --muted2: rgba(255,255,255,.52);

  --accent:#77b5ff;     /* ONE brand color */
  --ok:#66f2c2;
  --bad:#ff5f86;

  --radius-xl:22px;
  --radius-lg:16px;
  --radius-md:12px;
  --shadow: 0 18px 45px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:
    radial-gradient(1100px 600px at 10% 10%, rgba(119,181,255,.14), transparent 55%),
    radial-gradient(900px 600px at 90% 30%, rgba(119,181,255,.08), transparent 60%),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
  pointer-events:auto;
}

a{color:inherit;text-decoration:none}
.container{width:min(1120px, calc(100% - 40px)); margin:0 auto}

.bg{position:fixed; inset:0; pointer-events:none; z-index:0}
.blur-blob{
  position:absolute; width:520px; height:520px; border-radius:999px;
  filter:blur(80px); opacity:.18; background:var(--accent);
}
.blob-1{left:-140px; top:80px}
.blob-2{right:-170px; top:220px; opacity:.10}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(10,14,28,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:14px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{
  width:34px;height:34px;border-radius:12px;object-fit:contain;display:block;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.brand-text{font-weight:850; letter-spacing:.2px}
.nav-actions{display:flex; align-items:center; gap:10px}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.page-wrap{
  position:relative; z-index:1;
  min-height: calc(100vh - 70px);
  padding: 34px 0 60px;
}

.auth-grid{
  display:grid;
  grid-template-columns: 1fr;
  place-items:center;
}

.auth-card{
  width: min(460px, 100%);
  padding: 22px;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-size:13px;
}
.kicker .dot{
  width:8px;height:8px;border-radius:999px;background:var(--accent);
  box-shadow: 0 0 18px rgba(119,181,255,.35);
}

.h1{
  margin: 14px 0 8px 0;
  font-size: 30px;
  letter-spacing: -0.4px;
}
.p{margin:0; color: var(--muted); line-height:1.6}

.form{margin-top:16px; display:grid; gap:12px}
.field{display:grid; gap:7px}
.label{font-size:13px; color: var(--muted)}
.input{
  width:100%;
  height:46px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 0 14px;
  outline:none;
}
.input::placeholder{color: rgba(255,255,255,.35)}
.input:focus{
  border-color: rgba(119,181,255,.38);
  box-shadow: 0 0 0 4px rgba(119,181,255,.10);
}

.row{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.small{font-size:13px; color: var(--muted)}
.link{color: rgba(119,181,255,.95)}
.link:hover{color: rgba(119,181,255,1)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 16px;
  border-radius:999px;
  font-weight:800; font-size:14px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
  user-select:none;
  gap:10px;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none}

.btn-primary{
  background: var(--accent);
  color: #061120;
  border-color: rgba(255,255,255,.08);
}
.btn-ghost{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-color: rgba(255,255,255,.12);
}
.btn-ghost:hover{background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16)}
.btn-full{width:100%}

.hr{
  height:1px;
  background: rgba(255,255,255,.08);
  margin: 14px 0;
}

.alert{
  margin-top:12px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 13px;
  display:none;
}
.alert.show{display:block}
.alert.ok{border-color: rgba(102,242,194,.25)}
.alert.err{border-color: rgba(255,95,134,.25)}

.footer-note{
  margin-top:12px;
  text-align:center;
  color: var(--muted2);
  font-size: 13px;
}

.center{
  text-align:center;
}

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 12px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  font-weight:800; font-size:13px;
}

/* Dashboard placeholder styling */
.dash-shell{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
.dash-card{
  padding: 18px;
  border-radius: var(--radius-xl);
}
.dash-title{
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 6px 0;
}
.dash-sub{margin:0; color: var(--muted); line-height:1.6}

/* Mobile */
@media (max-width: 520px){
  .container{width:min(1120px, calc(100% - 28px))}
  .auth-card{padding:18px}
}

/* Dashboard Layout */
.dash-wrap{
  display:grid;
  gap: 18px;
  margin-top: 18px;
}
.panel{
  padding: 22px;
}

/* Date Navigator */
.date-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  flex-wrap:wrap;
}
.date-label-btn{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight:800;
  font-size:15px;
  color: var(--text);
  cursor:pointer;
  min-width:140px;
  text-align:center;
  transition: background 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.2,0.8,0.2,1);
}
.date-label-btn:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.date-label-btn:active{
  transform: translateY(0px);
}
@media (prefers-reduced-motion: reduce){
  .date-label-btn{
    transition: background 180ms ease, border-color 180ms ease;
  }
  .date-label-btn:hover{
    transform: none;
  }
}

/* Overview Cards */
.overview-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ov-card{
  padding: 18px;
  text-align:center;
}
.ov-label{
  font-size:12px;
  color: var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom: 8px;
}
.ov-value{
  font-size:24px;
  font-weight:900;
  color: var(--text);
}

/* Presets Row */
.preset-row{
  display:flex;
  align-items:center;
  gap: 14px;
  overflow-x:auto;
  padding: 4px 0;
}
.presets-scroll{
  display:flex;
  gap: 10px;
  flex:1;
  overflow-x:auto;
  padding: 4px 0;
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.presets-scroll::-webkit-scrollbar{
  height:6px;
}
.presets-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.presets-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.2);
  border-radius:999px;
}
.presets-empty{
  color: var(--muted2);
  font-size:13px;
  padding: 8px 0;
}
.preset-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:13px;
  font-weight:700;
  position:relative;
  white-space:nowrap;
  transition: background 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.2,0.8,0.2,1);
}
.preset-chip-select{
  cursor:pointer;
}
.preset-chip-select:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}
.preset-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  flex-shrink:0;
}
.preset-icon{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  opacity:.75;
  letter-spacing:.5px;
}
.preset-name{
  color: var(--text);
}
.preset-delete{
  margin-left: 6px;
  width:18px;
  height:18px;
  border-radius:999px;
  border:none;
  background: rgba(255,255,255,.08);
  color: var(--muted2);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition: background 180ms ease, color 180ms ease;
}
.preset-delete:hover{
  background: rgba(255,95,134,.15);
  color: var(--bad);
}

/* Hours Grid */
.hours-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.hour-slot{
  min-height: 70px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.2,0.8,0.2,1), opacity 180ms ease;
  user-select:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 8px;
  gap: 4px;
}
.hour-slot:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
  transform: translateY(-1px);
}
.hour-slot:active{
  transform: translateY(0px);
}
.hour-slot.logged{
  border-width: 2px;
}
.hour-label{
  font-weight:800;
  font-size:13px;
  color: var(--text);
}
.hour-preset{
  font-size:11px;
  font-weight:700;
  color: var(--muted);
  text-align:center;
  line-height:1.2;
}
@media (prefers-reduced-motion: reduce){
  .hour-slot{
    transition: background 180ms ease, border-color 180ms ease, opacity 180ms ease;
  }
  .hour-slot:hover{
    transform: none;
  }
}

/* Breakdown List */
.breakdown-list{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}
.breakdown-item{
  display:grid;
  gap: 8px;
}
.breakdown-label{
  font-size:13px;
  font-weight:700;
  color: var(--text);
}
.breakdown-value{
  font-size:13px;
  font-weight:800;
  color: var(--muted);
  text-align:right;
}
.breakdown-bar{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.breakdown-bar-fill{
  height:100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 220ms cubic-bezier(0.2,0.8,0.2,1);
}

/* Swatch Grid */
.swatch-grid{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 8px;
}
.swatch{
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 3px solid transparent;
  cursor:pointer;
  transition: border-color 180ms ease, transform 220ms cubic-bezier(0.2,0.8,0.2,1);
  position:relative;
  flex-shrink:0;
}
.swatch:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.25);
}
.swatch.selected{
  border-color: rgba(255,255,255,.50);
  box-shadow: 0 0 0 4px rgba(119,181,255,.20);
}
@media (prefers-reduced-motion: reduce){
  .swatch{
    transition: border-color 180ms ease;
  }
  .swatch:hover{
    transform: none;
  }
}

/* Icon Grid */
.icon-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.icon-tile{
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.2,0.8,0.2,1);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 8px 4px;
}
.icon-tile:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
  transform: translateY(-1px);
}
.icon-tile.selected{
  border-color: var(--accent);
  background: rgba(119,181,255,.12);
  box-shadow: 0 0 0 2px rgba(119,181,255,.15);
}
@media (prefers-reduced-motion: reduce){
  .icon-tile{
    transition: background 180ms ease, border-color 180ms ease;
  }
  .icon-tile:hover{
    transform: none;
  }
}

/* Modal / Sheet - Redesigned */
.modal-backdrop, .sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  opacity:0;
  transition: opacity 180ms ease;
}
.modal-backdrop.is-open, .sheet-backdrop.is-open{
  opacity:1;
}

/* Centered Modal */
.modal{
  position:relative;
  z-index:101;
  max-width: 560px;
  width: min(560px, calc(100% - 32px));
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  opacity:0;
  transform: translateY(10px) scale(.98);
  transition: opacity 220ms cubic-bezier(0.2,0.8,0.2,1), transform 220ms cubic-bezier(0.2,0.8,0.2,1);
}
.modal.is-open{
  opacity:1;
  transform: translateY(0) scale(1);
}
.modal-content{
  display:flex;
  flex-direction:column;
  max-height: 85vh;
  overflow:hidden;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-title{
  font-size:18px;
  font-weight:900;
  margin:0;
  color: var(--text);
}
.modal-body{
  padding: 22px;
  overflow-y:auto;
  flex:1;
}
.modal-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  margin-top: 18px;
}

/* Bottom Sheet - Removed duplicate, using definition below */
.sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sheet-title{
  font-size:18px;
  font-weight:900;
  margin:0;
  color: var(--text);
}
.sheet-body{
  padding: 22px;
  overflow-y:auto;
  flex:1;
}

/* Preset Select Cards (Redesigned) */
.presets-select{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.preset-select-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 16px 12px;
  border-radius: var(--radius-md);
  border: 2px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.2,0.8,0.2,1);
  position:relative;
  min-height: 100px;
}
.preset-select-card:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
  transform: translateY(-2px);
}
.preset-select-card.selected{
  border-color: var(--accent);
  background: rgba(119,181,255,.12);
  box-shadow: 0 0 0 3px rgba(119,181,255,.15);
}
.preset-select-icon{
  font-size:24px;
  font-weight:900;
  text-transform:uppercase;
  opacity:.85;
  letter-spacing:.5px;
}
.preset-select-name{
  font-size:13px;
  font-weight:700;
  color: var(--text);
  text-align:center;
}
.preset-select-check{
  position:absolute;
  top: 8px;
  right: 8px;
  width:20px;
  height:20px;
  border-radius:999px;
  background: var(--accent);
  color: #061120;
  font-size:12px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition: opacity 180ms ease;
}
.preset-select-card.selected .preset-select-check{
  opacity:1;
}

/* Note Field Collapse */
.note-field-collapsed{
  max-height:0;
  overflow:hidden;
  opacity:0;
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  transition: max-height 220ms cubic-bezier(0.2,0.8,0.2,1), opacity 220ms ease, margin 220ms ease, padding 220ms ease;
}
#noteField:not(.note-field-collapsed){
  max-height:200px;
  opacity:1;
  transition: max-height 220ms cubic-bezier(0.2,0.8,0.2,1), opacity 220ms ease, margin 220ms ease, padding 220ms ease;
}

/* Small Button */
.btn-small{
  height:36px;
  padding: 0 14px;
  font-size:13px;
}

/* Toggle Label */
.toggle-label{
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  font-size:13px;
  color: var(--text);
}
.toggle-label input[type="checkbox"]{
  width:18px;
  height:18px;
  cursor:pointer;
  accent-color: var(--accent);
}

/* Just Logged Animation */
@keyframes just-logged{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.02); box-shadow: 0 0 0 4px rgba(119,181,255,.3); }
  100%{ transform: scale(1); box-shadow: none; }
}
.hour-slot.just-logged{
  animation: just-logged 220ms cubic-bezier(0.2,0.8,0.2,1);
}

@media (prefers-reduced-motion: reduce){
  .modal-backdrop, .sheet-backdrop{
    transition: opacity 180ms ease;
  }
  .modal, .sheet{
    transition: opacity 220ms ease;
  }
  .modal.is-open, .sheet.is-open{
    transform: none;
  }
  .preset-select-card{
    transition: background 180ms ease, border-color 180ms ease;
  }
  .preset-select-card:hover{
    transform: none;
  }
  .hour-slot.just-logged{
    animation: none;
  }
  .note-field-collapsed{
    transition: opacity 220ms ease;
  }
}

/* Danger Button */
.btn-danger{
  background: rgba(255,95,134,.12);
  color: var(--bad);
  border-color: rgba(255,95,134,.25);
}
.btn-danger:hover{
  background: rgba(255,95,134,.18);
  border-color: rgba(255,95,134,.35);
}

/* Skeleton / Loading */
.skeleton{
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-md);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .6; }
}
@media (prefers-reduced-motion: reduce){
  .skeleton{
    animation: none;
    opacity: .7;
  }
}

/* Textarea */
textarea.input{
  min-height: 80px;
  padding: 12px 14px;
  resize:vertical;
  font-family:inherit;
  line-height:1.5;
}

/* Mobile Responsive */
@media (max-width: 768px){
  .overview-cards{
    grid-template-columns: 1fr;
  }
  .hours-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .icon-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .sheet{
    max-height: 85vh;
  }
}
@media (max-width: 520px){
  .hours-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .icon-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .panel{
    padding: 18px;
  }
  .sheet-header, .sheet-body{
    padding: 16px 18px;
  }
  .date-nav{
    gap: 8px;
  }
  .date-label-btn{
    min-width:100px;
    font-size:13px;
    padding: 6px 12px;
  }
}

/* Modal/Sheet System - Fixed Positioning */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms ease;
}
.modal-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

.sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms ease;
}
.sheet-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

/* Centered Modal */
.modal{
  position:relative;
  z-index:10000;
  max-width: 620px;
  width: min(620px, calc(100% - 32px));
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  opacity:0;
  transform: translateY(10px) scale(.98);
  transition: opacity 220ms cubic-bezier(0.2,0.8,0.2,1), transform 220ms cubic-bezier(0.2,0.8,0.2,1);
}
.modal.is-open{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Bottom Sheet */
.sheet{
  position:fixed;
  left:50%;
  bottom:0;
  width: min(720px, calc(100% - 24px));
  transform: translateX(-50%) translateY(18px);
  border-radius: 22px 22px 0 0;
  max-height: calc(100vh - 24px);
  overflow:auto;
  z-index:10000;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.15);
  box-shadow: 0 -8px 32px rgba(0,0,0,.4);
  opacity:0;
  transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), opacity 180ms ease;
  display:flex;
  flex-direction:column;
}
.sheet.is-open{
  transform: translateX(-50%) translateY(0);
  opacity:1;
}

/* Preset Row Scrolling */
.preset-row{
  display:flex;
  align-items:center;
  gap: 10px;
  overflow-x:auto;
  padding-bottom: 6px;
  position:relative;
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.preset-row::-webkit-scrollbar{
  height:6px;
}
.preset-row::-webkit-scrollbar-track{
  background:transparent;
}
.preset-row::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.2);
  border-radius:999px;
}
.preset-row::after{
  content:'';
  position:absolute;
  right:0;
  top:0;
  bottom:6px;
  width:40px;
  background: linear-gradient(to left, var(--bg), transparent);
  pointer-events:none;
  opacity:0;
  transition: opacity 180ms ease;
}
.preset-row:not(:hover)::after{
  opacity:1;
}
.presets-scroll{
  display:flex;
  gap: 10px;
  flex:1;
  overflow-x:auto;
  padding: 4px 0;
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.presets-scroll::-webkit-scrollbar{
  height:6px;
}
.presets-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.presets-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.2);
  border-radius:999px;
}

/* Icon Rendering */
.preset-icon-img{
  width: 18px;
  height: 18px;
  object-fit:contain;
  filter: brightness(0) invert(1);
  opacity:.85;
}
.preset-select-icon-img{
  width: 24px;
  height: 24px;
  object-fit:contain;
  filter: brightness(0) invert(1);
  opacity:.9;
}
.icon-tile-img{
  width: 22px;
  height: 22px;
  object-fit:contain;
  filter: brightness(0) invert(1);
  opacity:.85;
}

/* Custom Color Swatch */
.swatch-custom{
  position:relative;
  overflow:hidden;
}
.swatch-custom input[type="color"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

@media (prefers-reduced-motion: reduce){
  .modal-backdrop, .sheet-backdrop{
    transition: opacity 180ms ease;
  }
  .modal, .sheet{
    transition: opacity 220ms ease;
  }
  .modal.is-open, .sheet.is-open{
    transform: none;
  }
}

/* Timeline Bar */
.timeline-bar{
  margin: 14px 0;
  padding: 8px 0;
}
.timeline-container{
  display:flex;
  gap: 2px;
  height: 24px;
  border-radius: var(--radius-md);
  overflow:hidden;
  background: rgba(255,255,255,.04);
  padding: 2px;
}
.timeline-segment{
  flex:1;
  border-radius: 3px;
  cursor:pointer;
  transition: opacity 180ms ease, transform 180ms ease;
  position:relative;
}
.timeline-segment:hover{
  opacity:.8;
  transform: scaleY(1.1);
}
.hour-slot.timeline-highlight{
  animation: timeline-highlight 1000ms cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes timeline-highlight{
  0%, 100%{ box-shadow: none; }
  50%{ box-shadow: 0 0 0 4px rgba(119,181,255,.4); }
}

/* Preset Chip Clickable */
.preset-chip-clickable{
  cursor:pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(0.2,0.8,0.2,1);
}
.preset-chip-clickable:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
}
.preset-chip-clickable:active{
  transform: translateY(0px);
}

/* Drag Selected State */
.hour-slot.drag-selected{
  border-color: var(--accent);
  background: rgba(119,181,255,.25);
  box-shadow: 0 0 0 2px rgba(119,181,255,.3);
}

/* Stats Panel */
.stats-panel{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 12px;
  display:grid;
  gap: 8px;
}
.stat-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
}
.stat-label{
  color: var(--muted);
}
.stat-value{
  color: var(--text);
  font-weight:800;
}

/* Compare Results */
.compare-results{
  display:grid;
  gap: 18px;
  margin-top: 18px;
}
.compare-day{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 14px;
}
.compare-day-header{
  font-weight:900;
  font-size:15px;
  margin-bottom: 10px;
  color: var(--text);
}
.compare-stat{
  font-size:13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.compare-top{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.compare-label{
  font-size:12px;
  color: var(--muted2);
  margin-bottom: 8px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.compare-activity{
  font-size:13px;
  color: var(--text);
  margin-bottom: 4px;
}
.compare-diff{
  background: rgba(119,181,255,.08);
  border: 1px solid rgba(119,181,255,.2);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align:center;
}

/* Toast Notification */
.toast{
  position:fixed;
  bottom: 24px;
  left:50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  padding: 12px 20px;
  font-size:13px;
  font-weight:700;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  z-index:10001;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2,0.8,0.2,1);
}
.toast.toast-show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
  pointer-events:auto;
}

/* Preset Chip Scroll Fade */
.preset-row::after{
  content:'';
  position:absolute;
  right:0;
  top:0;
  bottom:6px;
  width:40px;
  background: linear-gradient(to left, var(--bg), transparent);
  pointer-events:none;
  opacity:0;
  transition: opacity 180ms ease;
}
.preset-row:not(:hover)::after{
  opacity:1;
}

/* Hours Grid Controls */
.hours-grid-controls{
  display:flex;
  gap: 8px;
  margin: 14px 0;
  align-items:center;
}
.hours-grid-controls .btn-small{
  flex-shrink:0;
}
.hours-grid-controls .btn-full{
  flex:1;
}

/* Selection Mode */
.hours-grid.selection-mode{
  touch-action:none;
  user-select:none;
}
.hours-grid.selection-mode .hour-slot{
  cursor:pointer;
  position:relative;
}

/* Hour Selection State */
.hour-slot.hour-selected{
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(119,181,255,.2), inset 0 0 12px rgba(119,181,255,.15);
  transform: scale(1.02);
  z-index:10;
}
.hour-selection-check{
  position:absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight:900;
  color: var(--bg);
  opacity:0;
  transform: scale(0);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2,0.8,0.2,1);
  z-index:11;
}
.hour-slot.hour-selected .hour-selection-check{
  opacity:1;
  transform: scale(1);
}

/* Hour Cleared Animation */
.hour-slot.hour-cleared{
  animation: hour-cleared 300ms cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes hour-cleared{
  0%{ opacity:1; }
  50%{ opacity:.3; transform: scale(.95); }
  100%{ opacity:1; }
}

/* Selection Action Bar */
.selection-action-bar{
  position:sticky;
  bottom: 0;
  left:0;
  right:0;
  display:flex;
  gap: 8px;
  padding: 14px;
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg);
  box-shadow: 0 -4px 24px rgba(0,0,0,.3);
  z-index:100;
}
.selection-action-bar button{
  flex:1;
  transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), background 180ms ease;
}
.selection-action-bar button:active{
  transform: scale(.98);
}

/* Select Mode Button Active State */
#selectModeBtn.active{
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Mobile: Action bar fixed at bottom */
@media (max-width: 768px){
  .selection-action-bar{
    position:fixed;
    bottom: 0;
    left:0;
    right:0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin:0;
    padding: 16px;
  }
  .selection-action-bar::before{
    content:'';
    position:absolute;
    top: -20px;
    left:0;
    right:0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.2));
    pointer-events:none;
  }
}