:root { --navy:#061f45; --navy-2:#0b3066; --red:#ff1b26; --ink:#142440; --muted:#66748b; --line:#dfe6ef; --paper:#f5f7fb; --white:#fff; --green:#198754; --amber:#bf7d00; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; } button,input,select { font:inherit; } button { cursor:pointer; }
.login { min-height:100vh; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 80% 10%,#173b70 0,transparent 32%),var(--navy); }
.login-card { width:min(100%,430px); background:var(--white); padding:34px; border-radius:18px; box-shadow:0 22px 70px rgba(0,0,0,.26); }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.055em; color:var(--navy); } .brand strong { font-size:1.38rem; } .brand strong span { font-weight:400; color:var(--red); }
.brand-logo { width:38px; height:38px; object-fit:cover; border-radius:50%; flex:none; }
.login h1 { font-size:1.7rem; margin:28px 0 8px; color:var(--navy); } .login p { color:var(--muted); line-height:1.5; margin:0 0 22px; }
.field { display:grid; gap:6px; margin:14px 0; font-size:.88rem; font-weight:650; color:var(--ink); } input,select { border:1px solid #becadb; border-radius:8px; background:var(--white); color:var(--ink); padding:10px 11px; min-width:0; } input:focus,select:focus { outline:3px solid #c8d8ee; border-color:var(--navy-2); }
.btn { border:0; border-radius:8px; padding:10px 14px; font-weight:700; } .btn-primary { background:var(--navy); color:#fff; } .btn-primary:hover { background:var(--navy-2); } .btn-danger { background:#fff0f1; color:#b81922; } .btn-secondary { background:#eaf0f8; color:var(--navy); } .btn-full { width:100%; margin-top:8px; } .hint { font-size:.78rem; color:var(--muted); margin-top:18px!important; }
.shell { min-height:100vh; } .sidebar { width:244px; background:var(--navy); color:#fff; padding:26px 16px; position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; } .sidebar .brand { color:#fff; padding:0 10px; } .sidebar .rocket { border-color:#fff; } .nav { display:grid; gap:5px; margin-top:42px; } .nav button { border:0; color:#c8d6ea; background:transparent; text-align:left; padding:11px 12px; border-radius:8px; font-weight:650; } .nav button:hover,.nav button.active { background:#173b70; color:#fff; } .sidebar-bottom { margin-top:auto; color:#c8d6ea; font-size:.82rem; padding:10px; } .sidebar-bottom b { display:block; color:#fff; margin-bottom:4px; }
.content { margin-left:244px; padding:30px; max-width:1680px; } .topbar { display:flex; justify-content:space-between; gap:16px; align-items:start; margin-bottom:28px; } .topbar h1 { color:var(--navy); font-size:1.65rem; margin:0 0 5px; } .topbar p { margin:0; color:var(--muted); } .actions { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:30px; } .metric { background:#fff; border-radius:12px; border:1px solid var(--line); padding:16px; border-left:4px solid var(--navy); } .metric.alert { border-left-color:var(--red); } .metric-label { text-transform:uppercase; font-size:.71rem; letter-spacing:.05em; color:var(--muted); font-weight:750; } .metric-value { font-size:1.85rem; font-weight:800; color:var(--navy); margin-top:6px; }
.section-head { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:11px; margin-bottom:14px; } .section-head h2 { margin:0; color:var(--navy); font-size:1.08rem; }
.pipeline-scroll { overflow-x:auto; padding-bottom:8px; } .board { display:grid; grid-template-columns:repeat(9,minmax(180px,1fr)); gap:12px; align-items:start; min-width:1720px; } .column { background:#ecf1f8; border-radius:11px; padding:10px; min-height:180px; } .column:first-child { background:#e7eef8; } .column-head { display:flex; justify-content:space-between; gap:8px; border-bottom:2px solid #c0cede; padding:3px 2px 10px; font-size:.84rem; font-weight:800; color:var(--navy); } .column-count { color:var(--muted); font-weight:650; } .tasks { display:grid; gap:9px; margin-top:10px; }
.task { background:#fff; border:1px solid #d8e1ed; border-radius:9px; padding:10px; box-shadow:0 1px 2px rgba(6,31,69,.06); } .task.done { opacity:.58; } .task.done .task-client { text-decoration:line-through; } .task-top,.task-bottom { display:flex; justify-content:space-between; align-items:center; gap:7px; } .task-client { color:var(--navy); font-weight:800; font-size:.87rem; } .task-description { color:var(--muted); font-size:.76rem; margin:4px 0 9px; line-height:1.3; } .task-meta { font-size:.72rem; color:var(--muted); } .late { color:#c22029; font-weight:750; } .check { accent-color:var(--red); width:16px; height:16px; } .move { border:0; background:transparent; color:var(--navy); padding:1px 3px; font-size:1.1rem; line-height:1; } .move:disabled { opacity:.25; cursor:default; }
.deliverables { display:grid; gap:5px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 0; } .deliverables label { display:flex; align-items:center; gap:6px; color:var(--ink); font-size:.74rem; font-weight:650; } .deliverables input { accent-color:var(--red); }
.presentation-link { display:grid; gap:5px; color:var(--muted); font-size:.72rem; font-weight:700; border-top:1px solid var(--line); padding-top:8px; } .presentation-link input { padding:7px; font-size:.73rem; }
.portfolio-item { background:#fff; padding:9px 10px; border-radius:8px; border:1px solid #d8e1ed; } .portfolio-item b { font-size:.82rem; color:var(--navy); display:block; } .portfolio-item span { color:var(--muted); font-size:.7rem; }
.table-wrap { overflow:auto; background:#fff; border:1px solid var(--line); border-radius:11px; } table { border-collapse:collapse; width:100%; min-width:720px; } th,td { padding:13px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:.88rem; } th { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:#f8fafc; } tr:last-child td { border-bottom:0; } .badge { display:inline-block; border-radius:99px; padding:4px 8px; background:#eaf0f8; color:var(--navy); font-size:.72rem; font-weight:700; } .empty { padding:34px 12px; text-align:center; color:var(--muted); }
.report-chart { background:#fff; border:1px solid var(--line); border-radius:12px; padding:24px; max-width:900px; } .report-row { display:grid; grid-template-columns:150px minmax(120px,1fr) 70px; align-items:center; gap:14px; margin:16px 0; } .report-label { color:var(--navy); font-size:.88rem; font-weight:750; } .report-track { height:18px; background:#eaf0f8; border-radius:99px; overflow:hidden; } .report-bar { height:100%; background:var(--navy); border-radius:99px; min-width:3px; } .report-row:first-of-type .report-bar { background:var(--red); } .report-value { color:var(--navy); font-size:.85rem; font-weight:750; text-align:right; } .report-note { color:var(--muted); margin:0 0 20px; font-size:.88rem; }
.modal-layer { position:fixed; inset:0; background:rgba(6,31,69,.48); display:grid; place-items:center; padding:20px; z-index:10; } .modal { width:min(100%,490px); background:#fff; border-radius:14px; padding:24px; box-shadow:0 20px 55px rgba(0,0,0,.25); } .modal h2 { font-size:1.2rem; margin:0 0 18px; color:var(--navy); } .modal-actions { display:flex; justify-content:end; gap:9px; margin-top:20px; }
.notice { background:#fff7e1; color:#735000; border:1px solid #eed89c; border-radius:8px; padding:10px 12px; font-size:.82rem; margin-bottom:16px; }
@media(max-width:1150px){.summary{grid-template-columns:repeat(2,1fr);}} @media(max-width:740px){.sidebar{position:static;width:auto;min-height:auto;padding:15px;}.nav{margin-top:18px;display:flex;overflow:auto;}.nav button{white-space:nowrap;}.sidebar-bottom{display:none;}.content{margin:0;padding:20px 15px;}.topbar{align-items:stretch;flex-direction:column;}.summary{grid-template-columns:1fr 1fr;}.actions .btn{flex:1;}.report-row{grid-template-columns:1fr;gap:6px;}.report-value{text-align:left;}} @media(max-width:400px){.summary{grid-template-columns:1fr;}.login-card{padding:25px;}}