:root{
      --bg: #0b0f14;
      --surface: rgba(255,255,255,.06);
      --surface2: rgba(255,255,255,.09);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.65);
      --border: rgba(255,255,255,.10);
      --accent: #18a6ff;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 14px;
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    }
    [data-theme="light"]{
      --bg: #f6f8fb;
      --surface: rgba(15,23,42,.04);
      --surface2: rgba(15,23,42,.06);
      --text: rgba(15,23,42,.92);
      --muted: rgba(15,23,42,.62);
      --border: rgba(15,23,42,.10);
      --shadow: 0 10px 30px rgba(15,23,42,.10);
    }

    *{box-sizing:border-box}
    body{
      margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
      line-height:1.35;
    }

    .wrap{max-width:1180px; margin:0 auto; padding:24px;}
    .appbar{
      position:sticky; top:0; z-index:10;
      backdrop-filter: blur(10px);
      background: color-mix(in oklab, var(--bg) 70%, transparent);
      border-bottom:1px solid var(--border);
    }
    .appbar-inner{
      max-width:1180px; margin:0 auto;
      padding:14px 24px; display:flex; align-items:center; gap:16px;
    }
    .brand{display:flex; flex-direction:column; gap:2px; min-width:260px}
    .brand strong{font-size:24px; letter-spacing:.2px}
    .brand span{font-size:12px; color:var(--muted)}

    .navlinks{display:flex; gap:10px; align-items:center}
    .navlinks a{
      color:var(--muted);
      text-decoration:none;
      font-weight:700;
      font-size:13px;
      padding:8px 10px;
      border-radius:999px;
    }
    .navlinks a:hover{ background:var(--surface); color:var(--text); }
    .navlinks a.active{ background:var(--surface); color:var(--text); border:1px solid var(--border); }
	button.primary a {
      color:var(--text);
      text-decoration:none;
      font-weight:700;
      font-size:13px;
      padding:8px 10px;
      border-radius:999px;
    }
	button.primary:hover {background:var(--surface);}
    .spacer{flex:1}

    .actions{display:flex; align-items:center; gap:10px}
    .search{
      width:260px; max-width:34vw;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:999px;
      padding:10px 12px;
      color:var(--text);
      outline:none;
	  padding-right:28px;
    }
    .btn{
      border:1px solid var(--border);
      background:var(--surface);
      color:var(--text);
      padding:10px 12px;
      border-radius:999px;
      cursor:pointer; font-weight:700; font-size:13px;
    }
    .btn.primary{
      background: color-mix(in oklab, var(--accent) 18%, var(--surface));
      border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
    }

    .kpis{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
    .kpi{
      flex:1; min-width:220px;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:14px 14px;
      box-shadow: var(--shadow);
    }
    .kpi .label{color:var(--muted); font-size:18px; font-weight:600; float: left;}
    .kpi .value{font-size:40px; font-weight:800; margin-top:-6px; float: right;}

    .filters{
      display:flex; gap:10px; flex-wrap:wrap;
      margin-top:16px;
      padding:12px;
      border-radius:var(--radius);
      border:1px solid var(--border);
      background:var(--surface);
    }
    .select{
      background:var(--surface2);
      border:1px solid var(--border);
      color:var(--text);
      padding:10px 12px;
      border-radius:12px;
      outline:none;
      font-weight:600;
      font-size:13px;
    }

    .panel{
      margin-top:16px;
      border:1px solid var(--border);
      background:var(--surface);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow);
    }
    .panel + .panel{ margin-top:14px; }

    .panel-header{
      display:flex; justify-content:space-between; align-items:center;
      padding:14px 14px;
      border-bottom:1px solid var(--border);
      gap:12px;
    }
    .panel-header h2{margin:0; font-size:14px; letter-spacing:.2px}
    .panel-header .meta{color:var(--muted); font-size:12px; font-weight:600; display:flex; align-items:center; gap:10px}
    .link{
      color:var(--muted);
      text-decoration:none;
      font-weight:800;
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid transparent;
    }
    .link:hover{
      color:var(--text);
      background:var(--surface2);
      border-color:var(--border);
    }

    .rows{display:flex; flex-direction:column}
    .row{
      display:grid;
      grid-template-columns: 140px 1fr 220px;
      gap:12px;
      padding:14px;
      border-bottom:1px solid var(--border);
      cursor:pointer;
    }
    .row:hover{background:var(--surface2)}
    .row:focus{outline:2px solid color-mix(in oklab, var(--accent) 50%, transparent); outline-offset:-2px;}
    .row:last-child{border-bottom:none}

    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--surface2);
      font-weight:800; font-size:12px;
      width:fit-content;
    }
    .dot{width:8px; height:8px; border-radius:999px; background:var(--muted)}
    .crit .dot{background:#ff4d4d}
    .ongoing .dot{background:#ffb020}
    .planned .dot{background:#18a6ff}
    .done .dot{background:#33d17a}

    .title{font-weight:800; font-size:14px}
    .sub{color:var(--muted); font-size:12px; margin-top:4px; font-weight:600}
    .right{justify-self:end; text-align:right}
    .right .time{font-weight:800; font-size:13px}
    .right .who{color:var(--muted); font-size:12px; margin-top:4px; font-weight:600}

    .hidden{display:none !important;}

    /* Modal */
    .modal-backdrop{
      position:fixed; inset:0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      display:flex; align-items:center; justify-content:center;
      padding:24px;
      z-index:50;
    }
    .modal{
      width:min(720px, 100%);
      border-radius:18px;
      border:1px solid var(--border);
      background: color-mix(in oklab, var(--bg) 75%, #000);
      box-shadow: 0 30px 80px rgba(0,0,0,.55);
      overflow:hidden;
    }
    [data-theme="light"] .modal{
      background: color-mix(in oklab, #fff 88%, var(--surface2));
      box-shadow: 0 30px 80px rgba(15,23,42,.18);
    }
    .modal-header{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      padding:16px 16px;
      border-bottom:1px solid var(--border);
    }
    .modal-title{font-weight:900; font-size:15px; margin:0;}
    .modal-sub{color:var(--muted); font-size:12px; font-weight:700; margin-top:6px;}
    .modal-body{padding:16px;}
    .modal-body p{margin:0; color:var(--text); font-weight:650;}
    .modal-grid{
      margin-top:14px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    .kv{
      border:1px solid var(--border);
      background:var(--surface);
      border-radius:14px;
      padding:12px;
    }
    .kv .k{color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.3px;}
    .kv .v{margin-top:6px; font-size:13px; font-weight:800;}
    .modal-actions{
      display:flex; justify-content:flex-end; gap:10px;
      padding:14px 16px;
      border-top:1px solid var(--border);
      background: color-mix(in oklab, var(--surface) 70%, transparent);
    }

    @media (max-width: 860px){
      .row{grid-template-columns: 1fr; }
      .right{justify-self:start; text-align:left}
      .brand{min-width:auto}
      .search{display:none}
      .navlinks{display:none}
      .modal-grid{grid-template-columns: 1fr;}
    }
	
	.search-wrapper{
	  position:relative;
	}

	.clear-search{
	  position:absolute;
	  right:10px;
	  top:50%;
	  transform:translateY(-50%);
	  border:none;
	  background:none;
	  font-size:16px;
	  cursor:pointer;
	  color:var(--muted);
	  display:none;
	}

	.clear-search:hover{
	  color:var(--text);
	}