:root{
      --bg:#0b0f17;
      --panel:#11192a;
      --panel2:#0f1626;
      --text:#e9eefc;
      --muted:#9fb0d0;
      --accent:#5aa2ff;
      --accent2:#6cffc7;
      --danger:#ff5a7a;
      --border:rgba(255,255,255,.08);
      --shadow:0 18px 50px rgba(0,0,0,.35);
      --radius:18px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--sans);
      background: radial-gradient(1200px 700px at 20% 15%, rgba(90,162,255,.18), transparent 60%),
                  radial-gradient(900px 600px at 80% 0%, rgba(108,255,199,.12), transparent 55%),
                  var(--bg);
      color:var(--text);
      min-height:100vh;
      display:flex;
      align-items:stretch;
      justify-content:center;
      padding:18px;
    }

    .app{
      width:min(1100px, 100%);
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .topbar{
      display:flex;
      align-items:stretch;
      justify-content:space-between;
      gap:12px;
      padding:14px 14px;
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow:var(--shadow);
    }
    .header-side{
      display:grid;
      gap:10px;
      justify-items:end;
      align-content:start;
      min-width:260px;
      justify-self:end;
      margin-left:auto;
    }
    .header-time-row{
      display:flex;
      align-items:center;
      gap:8px;
      justify-content:flex-end;
      flex-wrap:wrap;
    }
    .format-tabs{
      display:inline-flex;
      align-items:center;
      gap:4px;
      padding:4px;
      border:1px solid var(--border);
      border-radius:12px;
      background:rgba(0,0,0,.18);
    }
    .format-tab{
      min-height:30px;
      padding:6px 10px;
      border-radius:9px;
      font-size:12px;
      font-weight:700;
      line-height:1;
    }
    .topbar-main{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:8px;
      min-width:280px;
      align-self:stretch;
    }
    .tabs{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .tabs-card{
      display:inline-flex;
      align-items:center;
      border:1px solid var(--border);
      border-radius:14px;
      background:rgba(0,0,0,.18);
      padding:6px;
      width:max-content;
      justify-self:start;
    }
    .tab{
      appearance:none;
      border:1px solid var(--border);
      background:rgba(0,0,0,.18);
      color:rgba(233,238,252,.88);
      padding:10px 12px;
      border-radius:12px;
      font-weight:650;
      cursor:pointer;
      transition: transform .06s ease, border-color .15s ease, background .15s ease;
      user-select:none;
    }
    .tab:hover{ border-color:rgba(255,255,255,.18); background:rgba(0,0,0,.24); }
    .tab:active{ transform: translateY(1px); }
    .tab.active{
      border-color:rgba(90,162,255,.8);
      background:rgba(90,162,255,.18);
      color:var(--text);
    }

    .rightbits{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border:1px solid var(--border);
      border-radius:999px;
      background:rgba(0,0,0,.18);
      color:rgba(233,238,252,.82);
      font-size:13px;
      white-space:nowrap;
    }
    .kbd{
      font-family:var(--mono);
      font-size:11px;
      padding:2px 6px;
      border:1px solid var(--border);
      border-radius:8px;
      background:rgba(0,0,0,.18);
      color:rgba(233,238,252,.8);
    }

    .view{
      display:none;
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .view.active{ display:block; }

    .realtime{
      min-height: calc(100vh - 120px);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      position:relative;
    }
    .bigclock{
      width:100%;
      text-align:center;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
    }
    .bigclock .time{
      font-family:var(--mono);
      font-size: clamp(64px, 12vw, 170px);
      line-height:1;
      letter-spacing:2px;
      position: relative;
      display: inline-block;   
      text-align: center;
    }
    .bigclock .date{
      font-size: clamp(14px, 2.1vw, 18px);
      color:rgba(233,238,252,.78);
    }

    /* Timers view */
    .timers{
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .timers-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      padding-bottom:10px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .timers-head-main{
      min-width:280px;
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .timers-head-main > button{
      min-height:40px;
    }
    .timers-title{
      font-size:14px;
      color:var(--muted);
      font-weight:700;
      letter-spacing:.6px;
      text-transform:uppercase;
    }
    .actions{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .inline-sound-controls{
      display:flex;
      justify-content:flex-end;
    }
    .sound-row{
      display:inline-flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    #ringtone-select{
      appearance:none;
      border:1px solid var(--border);
      background:rgba(0,0,0,.18);
      color:var(--text);
      padding:10px 32px 10px 12px;
      border-radius:12px;
      font-weight:650;
      cursor:pointer;
      outline:none;
      max-width:170px;
      min-height:40px;
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(233,238,252,.86) 50%),
        linear-gradient(135deg, rgba(233,238,252,.86) 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 16px,
        calc(100% - 12px) 16px;
      background-size:6px 6px, 6px 6px;
      background-repeat:no-repeat;
      color-scheme:dark;
    }
    #ringtone-select:focus{
      border-color:rgba(90,162,255,.7);
      box-shadow:0 0 0 4px rgba(90,162,255,.15);
    }
    #ringtone-select option{
      background:#0f1626;
      color:#e9eefc;
    }
    .sound-row #snd-vol{
      width:min(152px, 30vw);
    }

    button{
      appearance:none;
      border:1px solid var(--border);
      background:rgba(0,0,0,.18);
      color:var(--text);
      padding:10px 12px;
      border-radius:12px;
      font-weight:650;
      cursor:pointer;
      transition: transform .06s ease, border-color .15s ease, background .15s ease;
      user-select:none;
    }
    button:hover{ border-color:rgba(255,255,255,.18); background:rgba(0,0,0,.24); }
    button:active{ transform: translateY(1px); }
    button.primary{
      border-color:rgba(90,162,255,.45);
      background:rgba(90,162,255,.14);
    }
    button.primary:hover{ border-color:rgba(90,162,255,.8); background:rgba(90,162,255,.18); }
    button.danger{
      border-color:rgba(255,90,122,.45);
      background:rgba(255,90,122,.12);
    }
    button.danger:hover{ border-color:rgba(255,90,122,.85); background:rgba(255,90,122,.16); }
    button:disabled{ opacity:.55; cursor:not-allowed; }

    .grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    @media (max-width: 900px){
      .grid{ grid-template-columns: 1fr; }
    }

    .timer-card{
      border:1px solid var(--border);
      border-radius:16px;
      background:rgba(0,0,0,.14);
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
      transition: border-color .15s ease, transform .06s ease;
    }
    .timer-card:active{ transform: translateY(1px); }
    .timer-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .timer-name{
      display:flex;
      align-items:baseline;
      gap:10px;
      flex-wrap:wrap;
      min-width: 220px;
    }
    .timer-name strong{
      font-size:14px;
      color:rgba(233,238,252,.9);
    }
    .status{
      font-size:12px;
      color:rgba(233,238,252,.75);
    }
    .timer-display{
      font-family:var(--mono);
      font-size:40px;
      letter-spacing:1px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--border);
      background:rgba(0,0,0,.18);
      text-align:center;
    }

    .setrow{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap:10px;
    }
    .setrow label{
      display:flex;
      flex-direction:column;
      gap:6px;
      font-size:12px;
      color:rgba(233,238,252,.7);
    }
    input[type="number"], input[type="text"]{
      font-family:var(--mono);
      font-size:14px;
      padding:10px 10px;
      border-radius:12px;
      border:1px solid var(--border);
      background:rgba(0,0,0,.18);
      color:var(--text);
      outline:none;
    }
    input[type="number"]:focus, input[type="text"]:focus{
      border-color:rgba(90,162,255,.7);
      box-shadow:0 0 0 4px rgba(90,162,255,.15);
    }

    .bar{
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid var(--border);
      overflow:hidden;
    }
    .bar > div{
      height:100%;
      width:0%;
      background:linear-gradient(90deg, var(--accent), var(--accent2));
      transition: width .25s ease;
    }
    .small{ font-size:12px; color:rgba(233,238,252,.7); }
    .note{ font-size:12px; color:rgba(233,238,252,.62); line-height:1.35; margin-top:4px; }

    .compact .grid{ grid-template-columns: 1fr; }
    .compact .timer-display{ font-size:34px; padding:8px 10px; }
    .compact .timer-card{ padding:12px; gap:8px; }
    .compact input[type="number"], .compact input[type="text"]{ padding:9px 9px; }

    .sound-panel{
      width:100%;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:16px;
      background:rgba(0,0,0,.12);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .sound-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .sound-title-wrap{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .no-margin{
      margin:0;
    }
    .sound-controls{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border:1px solid var(--border);
      border-radius:999px;
      background:rgba(0,0,0,.18);
      color:rgba(233,238,252,.82);
      font-size:12px;
      white-space:nowrap;
      min-height:40px;
    }
    .preset-group{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .flex-spacer{
      flex:1;
    }
    .preset{
      padding:8px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
    }
    .preset.active{
      border-color:rgba(90,162,255,.8);
      background:rgba(90,162,255,.18);
    }

    .slider-wrap{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .slider-label{
      font-size:12px;
      color:rgba(233,238,252,.72);
      min-width:60px;
    }
    #snd-vol{
      --vol-pct: 100%;
      -webkit-appearance:none;
      appearance:none;
      width:min(152px, 30vw);
      height:10px;
      padding:0;
      border-radius:999px;
      border:1px solid var(--border);
      outline:none;
      cursor:pointer;
      background:
        linear-gradient(90deg, rgba(90,162,255,.95) 0%, rgba(108,255,199,.95) var(--vol-pct), rgba(255,255,255,.12) var(--vol-pct), rgba(255,255,255,.12) 100%);
    }
    #snd-vol::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width:16px;
      height:16px;
      border-radius:50%;
      background:#f4f8ff;
      border:1px solid rgba(255,255,255,.4);
      box-shadow:0 3px 10px rgba(0,0,0,.28);
      margin-top:-3px;
    }
    #snd-vol::-moz-range-track{
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid var(--border);
    }
    #snd-vol::-moz-range-progress{
      height:10px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(90,162,255,.95), rgba(108,255,199,.95));
      border:1px solid rgba(255,255,255,.16);
    }
    #snd-vol::-moz-range-thumb{
      width:16px;
      height:16px;
      border-radius:50%;
      background:#f4f8ff;
      border:1px solid rgba(255,255,255,.4);
      box-shadow:0 3px 10px rgba(0,0,0,.28);
    }

    .toggle{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:6px 10px;
      border:1px solid var(--border);
      border-radius:999px;
      background:rgba(0,0,0,.18);
      font-size:12px;
      color:rgba(233,238,252,.82);
      user-select:none;
      min-height:40px;
    }
    .toggle input{
      width:40px;
      height:22px;
      appearance:none;
      -webkit-appearance:none;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      position:relative;
      cursor:pointer;
      outline:none;
      transition: background .15s ease, border-color .15s ease;
    }
    .toggle input::after{
      content:"";
      position:absolute;
      top:50%;
      left:3px;
      transform:translateY(-50%);
      width:16px;
      height:16px;
      border-radius:50%;
      background:rgba(255,255,255,.85);
      box-shadow:0 8px 18px rgba(0,0,0,.35);
      transition: left .15s ease;
    }
    .toggle input:checked{
      background:rgba(90,162,255,.22);
      border-color:rgba(90,162,255,.55);
    }
    .toggle input:checked::after{
      left:20px;
    }
    input:disabled{
      opacity:.6;
      cursor:not-allowed;
    }
    .rt-controls{
      position:absolute;
      top:16px;
      right:16px;
      display:flex;
      gap:10px;
    }
    .rt-controls .knob-toggle{
      position:relative;
      border-radius:999px;
      padding:8px 12px 8px 66px;
      min-height:40px;
      font-size:13px;
      background:rgba(0,0,0,.18);
      border-color:var(--border);
    }
    .rt-controls .knob-toggle::before{
      content:"";
      position:absolute;
      left:12px;
      top:50%;
      transform:translateY(-50%);
      width:40px;
      height:22px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      transition:background .15s ease, border-color .15s ease;
    }
    .rt-controls .knob-toggle::after{
      content:"";
      position:absolute;
      left:15px;
      top:50%;
      transform:translateY(-50%);
      width:16px;
      height:16px;
      border-radius:50%;
      background:rgba(255,255,255,.85);
      box-shadow:0 8px 18px rgba(0,0,0,.35);
      transition:left .15s ease;
    }
    .rt-controls .knob-toggle[aria-pressed="true"]::before{
      background:rgba(90,162,255,.22);
      border-color:rgba(90,162,255,.55);
    }
    .rt-controls .knob-toggle[aria-pressed="true"]::after{
      left:32px;
    }
    body.clock-fullscreen{
      padding:0;
      overflow:hidden;
    }
    body.clock-fullscreen .nav-rail,
    body.clock-fullscreen .topbar{
      display:none;
    }
    body.clock-fullscreen .app{
      width:100vw;
      max-width:none;
      height:100vh;
      gap:0;
    }
    body.clock-fullscreen .view{
      border-radius:0;
      border:0;
      box-shadow:none;
    }
    body.clock-fullscreen .view.active{
      height:100vh;
    }
    body.clock-fullscreen .realtime{
      min-height:100vh;
      padding:24px;
    }
    .ampm{
      position: absolute;
      top: 2.2em;
      right: -1.60em;          
      font-size: 0.28em;
      opacity: 0.75;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }


    .nav-rail {
      width: min(280px, 100%);
      border: 1px solid var(--border);
      border-radius: 14px;
      background: rgba(0, 0, 0, 0.16);
      padding: 10px;
    }
    .nav-rail-title {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(233, 238, 252, 0.9);
      margin: 0;
    }
    .nav-rail-toggle{
      appearance:none;
      border:1px solid var(--border);
      border-radius:10px;
      min-width:32px;
      min-height:32px;
      padding:0;
      font-size:18px;
      line-height:1;
      font-weight:700;
      color:var(--text);
      background:rgba(0,0,0,.2);
      cursor:pointer;
    }
    .nav-rail-sections{
      display:grid;
      gap:10px;
    }
    .nav-card{
      border:1px solid var(--border);
      border-radius:12px;
      background:rgba(0,0,0,.14);
      padding:8px;
    }
    .nav-home-card{
      display:grid;
      gap:8px;
    }
    .nav-card-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .nav-group{
      display:grid;
      gap:6px;
    }
    .nav-group-title{
      color:rgba(233,238,252,.62);
      font-size:11px;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-weight:700;
      padding:0 2px;
    }
    .nav-rail-list {
      display: grid;
      gap: 8px;
    }
.nav-rail-link {
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.18);
  font-size: 14px;
  font-weight: 650;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.06s ease;
}
.nav-rail-link:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.24);
}
.nav-rail-link:active {
  transform: translateY(1px);
}
    .nav-rail-link.is-active {
      border-color: rgba(90, 162, 255, 0.38);
      background: linear-gradient(180deg, rgba(90, 162, 255, 0.22), rgba(90, 162, 255, 0.09));
    }
    .nav-rail.is-collapsed{
      width:64px;
      padding:10px 8px;
    }
    .nav-rail.is-collapsed .nav-card:not(.nav-home-card){
      display:none;
    }
    .nav-rail.is-collapsed .nav-home-card .nav-rail-list,
    .nav-rail.is-collapsed .nav-home-card .nav-rail-title{
      display:none;
    }
@media (min-width: 1280px) {
  .nav-rail {
    position: fixed;
    left: 16px;
    top: 16px;
    z-index: 5;
  }
}