:root { --primary:#285f58; --primary-dark:#19463f; --ink:#18302c; --muted:#6d817d; --surface:#fff; --bg:#f2f7f5; --line:#dce9e5; --accent:#e7f2ee; --danger:#b74d49; --shadow:0 18px 50px rgba(35,73,65,.10); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); } button,input,textarea,select { font:inherit; } button { cursor:pointer; }
.hidden { display:none !important; } .muted,.hint,.sidebar-caption { color:var(--muted); } .eyebrow { color:var(--primary); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:0 0 .45rem; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:radial-gradient(circle at top right,#e2f2ec,transparent 43%),var(--bg); }
.login-card { width:min(430px,100%); padding:2.5rem; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--shadow); } .brand-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--primary); color:#fff; font-size:1.45rem; font-weight:800; margin-bottom:1.5rem; } .brand-mark.small { width:34px;height:34px;border-radius:10px;font-size:1.1rem;margin:0; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:.55rem; font-size:clamp(1.7rem,4vw,2.2rem); line-height:1.1; } h2 { margin:0; font-size:1.65rem; } h3 { margin-bottom:.35rem; } .stack { display:grid; gap:1rem; margin-top:1.6rem; } label { display:grid; gap:.42rem; font-weight:650; font-size:.88rem; } input,textarea,select { width:100%; border:1px solid var(--line); border-radius:10px; padding:.72rem .8rem; background:#fbfdfc; color:var(--ink); outline:none; } input:focus,textarea:focus,select:focus { border-color:var(--primary); box-shadow:0 0 0 3px #d7ebe5; } textarea { min-height:90px; resize:vertical; }
.primary,.ghost,.danger { border:0; border-radius:10px; padding:.7rem 1rem; font-weight:750; } .primary { background:var(--primary); color:#fff; } .primary:hover { background:var(--primary-dark); } .ghost { background:var(--accent); color:var(--primary-dark); } .danger { background:#fdeceb;color:var(--danger); } .wide { width:100%; } .error { color:var(--danger); min-height:1.2rem; margin:0; font-size:.85rem; } .hint { font-size:.77rem; margin:1.4rem 0 0; line-height:1.5; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:240px 1fr; } .sidebar { display:flex; flex-direction:column; padding:1.4rem 1rem; background:#173d37; color:#e6f5f0; } .sidebar-brand { display:flex; align-items:center; gap:.65rem; font-size:1.15rem; font-weight:800; } .sidebar-caption { margin: .6rem .65rem 2rem; color:#9fc2b8; font-size:.76rem; } nav { display:grid; gap:.35rem; } .nav-link { border:0; text-align:left; display:flex; align-items:center; gap:.7rem; padding:.75rem .8rem; border-radius:10px; color:#b5d3ca; background:transparent; font-weight:650; } .nav-link:hover,.nav-link.active { background:#2a6259; color:#fff; } .sidebar-bottom { margin-top:auto; border-top:1px solid #2b5b53; padding-top:1rem; }
.content { min-width:0; } .topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:2rem clamp(1.2rem,5vw,4rem) 1rem; } .user-chip { display:flex; align-items:center; gap:.65rem; } .user-chip>span { width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--primary);font-weight:800; } .user-chip strong,.user-chip small { display:block; } .user-chip small { color:var(--muted); font-size:.73rem; margin-top:.15rem; }
.view { padding:1rem clamp(1.2rem,5vw,4rem) 3rem; } .hero { padding:1.5rem; background:linear-gradient(135deg,#dff0e9,#f8fbfa); border:1px solid var(--line); border-radius:18px; margin-bottom:1rem; } .hero p { color:#50736b; margin-bottom:0; } .cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1rem 0; } .card,.panel { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.2rem; box-shadow:0 4px 18px rgba(35,73,65,.04); } .stat-label { color:var(--muted); font-size:.8rem; } .stat-value { font-size:1.9rem; font-weight:800; margin-top:.35rem; } .panel-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; } .panel-head h3 { margin:0; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; font-size:.86rem; } th,td { padding:.75rem .65rem; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; } th { color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; } .badge { display:inline-flex; padding:.25rem .5rem; border-radius:99px; background:var(--accent); color:var(--primary-dark); font-size:.72rem; font-weight:750; } .badge.rejected { background:#fdeceb;color:var(--danger); } .badge.submitted { background:#fff2d8;color:#8e641d; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } .form-grid .full { grid-column:1/-1; } .actions { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end; margin-top:1rem; } .result { margin-top:1rem; padding:1rem; border-radius:12px; background:var(--accent); } .result strong { font-size:1.55rem; color:var(--primary-dark); } .empty { padding:1.5rem; text-align:center; color:var(--muted); }
.toast { position:fixed; z-index:5; right:1rem; bottom:1rem; max-width:340px; padding:.8rem 1rem; border-radius:10px; background:#173d37;color:#fff; opacity:0; transform:translateY(10px); transition:.2s; pointer-events:none; } .toast.show { opacity:1;transform:none; }
@media (max-width:800px) { .app-shell { display:block; } .sidebar { position:sticky; top:0; z-index:2; padding:.75rem; } .sidebar-caption,.sidebar-brand span:last-child { display:none; } .sidebar-brand { display:inline-flex; } nav { display:flex; overflow:auto; } .nav-link { white-space:nowrap; } .sidebar-bottom { position:absolute;right:.65rem;top:.65rem;border:0;padding:0; } .sidebar-bottom span { display:none; } .topbar { padding-top:1.4rem; } .cards { grid-template-columns:1fr; } .form-grid { grid-template-columns:1fr; } .form-grid .full { grid-column:auto; } }