:root {
  --bg: #070d16;
  --panel: #0b1524;
  --panel-2: #111d31;
  --card: #1b2737;
  --stroke: rgba(255,255,255,0.06);
  --text: #eef4ff;
  --muted: #93a5c4;
  --green: #59de9f;
  --coral: #ff9b92;
  --purple: #c0a6ff;
  --amber: #f4bc4b;
  --blue: #83b8ff;
  --danger: #f87171;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: radial-gradient(circle at top left, #0d1b2f 0%, var(--bg) 40%);
  color: var(--text);
}
.hidden { display: none !important; }
.app-shell { min-height: 100vh; }
.auth-view, .dashboard { padding: 24px; }
.auth-view {
  display: grid; place-items: center; min-height: 100vh;
}
.auth-card {
  width: min(100%, 460px);
  background: rgba(11, 21, 36, 0.92);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  padding: 28px;
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.4);
}
.badge {
  display: inline-flex; padding: 8px 12px; border-radius: 999px; background: #18263a; color: var(--muted); font-size: 12px; margin-bottom: 16px;
}
h1, h2, h3, p { margin-top: 0; }
.muted { color: var(--muted); }
.auth-form, .project-form { display: grid; gap: 16px; margin-top: 16px; }
label { display: grid; gap: 8px; }
label span { color: var(--muted); font-size: 14px; }
input, select, textarea {
  width: 100%;
  background: #0f1828;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit;
}
textarea { resize: vertical; }
.btn {
  border: 0; border-radius: 14px; padding: 14px 18px; font: inherit; font-weight: 600; cursor: pointer;
}
.btn.small { padding: 10px 14px; border-radius: 12px; }
.btn.primary { background: linear-gradient(135deg, #314b73, #24395a); color: #fff; }
.btn.secondary { background: #141f31; color: var(--text); border: 1px solid var(--stroke); }
.btn.danger { background: rgba(248,113,113,0.16); color: #ffb4b4; }
.auth-actions, .modal-actions { display: flex; gap: 12px; justify-content: flex-end; }
.message { min-height: 20px; color: var(--amber); margin: 0; }
.page-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px;
}
.page-header h1 { font-size: 46px; margin-bottom: 10px; }
.page-header p { color: var(--muted); font-size: 20px; margin-bottom: 0; }
.header-right { display: flex; align-items: center; gap: 12px; }
.year-pill { padding: 12px 16px; background: #192845; border-radius: 16px; color: #d8e6ff; font-weight: 600; }
.metrics-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px;
}
.metric-card, .panel {
  background: rgba(11, 21, 36, 0.92);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}
.metric-card { padding: 24px; min-height: 120px; }
.metric-label { color: var(--muted); margin-bottom: 16px; }
.metric-value { font-size: 52px; font-weight: 800; }
.metric-value.green { color: var(--green); }
.metric-value.coral { color: var(--coral); }
.metric-value.purple { color: var(--purple); }
.main-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) 380px; gap: 18px; }
.large-panel { padding: 18px; }
.side-panel { padding: 18px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.search-wrap { flex: 1 1 260px; }
.search-wrap input { background: #0a1422; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab-btn {
  background: transparent; color: var(--muted); border: 0; padding: 12px 14px; border-radius: 12px; cursor: pointer; font: inherit;
}
.tab-btn.active { background: #192845; color: white; }
.filters { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.filters select { min-width: 140px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 980px; }
th, td { text-align: left; padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
tr:hover td { background: rgba(255,255,255,0.015); }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase;
}
.status-dot { width: 8px; height: 8px; border-radius: 999px; }
.side-panel + .side-panel { margin-top: 18px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.legend-list, .mini-list { display: grid; gap: 12px; }
.legend-item, .mini-item {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 16px; background: #0d1828; border: 1px solid rgba(255,255,255,0.04);
}
.legend-left, .mini-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.legend-item strong, .mini-item strong { display: block; }
.legend-item span, .mini-item span { color: var(--muted); font-size: 13px; }
.modal {
  position: fixed; inset: 0; background: rgba(5,10,18,0.72); display: grid; place-items: center; padding: 20px; z-index: 20;
}
.modal-card {
  width: min(100%, 980px); max-height: 92vh; overflow: auto; background: #0b1524; border: 1px solid var(--stroke); border-radius: 24px; padding: 24px;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; }
.icon-btn { background: transparent; border: 0; color: var(--muted); font-size: 28px; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.empty { color: var(--muted); padding: 24px; text-align: center; }
.link-btn { background: transparent; color: var(--blue); border: 0; cursor: pointer; }
@media (max-width: 1100px) {
  .main-grid { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .side-panel + .side-panel { margin-top: 0; }
}
@media (max-width: 760px) {
  .page-header h1 { font-size: 34px; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sidebar { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .auth-actions, .modal-actions, .header-right { flex-wrap: wrap; }
}

/* V2: compact premium dashboard */
body { background:#080f1a; }
.dashboard { max-width:1920px; margin:auto; padding:22px 28px; }
.page-header { margin-bottom:22px; align-items:center; }
.page-header h1 {font-size:32px;letter-spacing:-1.1px;margin-bottom:5px;}
.page-header p {font-size:13px;}
.year-pill {font-size:12px; padding:10px 13px; border-radius:12px;}
.metrics-grid {gap:12px;margin-bottom:14px;}
.metric-card {min-height:112px;padding:19px 22px;background:#151f2e;border-radius:15px; box-shadow:none;}
.metric-label {font-size:12px;margin-bottom:10px;}
.metric-value {font-size:36px;letter-spacing:-1px;}
.metric-value.coral{color:#c0a6ff;}
.main-grid {grid-template-columns:minmax(0,1fr) 310px;gap:14px;}
.panel {border-radius:16px;box-shadow:none;background:#121b29;}
.large-panel{padding:13px;}
.toolbar{display:grid;grid-template-columns:minmax(190px,1fr) auto auto;gap:10px;margin-bottom:10px;align-items:center;}
.search-wrap{min-width:0;flex:none;}
.search-wrap input{height:39px;background:#0b1421;}
.filters{display:flex;flex-wrap:nowrap;gap:7px;margin-left:0;}
.filters select{min-width:115px;max-width:155px;height:39px;padding:7px 24px 7px 11px;font-size:12px;}
.filters .btn{white-space:nowrap;}
.tab-btn{padding:9px 10px;font-size:12px;white-space:nowrap;}
.tab-btn.active{background:#27364b;}
table{min-width:850px;}
th,td{padding:11px 10px;font-size:12px;}
th{background:#101926;white-space:nowrap;position:sticky;top:0;}
tbody tr:nth-child(even){background:rgba(255,255,255,.013)}
td strong{font-size:12px;}
.status-pill{font-size:10px;padding:6px 10px;white-space:nowrap;}
.side-panel{padding:15px;}
.panel-header h3{font-size:14px;margin:0;}
.legend-list,.mini-list{gap:7px;}
.legend-item,.mini-item{padding:10px 11px;border-radius:10px;}
.legend-item strong,.mini-item strong{font-size:12px;}
.legend-item span,.mini-item span{font-size:11px;}
.side-hint{font-size:10px;color:var(--muted);margin:12px 0 0;}
.overdue{color:#ff9b92}.urgent{color:#f4bc4b}
@media(max-width:1360px){.main-grid{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.side-panel+.side-panel{margin-top:0}}
@media(max-width:1050px){.toolbar{grid-template-columns:1fr}.filters{flex-wrap:wrap}.tabs{order:3}}
@media(max-width:650px){.dashboard{padding:16px}.metrics-grid{gap:8px}.metric-card{padding:13px;min-height:90px}.metric-value{font-size:28px}.page-header h1{font-size:26px}.sidebar{grid-template-columns:1fr}}

/* V3: operational clarity */
.toolbar {grid-template-columns:minmax(220px,1fr) auto auto;}
.filters select{min-width:116px;max-width:162px;}
.filters #sortFilter{max-width:175px;}
.table-meta{display:flex;justify-content:space-between;gap:12px;padding:2px 8px 12px;color:var(--muted);font-size:11px;}
.table-meta span:first-child{color:#d5e0f2;font-weight:600;white-space:nowrap;}
.table-message:not(:empty){margin:4px 8px 10px;font-size:12px;color:#a9c5e9;}
.inline-status{appearance:auto;cursor:pointer;min-width:112px;max-width:146px;width:auto;border:1px solid transparent;border-radius:100px;background:var(--status-bg);color:var(--status-color);font-weight:750;font-size:10px;padding:6px 9px;line-height:1.25;}
.inline-status:focus{outline:2px solid #81aeeb;outline-offset:2px;}
.inline-status option{background:#192437;color:#f4f7ff;font-size:13px;}
.inline-status:disabled{opacity:.55;cursor:progress;}
.deadline-overdue{border-color:rgba(248,113,113,.25);}
.deadline-overdue .deadline-date span{color:#ff9b92;}
.deadline-soon .deadline-date span{color:#f4bc4b;}
.deadline-date{min-width:92px;text-align:right;}
.deadline-date span{display:block;line-height:1.45;}
.table-wrap{max-height:calc(100vh - 340px);min-height:380px;}
.table-wrap thead th{z-index:2;}
@media(max-width:1500px){.toolbar{grid-template-columns:1fr auto}.tabs{order:3}.filters{justify-content:flex-end;}}
@media(max-width:1050px){.table-wrap{max-height:none}.table-meta span:last-child{display:none;}}

/* V4 — polish: narrow dark scrollbar, elegant selects, compact link actions */
html { scrollbar-color:#33465f #0b1421; scrollbar-width:thin; }
.table-wrap,.modal-card { scrollbar-width:thin; scrollbar-color:#344966 #0d1726; }
.table-wrap::-webkit-scrollbar,.modal-card::-webkit-scrollbar {width:9px;height:9px;}
.table-wrap::-webkit-scrollbar-track,.modal-card::-webkit-scrollbar-track {background:#0c1523;border-radius:12px;}
.table-wrap::-webkit-scrollbar-thumb,.modal-card::-webkit-scrollbar-thumb {background:#34465e;border:2px solid #0c1523;border-radius:20px;}
.table-wrap::-webkit-scrollbar-thumb:hover,.modal-card::-webkit-scrollbar-thumb:hover {background:#547097;}
.table-wrap {border-radius:12px;max-height:calc(100vh - 330px);min-height:390px;}
.table-wrap thead th {background:#101a29;}
.inline-status {appearance:none;min-width:109px;padding:7px 27px 7px 13px;background-color:var(--status-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23a3b9d4' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:background-color .16s,border-color .16s;}
.inline-status:hover {border-color:rgba(255,255,255,.17);filter:brightness(1.12);}
.inline-status option{background:#182335;color:#eff5ff;}
.sort-head {border:0;background:none;color:inherit;font:inherit;font-weight:650;cursor:pointer;padding:0;white-space:nowrap;display:inline-flex;gap:6px;align-items:center;}
.sort-head span {color:#607793;font-size:13px;}
.sort-head:hover,.sort-head.sorted {color:#dae9ff;}
.sort-head.sorted span{color:#82baff;}
.inline-date {font:inherit;color:#b9cae4;border:1px solid transparent;background:transparent;border-radius:8px;padding:6px 2px;max-width:132px;min-width:120px;cursor:pointer;font-size:11px;}
.inline-date:hover,.inline-date:focus {border-color:#34445b;background:#1a2739;outline:none;}
.inline-date::-webkit-calendar-picker-indicator {filter:invert(.65) sepia(.15) saturate(1.4);cursor:pointer;opacity:.7;}
.inline-date:disabled {opacity:.5;}
.project-name {font-weight:700;font-size:12px;white-space:nowrap;}
.project-name-link {color:#e4edfb;text-decoration:none;border-bottom:1px dashed transparent;}
.project-name-link:hover {color:#8dbfff;border-bottom-color:#8dbfff;}
.row-actions {display:flex;align-items:center;gap:6px;white-space:nowrap;}
.copy-url,.open-url {color:#a4cafa;border:1px solid rgba(126,169,225,.18);background:#1a2b42;border-radius:9px;padding:6px 9px;font:inherit;font-weight:650;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:29px;}
.copy-url:hover,.open-url:hover {background:#274261;color:white;border-color:rgba(140,187,243,.4);}
.open-url {font-size:16px;min-width:30px;padding:4px 8px;}
.no-url {font-size:10px;color:#5d708b;font-style:italic;}
.link-btn {padding:5px 7px;font-size:11px;}
.actions-head {min-width:195px;}
.field-hint {font-size:11px;color:#92a6c3;}
.sidebar .mini-list{max-height:280px;overflow:auto;scrollbar-width:thin;scrollbar-color:#30445e transparent;}
.sidebar .mini-item {padding:9px 10px;}
.sidebar .deadline-date {min-width:78px;}
@media(max-width:1200px){.row-actions .copy-url span{display:none}.actions-head{min-width:120px}}