:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --text: #18202d;
    --muted: #738094;
    --line: #e4e9f1;
    --accent: #ff7a1a;
    --accent-dark: #e76408;
    --green: #29a36a;
    --shadow: 0 24px 65px rgba(21, 35, 55, .10);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); }
button, input { font: inherit; }
a { color: inherit; }
.login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 12%, rgba(255,122,26,.13), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(66,96,255,.08), transparent 28%),
        #f5f7fb;
}
.login-shell { width: min(100% - 36px, 450px); margin: 0 auto; padding: 72px 0 34px; }
.login-brand, .topbar-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.login-brand { margin-bottom: 28px; }
.brand-mark { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(145deg, #ff8c31, #f26600); color: #fff; font-weight: 800; font-size: 22px; box-shadow: 0 12px 30px rgba(242,102,0,.25); }
.brand-mark.small { width: 36px; height: 36px; border-radius: 11px; font-size: 17px; }
.brand-name { font-weight: 800; font-size: 22px; letter-spacing: -.4px; }
.brand-subtitle { color: var(--muted); font-size: 13px; margin-top: 2px; }
.login-card { background: rgba(255,255,255,.96); border: 1px solid rgba(225,230,239,.9); border-radius: 24px; padding: 34px; box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; color: var(--accent-dark); font-size: 11px; font-weight: 800; }
h1 { font-size: 31px; letter-spacing: -.8px; margin: 9px 0 8px; }
.muted { color: var(--muted); line-height: 1.55; }
.login-card > .muted { margin: 0 0 28px; }
.login-form { display: grid; gap: 18px; }
.login-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; }
.login-form input { width: 100%; height: 50px; border: 1px solid #dce2eb; border-radius: 13px; padding: 0 14px; outline: none; background: #fbfcfe; transition: .2s ease; }
.login-form input:focus { background: #fff; border-color: rgba(255,122,26,.7); box-shadow: 0 0 0 4px rgba(255,122,26,.10); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 92px; }
.show-password { position: absolute; right: 7px; top: 7px; height: 36px; border: 0; border-radius: 9px; background: #eef2f7; color: #5d697a; padding: 0 11px; cursor: pointer; font-size: 12px; font-weight: 700; }
.primary-button { height: 52px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #ff8429, #ef6500); font-weight: 800; cursor: pointer; box-shadow: 0 12px 25px rgba(239,101,0,.22); transition: transform .15s ease, box-shadow .15s ease; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(239,101,0,.27); }
.primary-button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; transform: none; }
.alert { margin: 0 0 20px; padding: 12px 14px; border-radius: 11px; background: #fff0ef; color: #b43a31; border: 1px solid #ffd7d2; font-size: 13px; line-height: 1.45; }
.alert-warning { background: #fff8e9; color: #8b6315; border-color: #f5dfaa; }
.login-shell footer { text-align: center; color: #a1aab7; font-size: 12px; padding-top: 24px; }

.dashboard-page { min-height: 100vh; }
.topbar { height: 72px; background: rgba(255,255,255,.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1180px)/2)); position: sticky; top: 0; z-index: 10; }
.topbar-brand { font-weight: 800; font-size: 18px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.user-chip { padding: 8px 11px; border-radius: 10px; background: #f1f4f8; color: #637085; font-size: 12px; font-weight: 700; }
.ghost-button { border: 1px solid #dfe5ed; background: #fff; height: 36px; padding: 0 13px; border-radius: 10px; cursor: pointer; color: #536073; font-weight: 700; }
.dashboard-shell { width: min(100% - 48px, 1180px); margin: 0 auto; padding: 58px 0 80px; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.dashboard-heading h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 6px; }
.dashboard-heading p { margin: 0; }
.server-badge, .status-label { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.server-badge { background: #e9f8f0; color: #24794f; border: 1px solid #d3f0e1; border-radius: 999px; padding: 9px 13px; font-size: 12px; font-weight: 800; }
.status-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(41,163,106,.10); }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.project-card { min-height: 285px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(35,50,72,.05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.project-card:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(35,50,72,.09); border-color: #d8dee8; }
.project-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.project-icon { width: 48px; height: 48px; border-radius: 14px; background: #fff4eb; position: relative; }
.project-icon::before, .project-icon::after { content: ""; position: absolute; }
.icon-doc::before { left: 15px; top: 11px; width: 18px; height: 24px; border: 2px solid var(--accent); border-radius: 3px; }
.icon-doc::after { left: 19px; top: 19px; width: 10px; height: 2px; background: var(--accent); box-shadow: 0 5px 0 var(--accent), 0 10px 0 var(--accent); }
.icon-box::before { inset: 12px; border: 2px solid var(--accent); border-radius: 4px; transform: rotate(30deg); }
.icon-chart::before { left: 13px; bottom: 12px; width: 5px; height: 12px; background: var(--accent); border-radius: 2px; box-shadow: 8px -7px 0 var(--accent), 16px -15px 0 var(--accent); }
.status-label { color: #4d8e6c; font-size: 11px; font-weight: 800; }
.status-label .status-dot { width: 6px; height: 6px; box-shadow: none; }
.project-content { margin-top: 35px; }
.project-content h2 { font-size: 21px; margin: 0 0 9px; letter-spacing: -.4px; }
.project-content p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.project-link { margin-top: auto; display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: #2b3442; font-weight: 800; font-size: 13px; padding-top: 22px; border-top: 1px solid #edf0f5; }
.project-link span { color: var(--accent); font-size: 18px; }
@media (max-width: 860px) { .project-grid { grid-template-columns: 1fr; } .project-card { min-height: 240px; } }
@media (max-width: 600px) { .login-shell { padding-top: 38px; } .login-card { padding: 25px; border-radius: 19px; } .topbar { padding: 0 16px; } .user-chip { display: none; } .dashboard-shell { width: min(100% - 30px, 1180px); padding-top: 38px; } .dashboard-heading { align-items: flex-start; flex-direction: column; } }