:root{
      --bg: linear-gradient(135deg,#0f172a 0%, #07102a 100%);
      --card-bg: rgba(255,255,255,0.06);
      --glass-border: rgba(255,255,255,0.08);
      --accent: #6ee7b7; /* soft mint */
      --muted: rgba(255,255,255,0.65);
      --danger: #ff6b6b;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    html,body{
      height:100%;
      margin:0;
      background: var(--bg);
      color: #e6eef8;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    .wrap{
      min-height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:40px 20px;
      box-sizing:border-box;
    }

    .dashboard{
      width:100%;
      max-width:920px;
      border-radius:16px;
      padding:28px;
      box-shadow: 0 10px 30px rgba(2,6,23,0.6);
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
      backdrop-filter: blur(8px) saturate(110%);
      border: 1px solid var(--glass-border);
      display:grid;
      grid-template-columns: 1fr 360px;
      gap:24px;
    }

    /* MOBILE: stack */
    @media (max-width:820px){
      .dashboard { grid-template-columns: 1fr; }
      .right { order: 2; }
      .left { order: 1; }
    }

    header{
      grid-column:1 / -1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:4px;
    }

    .title{
      display:flex;
      flex-direction:column;
      gap:4px;
    }

    .title h1{
      margin:0;
      font-size:20px;
      font-weight:700;
      letter-spacing: -0.2px;
    }

    .title p{
      margin:0;
      font-size:13px;
      color:var(--muted);
    }

    .clock{
      text-align:right;
      font-variant-numeric: tabular-nums;
    }

    .clock .time{
      display:block;
      font-size:18px;
      font-weight:600;
    }

    .clock .date{
      display:block;
      font-size:12px;
      color:var(--muted);
    }

    /* Left column content */
    .card{
      background: var(--card-bg);
      padding:18px;
      border-radius:12px;
      border: 1px solid var(--glass-border);
      box-shadow: 0 6px 18px rgba(2,6,23,0.45);
    }

    .left .card + .card { margin-top:16px; }

    .controls{
      display:flex;
      gap:8px;
      margin-top:12px;
    }

    .controls input[type="text"]{
      flex:1;
      padding:10px 12px;
      border-radius:10px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(0,0,0,0.14);
      color:inherit;
      outline:none;
      font-size:14px;
    }

    .controls button{
      padding:10px 14px;
      border-radius:10px;
      border: none;
      font-weight:600;
      cursor:pointer;
      background: linear-gradient(180deg,var(--accent), #4dd6a0);
      color:#022;
      min-width:84px;
      box-shadow: 0 6px 12px rgba(3,20,15,0.2);
    }

    .todo-list{
      margin-top:14px;
      list-style:none;
      padding:0;
      max-height:340px;
      overflow:auto;
    }

    .todo-item{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px;
      border-radius:8px;
      margin-bottom:10px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.02);
    }

    .todo-item input[type="checkbox"]{
      width:18px;
      height:18px;
      accent-color: var(--accent);
      cursor:pointer;
    }

    .todo-text{
      flex:1;
      font-size:14px;
      word-break:break-word;
    }

    .todo-text.done{
      text-decoration: line-through;
      opacity:0.6;
      color: var(--muted);
    }

    .todo-actions{
      display:flex;
      gap:8px;
      align-items:center;
    }

    .btn-small{
      border:0;
      background:transparent;
      color:var(--muted);
      cursor:pointer;
      font-weight:600;
      padding:6px;
      border-radius:8px;
    }

    .btn-delete{
      color: var(--danger);
    }

    /* Right column */
    .right {
      display:flex;
      flex-direction:column;
      gap:16px;
    }

    .stat{
      display:flex;
      flex-direction:column;
      gap:6px;
    }

    .stat .num{
      font-size:28px;
      font-weight:700;
      letter-spacing:-0.4px;
    }

    .small{
      font-size:13px;
      color:var(--muted);
    }

    footer.note{
      grid-column: 1 / -1;
      text-align:center;
      font-size:12px;
      color:var(--muted);
      margin-top:6px;
    }

    /* Accessibility focus */
    input:focus, button:focus, .btn-small:focus {
      outline: 2px solid rgba(110,231,183,0.22);
      outline-offset: 2px;
    }