:root{
  --bg0:#05060b;
  --bg1:#070b14;
  --panel:rgba(15,23,42,.72);
  --panel2:rgba(2,6,23,.62);
  --card:rgba(15,23,42,.74);
  --line:rgba(148,163,184,.14);
  --line2:rgba(148,163,184,.22);
  --text:#e7edf6;
  --muted:#96a3b5;
  --brand:#38bdf8;
  --brand2:#2563eb;
  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --shadow:0 16px 60px rgba(0,0,0,.42);
  --shadow2:0 10px 30px rgba(0,0,0,.28);
  --r12:12px;
  --r16:16px;
  --r20:20px;
  --blur: blur(14px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:radial-gradient(1200px 700px at 18% -10%, rgba(56,189,248,.18), transparent 55%),
                 radial-gradient(900px 500px at 85% 0%, rgba(37,99,235,.14), transparent 55%),
                 linear-gradient(180deg,var(--bg1),var(--bg0));
     color:var(--text)!important;
     font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
     -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Root */
.md-root{min-height:100vh}
.md-app{min-height:100vh}
#md-app{min-height:100vh}

/* Toast */
.md-toast{position:fixed; left:18px; bottom:18px; z-index:999;
  display:flex; align-items:center; gap:10px;
  background:rgba(2,6,23,.86); border:1px solid var(--line2);
  padding:12px 14px; border-radius:999px; box-shadow:var(--shadow2);
  backdrop-filter: var(--blur);
  transform:translateY(14px); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.md-toast.show{opacity:1; transform:translateY(0); pointer-events:auto}
.md-toast .dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--brand2),var(--brand));box-shadow:0 0 18px rgba(56,189,248,.35)}
.md-toast .msg{font-size:13px; color:rgba(231,237,246,.92); font-weight:700; letter-spacing:.2px}

/* App shell */
.md-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 310px 1fr;
}

.md-sidebar{
  position:sticky; top:0; height:100vh;
  padding:16px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(2,6,23,.72), rgba(2,6,23,.52));
  backdrop-filter: var(--blur);
  overflow:auto;
}
.md-brand{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius:18px;
  background:rgba(15,23,42,.42);
  border:1px solid rgba(148,163,184,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.md-brand img{height:30px; width:auto}
.md-brand .n{display:flex; flex-direction:column; gap:2px}
.md-brand .n .t{font-weight:950; letter-spacing:.2px}
.md-brand .n .s{font-size:12px; color:var(--muted)}

.md-side-section{margin-top:14px}
.md-side-title{display:flex; align-items:center; justify-content:space-between; margin:0 0 8px 0;
  padding:0 6px; font-size:12px; color:rgba(150,163,181,.92); text-transform:uppercase; letter-spacing:.14em; font-weight:850;
}
.md-side-nav{display:flex; flex-direction:column; gap:6px}

.md-navbtn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.42);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.md-navbtn:hover{border-color:rgba(56,189,248,.28); box-shadow:0 12px 30px rgba(0,0,0,.24)}
.md-navbtn:active{transform:translateY(1px)}
.md-navbtn .l{display:flex; align-items:center; gap:10px; font-weight:850}
.md-navbtn .ic{width:28px; height:28px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.58); border:1px solid rgba(148,163,184,.14);
}
.md-navbtn.active{background:linear-gradient(135deg, rgba(37,99,235,.20), rgba(56,189,248,.12)); border-color:rgba(56,189,248,.32)}
.md-pill{display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:22px; padding:0 8px;
  border-radius:999px; border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.52);
  color:rgba(231,237,246,.88);
  font-size:12px; font-weight:900;
}

.md-spacechip{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.35);
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.md-spacechip:hover{border-color:rgba(56,189,248,.24); box-shadow:0 12px 30px rgba(0,0,0,.22)}
.md-spacechip .nm{font-weight:900; letter-spacing:.1px}
.md-spacechip .sub{font-size:12px; color:var(--muted)}

.md-side-actions{display:flex; gap:8px; margin-top:10px}

/* Main */
.md-main{min-width:0}
.md-topbar{
  position:sticky; top:0; z-index:50;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(2,6,23,.72), rgba(2,6,23,.52));
  backdrop-filter: var(--blur);
}
.md-topgrid{display:grid; grid-template-columns: 1fr minmax(240px, 520px) auto; align-items:center; gap:12px}
.md-crumbs{display:flex; flex-direction:column; gap:2px}
.md-crumbs .k{font-size:12px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-weight:900}
.md-crumbs .v{font-size:14px; font-weight:950; letter-spacing:.15px}

.md-search{position:relative}
.md-search input{
  width:100%;
  padding:11px 12px 11px 42px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.48);
  color:var(--text);
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.md-search input:focus{border-color:rgba(56,189,248,.34); box-shadow:0 0 0 4px rgba(56,189,248,.10)}
.md-search .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); opacity:.85}

.md-actions{display:flex; gap:8px; align-items:center; justify-content:flex-end}

.md-btn{
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.48);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:950;
  letter-spacing:.1px;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.md-btn:hover{border-color:rgba(56,189,248,.26); box-shadow:0 10px 26px rgba(0,0,0,.22)}
.md-btn:active{transform:translateY(1px)}
.md-btn.primary{background:linear-gradient(135deg, rgba(37,99,235,.22), rgba(56,189,248,.12)); border-color:rgba(56,189,248,.30)}
.md-btn.ghost{background:rgba(2,6,23,.25)}
.md-btn.danger{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.30)}
.md-iconbtn{width:42px;height:42px;padding:0; display:inline-flex; align-items:center; justify-content:center}

.md-content{padding:18px; max-width:1600px; margin:0 auto}

/* Cards */
.md-cards{display:grid; grid-template-columns:repeat(12,1fr); gap:12px}
.md-card{
  grid-column:span 12;
  background:var(--card);
  border:1px solid rgba(148,163,184,.14);
  border-radius:var(--r20);
  padding:14px;
  box-shadow:var(--shadow2);
  backdrop-filter: var(--blur);
  transform:translateY(0);
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.md-card.hover:hover{transform:translateY(-1px); border-color:rgba(56,189,248,.22); box-shadow:var(--shadow)}
.md-card .hd{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.md-card .hd h3{margin:0; font-size:14px; font-weight:950; letter-spacing:.1px}
.md-muted{color:var(--muted); font-size:13px}

.md-kpis{display:grid; grid-template-columns:repeat(12,1fr); gap:12px}
.md-kpi{grid-column:span 6; padding:12px 12px; border-radius:18px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(2,6,23,.52);
}
.md-kpi .v{font-size:22px; font-weight:1000}
.md-kpi .l{font-size:12px; color:var(--muted); font-weight:850; letter-spacing:.12em; text-transform:uppercase}

.md-split{display:grid; grid-template-columns: 1fr 360px; gap:12px}
.md-split .md-card{height:100%}

/* Projects grid */
.md-project-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:12px}
.md-project{grid-column:span 4; padding:14px; border-radius:22px; position:relative; overflow:hidden}
.md-project:before{content:''; position:absolute; inset:-40px; background:radial-gradient(500px 220px at 20% 20%, rgba(56,189,248,.18), transparent 55%),
                                  radial-gradient(420px 180px at 80% 10%, rgba(37,99,235,.14), transparent 55%);
  pointer-events:none;
}
.md-project .pname{position:relative; font-weight:1000; letter-spacing:.2px}
.md-project .pmeta{position:relative; display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.md-project .prow{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px}
.md-progress{position:relative; height:10px; background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.16); border-radius:999px; overflow:hidden}
.md-progress .bar{height:100%; width:0%; background:linear-gradient(90deg,var(--brand2),var(--brand)); transition:width .28s ease}
.md-progress .txt{margin-top:8px; font-size:12px; color:var(--muted)}

/* Board */
.md-board{display:grid; grid-template-columns:repeat(5, minmax(270px, 1fr)); gap:12px; overflow:auto; padding-bottom:10px}
.md-col{
  border-radius:24px;
  background:rgba(2,6,23,.46);
  border:1px solid rgba(148,163,184,.14);
  box-shadow:var(--shadow2);
  display:flex; flex-direction:column;
  min-height:540px;
}
.md-col .h{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px;
  border-bottom:1px solid rgba(148,163,184,.12);
  font-weight:1000; letter-spacing:.1px;
}
.md-col .b{padding:12px; display:flex; flex-direction:column; gap:10px}

.md-task{
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.42);
  padding:12px;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.20);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.md-task:hover{border-color:rgba(56,189,248,.22); background:rgba(15,23,42,.52)}
.md-task:active{transform:translateY(1px)}
.md-task .t{font-weight:1000; font-size:13px; letter-spacing:.12px}
.md-task .m{margin-top:8px; display:flex; flex-wrap:wrap; gap:6px}
.md-tag{font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 8px; border-radius:999px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(2,6,23,.50);
  color:rgba(231,237,246,.86);
}
.md-badge{font-size:11px; font-weight:1000; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 8px; border-radius:999px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(2,6,23,.30);
}
.md-badge.low{border-color:rgba(56,189,248,.26)}
.md-badge.normal{border-color:rgba(148,163,184,.18); color:rgba(231,237,246,.82)}
.md-badge.high{border-color:rgba(245,158,11,.26); color:rgba(245,158,11,.95)}

/* Table list */
.md-table{width:100%; border-collapse:collapse}
.md-table th,.md-table td{padding:10px 10px; border-bottom:1px solid rgba(148,163,184,.12); text-align:left; font-size:13px}
.md-table th{color:rgba(150,163,181,.92); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.md-table tr:hover td{background:rgba(2,6,23,.22)}
.md-tr-title{font-weight:950; cursor:pointer}

/* Inputs */
.md-input, .md-textarea{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(2,6,23,.38);
  color:var(--text);
  outline:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.md-input:focus,.md-textarea:focus{border-color:rgba(56,189,248,.34); box-shadow:0 0 0 4px rgba(56,189,248,.10)}
.md-textarea{min-height:110px; resize:vertical}
.md-label{font-size:12px; color:rgba(150,163,181,.92); letter-spacing:.12em; text-transform:uppercase; font-weight:900; margin:12px 0 6px}
.md-row{display:flex; gap:10px; flex-wrap:wrap}
.md-row > *{flex:1; min-width:170px}

/* Dropdown (custom) */
.md-dd{position:relative}
.md-dd > button{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.md-ddmenu{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 8px);
  background:rgba(2,6,23,.92);
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  box-shadow:var(--shadow);
  backdrop-filter: var(--blur);
  padding:6px;
  z-index:9999;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
}
.md-ddmenu.show{opacity:1; transform:translateY(0); pointer-events:auto}
.md-dditem{width:100%; padding:10px 10px; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--text); cursor:pointer; font-weight:900; text-align:left}
.md-dditem:hover{background:rgba(15,23,42,.55); border-color:rgba(56,189,248,.18)}

/* Drawer */
.md-overlay{position:fixed; inset:0; background:rgba(2,6,23,.68); backdrop-filter: blur(4px);
  opacity:0; pointer-events:none; transition:opacity .16s ease; z-index:80}
.md-overlay.show{opacity:1; pointer-events:auto}
.md-drawer{
  position:fixed; top:0; right:0;
  height:100vh; width:min(560px, 100%);
  background:rgba(2,6,23,.92);
  border-left:1px solid rgba(148,163,184,.16);
  box-shadow:var(--shadow);
  transform:translateX(104%);
  transition:transform .18s ease;
  z-index:90;
  padding:14px;
  overflow:auto;
}
.md-drawer.open{transform:translateX(0)}
.md-drawer .x{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.md-drawer h2{margin:0; font-size:16px; font-weight:1000; letter-spacing:.1px}
.md-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0}
.md-tab{padding:8px 10px; border-radius:999px; border:1px solid rgba(148,163,184,.14); background:rgba(15,23,42,.35); font-weight:950; cursor:pointer}
.md-tab.active{border-color:rgba(56,189,248,.30); background:linear-gradient(135deg, rgba(37,99,235,.18), rgba(56,189,248,.10))}

.md-attach{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.32); text-decoration:none; color:var(--text)}
.md-attach:hover{border-color:rgba(56,189,248,.22)}
.md-comment{padding:10px 0; border-top:1px solid rgba(148,163,184,.10)}
.md-comment .a{font-weight:1000; font-size:12px}
.md-comment .b{color:rgba(231,237,246,.88); font-size:13px; line-height:1.55; margin-top:4px}

/* Auth */
.md-auth{
  width:min(440px, calc(100% - 28px));
  margin:42px auto;
  background:rgba(15,23,42,.55);
  border:1px solid rgba(148,163,184,.14);
  border-radius:26px;
  padding:18px;
  box-shadow:var(--shadow);
  backdrop-filter: var(--blur);
}
.md-auth .head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.md-auth img{height:32px; width:auto}
.md-auth h1{margin:0; font-size:16px; font-weight:1000}
.md-auth p{margin:10px 0; color:var(--muted); font-size:13px}
.md-link{color:var(--brand); text-decoration:none; font-weight:1000}

/* Motion */
@keyframes mdFadeIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
.md-anim-in{animation:mdFadeIn .28s ease both}

/* Responsive */
@media (max-width: 1020px){
  .md-shell{grid-template-columns: 1fr}
  .md-sidebar{position:fixed; left:0; top:0; bottom:0; height:auto; width:min(340px, 92%);
    transform:translateX(-104%); transition:transform .18s ease; z-index:100}
  .md-sidebar.show{transform:translateX(0)}
  .md-topgrid{grid-template-columns: 1fr 1fr auto}
}

@media (max-width: 780px){
  .md-topgrid{grid-template-columns: 1fr auto; gap:10px}
  .md-search{grid-column: 1 / -1}
  .md-project{grid-column:span 12}
  .md-board{grid-template-columns:repeat(5, minmax(260px, 1fr))}
  .md-kpi{grid-column:span 12}
  .md-split{grid-template-columns:1fr}
}

/* Scrollbar */
.md-sidebar::-webkit-scrollbar, .md-drawer::-webkit-scrollbar, .md-content::-webkit-scrollbar{width:10px;height:10px}
.md-sidebar::-webkit-scrollbar-thumb, .md-drawer::-webkit-scrollbar-thumb, .md-content::-webkit-scrollbar-thumb{background:rgba(148,163,184,.18); border-radius:10px}
.md-sidebar::-webkit-scrollbar-track, .md-drawer::-webkit-scrollbar-track, .md-content::-webkit-scrollbar-track{background:rgba(2,6,23,.18)}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}