:root {
    --bg: #071426;
    --bg-soft: #0d1e35;
    --panel: rgba(10, 24, 44, 0.82);
    --panel-strong: rgba(14, 33, 58, 0.95);
    --line: rgba(114, 178, 255, 0.16);
    --text: #e8f2ff;
    --muted: #94aed0;
    --primary: #4eb3ff;
    --primary-strong: #1280ff;
    --success: #2dcf87;
    --warning: #ffb84d;
    --danger: #ff6d7a;
    --shadow: 0 22px 70px rgba(0, 0, 0, 0.36);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, Segoe UI, Arial, sans-serif; color: var(--text); background: radial-gradient(circle at top left, #123968 0%, var(--bg) 42%, #050c17 100%); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.auth-body, .dashboard-body { min-height: 100vh; }
.auth-body::before, .dashboard-body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(74, 143, 255, 0.24), transparent 25%),
        radial-gradient(circle at 85% 15%, rgba(69, 207, 255, 0.22), transparent 20%),
        linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    pointer-events: none;
}

.panel-like, .login-brand-panel, .login-card {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: linear-gradient(180deg, rgba(13, 30, 53, 0.9), rgba(8, 20, 36, 0.78));
}

.login-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.2fr 0.85fr;
    gap: 40px;
    align-items: center;
    padding: 48px;
}
.login-brand-panel { border-radius: 34px; padding: 42px; }
.brand-mark-wrap { width: 260px; margin-bottom: 24px; }
.brand-mark, .sidebar-logo { filter: drop-shadow(0 15px 25px rgba(45, 140, 255, 0.32)); }
.eyebrow, .badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    color: #8bc7ff;
}
.brand-copy h1, .login-header h2, .workspace-topbar h1, .hero-strip h2, .section-head h3 { margin: 10px 0 12px; line-height: 1.08; }
.brand-copy h1 { font-size: 52px; }
.brand-copy p, .login-header p, .workspace-topbar p, .hero-strip p, .stat-card p, .feature-card span, .mini-card span, .timeline-item p, .sidebar-meta p, .clean-list li { color: var(--muted); font-size: 15px; line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.feature-card, .stat-card, .mini-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(130, 185, 255, 0.11); border-radius: var(--radius-lg); padding: 20px; }
.feature-card strong, .mini-card strong { display: block; margin-bottom: 10px; font-size: 18px; }
.login-card { border-radius: 30px; padding: 34px; width: min(100%, 520px); justify-self: end; }
.login-form { display: grid; gap: 18px; margin-top: 26px; }
.login-form label { display: grid; gap: 10px; }
.login-form span { font-size: 14px; color: #cce4ff; }
input {
    width: 100%;
    border: 1px solid rgba(135, 183, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border-radius: 16px;
    padding: 16px 18px;
    outline: none;
    font-size: 15px;
}
input:focus { border-color: rgba(99, 177, 255, 0.62); box-shadow: 0 0 0 4px rgba(33, 114, 255, 0.15); }
.btn { border: 0; border-radius: 16px; padding: 15px 20px; font-size: 15px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { background: linear-gradient(180deg, var(--primary), var(--primary-strong)); color: white; box-shadow: 0 14px 30px rgba(18, 128, 255, 0.35); }
.btn-ghost { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid rgba(130, 185, 255, 0.18); }
.btn-full { width: 100%; }
.alert { border-radius: 16px; padding: 14px 16px; font-size: 14px; margin-top: 18px; }
.alert-error { background: rgba(255, 109, 122, 0.12); border: 1px solid rgba(255, 109, 122, 0.24); color: #ffc9cf; }
.alert-success { background: rgba(45, 207, 135, 0.12); border: 1px solid rgba(45, 207, 135, 0.24); color: #cbffe7; }
.login-footer-note { margin-top: 22px; color: #7f9abb; font-size: 13px; text-align: center; }

.workspace-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px;
}
.sidebar {
    border-radius: var(--radius-xl);
    padding: 22px;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 28px;
}
.sidebar-brand { display: flex; gap: 14px; align-items: center; }
.sidebar-logo { width: 78px; }
.sidebar-brand strong { display: block; font-size: 18px; }
.sidebar-nav { display: grid; gap: 10px; }
.nav-link {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(130, 185, 255, 0.08);
    background: rgba(255,255,255,0.02);
    color: #cde4ff;
    font-weight: 600;
}
.nav-link.is-active, .nav-link:hover { background: linear-gradient(180deg, rgba(78,179,255,0.22), rgba(18,128,255,0.15)); border-color: rgba(130, 185, 255, 0.24); }
.sidebar-meta { margin-top: auto; border-top: 1px solid rgba(130,185,255,0.1); padding-top: 18px; }
.sidebar-meta-label, .metric-label { color: #9db2ce; font-size: 12px; display: block; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.14em; }

.workspace-main { display: grid; gap: 22px; align-content: start; }
.workspace-topbar { border-radius: var(--radius-xl); padding: 26px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.hero-strip { border-radius: var(--radius-xl); padding: 28px; display: flex; justify-content: space-between; gap: 26px; align-items: center; }
.hero-copy { max-width: 780px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.compact-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card { border-radius: 22px; }
.metric-value { font-size: 44px; line-height: 1; display: block; margin-bottom: 12px; }
.content-grid { display: grid; gap: 18px; }
.content-grid.two-third { grid-template-columns: 1.1fr 1fr; }
.content-grid.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.content-grid.single { grid-template-columns: 1fr; }
.content-card { border-radius: var(--radius-xl); padding: 24px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.role-grid, .info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mini-card.left { text-align: left; }
.timeline-list, .table-list { display: grid; gap: 12px; }
.timeline-item, .table-row, .data-table-row {
    border: 1px solid rgba(130, 185, 255, 0.09);
    background: rgba(255,255,255,0.025);
    border-radius: 16px;
    padding: 14px 16px;
}
.timeline-item strong, .table-row strong, .data-table-row strong { display: block; margin-bottom: 4px; }
.timeline-item span, .table-row span, .data-table-row span, .table-row small { color: var(--muted); }
.table-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.table-row > div:last-child { text-align: right; display: grid; gap: 6px; justify-items: end; }
.pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.pill.open { background: rgba(255, 184, 77, 0.14); color: #ffd08a; }
.pill.in_progress { background: rgba(78, 179, 255, 0.14); color: #95d5ff; }
.pill.completed { background: rgba(45, 207, 135, 0.14); color: #9ff4cc; }
.pill.neutral, .count-badge { background: rgba(255,255,255,0.07); color: #dbeaff; }
.count-badge { padding: 8px 12px; border-radius: 999px; font-size: 13px; }
.data-table { display: grid; gap: 10px; }
.data-table-head, .data-table-row { display: grid; grid-template-columns: 1.1fr 1.2fr 0.8fr 0.9fr; gap: 14px; align-items: center; }
.data-table-head { padding: 0 10px 8px; color: #9db2ce; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
.data-table-row.five-cols, .document-head { grid-template-columns: 1.2fr 1fr 0.9fr 0.9fr 0.9fr; }
.clean-list { margin: 0; padding-left: 20px; }
.clean-list.spaced li { margin-bottom: 14px; }

@media (max-width: 1240px) {
    .workspace-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; min-height: auto; }
    .metric-grid, .content-grid.thirds, .content-grid.two-third, .role-grid, .info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
    .login-shell, .feature-grid { grid-template-columns: 1fr; }
    .login-card { justify-self: stretch; width: 100%; }
}

@media (max-width: 860px) {
    .workspace-topbar, .hero-strip, .table-row { flex-direction: column; align-items: flex-start; }
    .table-row > div:last-child { text-align: left; justify-items: start; }
    .metric-grid, .compact-metrics { grid-template-columns: 1fr; }
    .data-table-head, .data-table-row, .data-table-row.five-cols, .document-head { grid-template-columns: 1fr; }
    .data-table-head { display: none; }
}

@media (max-width: 720px) {
    .login-shell, .workspace-shell { padding: 18px; }
    .brand-copy h1 { font-size: 38px; }
    .brand-mark-wrap { width: 180px; }
}


.form-grid { display: grid; gap: 18px; }
.form-grid.two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-card { display: grid; gap: 18px; }
.form-card label { display: grid; gap: 10px; }
.form-card label span { font-size: 14px; color: #cce4ff; }
textarea, select {
    width: 100%;
    border: 1px solid rgba(135, 183, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border-radius: 16px;
    padding: 16px 18px;
    outline: none;
    font-size: 15px;
}
textarea:focus, select:focus { border-color: rgba(99, 177, 255, 0.62); box-shadow: 0 0 0 4px rgba(33, 114, 255, 0.15); }
textarea { min-height: 110px; resize: vertical; }
.helper-text { color: var(--muted); font-size: 13px; margin-top: -6px; }
.pill.planned { background: rgba(156, 115, 255, 0.14); color: #d5c0ff; }
.pill.active { background: rgba(78, 179, 255, 0.14); color: #95d5ff; }
.pill.archived { background: rgba(255,255,255,0.09); color: #d7e8ff; }
.key-value-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.key-value-card { padding: 18px; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(130, 185, 255, 0.11); }
.key-value-card strong { display:block; margin-bottom:6px; }
.empty-state { border: 1px dashed rgba(130, 185, 255, 0.18); border-radius: 18px; padding: 22px; color: var(--muted); }
@media (max-width: 860px) {
    .form-grid.two-cols, .form-grid.three-cols, .key-value-grid { grid-template-columns: 1fr; }
}


.day-table { display:grid; gap:10px; }
.day-table-head, .day-table-row { display:grid; grid-template-columns: 0.9fr 0.8fr 1fr 0.8fr 1.2fr; gap:14px; align-items:center; }
.day-table-head { padding: 0 10px 8px; color:#9db2ce; font-size:12px; text-transform:uppercase; letter-spacing:0.12em; }
.day-table-row { border:1px solid rgba(130,185,255,0.09); background:rgba(255,255,255,0.025); border-radius:16px; padding:14px 16px; }
.delta-note { font-size: 13px; margin: 0; }
.delta-positive { color: #8ef0bf !important; }
.delta-negative { color: #ff9aa4 !important; }
.table-row-stack small { display:block; margin-top:6px; }
.compact-card { min-height: 100%; }
@media (max-width: 860px) {
    .day-table-head, .day-table-row { grid-template-columns: 1fr; }
    .day-table-head { display:none; }
}


.users-table-head, .users-table-row { grid-template-columns: 1.05fr 1.25fr 0.8fr 0.9fr 0.8fr; }
.btn-small { padding: 10px 14px; border-radius: 12px; font-size: 13px; }
.btn-danger { background: rgba(255, 109, 122, 0.16); color: #ffd2d7; border: 1px solid rgba(255, 109, 122, 0.28); }
.section-block { margin-top: 18px; }
.danger-zone { border: 1px solid rgba(255, 109, 122, 0.2); background: rgba(255, 109, 122, 0.07); border-radius: 18px; padding: 18px; }
.danger-zone p { color: var(--muted); }