:root { --ink:#17203a; --muted:#65708a; --brand:#4f46e5; --brand-soft:#eef0ff; --line:#e8eaf2; --paper:#fff; --bg:#f7f8fc; --good:#137a59; --warn:#bd6b00; }
* { box-sizing:border-box; } body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
button,input,select,textarea { font:inherit; } button { cursor:pointer; border:0; } .shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }
.side { padding:28px 18px; background:#182148; color:#eef0ff; display:flex; flex-direction:column; gap:26px; } .brand { display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px; } .mark { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:#6d66ef; color:#fff; } .side small { color:#aeb5d1; }
.nav { display:grid; gap:7px; } .nav button { color:#c8cee7; background:transparent; padding:12px; text-align:left; border-radius:9px; } .nav button.active,.nav button:hover { color:#fff; background:#313c70; } .user-box { margin-top:auto; padding:13px; border:1px solid #35416f; border-radius:12px; } .user-box strong,.user-box small { display:block; }
.content { max-width:1180px; width:100%; margin:0 auto; padding:34px 38px 55px; } .top { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; gap:16px; } h1 { margin:0; font-size:28px; letter-spacing:-.8px; } h2 { margin:0 0 5px; font-size:20px; } .muted { color:var(--muted); margin:4px 0 0; } .role { border-radius:999px; background:var(--brand-soft); color:#4138c6; padding:7px 11px; font-size:13px; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:20px 0; } .card { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 8px 20px rgba(32,45,90,.035); } .metric { font-size:28px; font-weight:800; margin-top:9px; } .label { color:var(--muted); font-size:14px; } .accent { color:var(--brand); }
.section { background:#fff; border:1px solid var(--line); border-radius:16px; padding:21px; margin-top:18px; } .section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; } .btn { background:var(--brand); color:white; padding:10px 14px; border-radius:9px; font-weight:700; } .btn:hover { background:#4138c6; } .btn.soft { background:var(--brand-soft); color:#423aca; } .btn.outline { background:white; border:1px solid #cfd4e7; color:#313b5c; } .btn.danger { background:#fff0ef; color:#bd3429; }
.list { display:grid; gap:10px; } .row { display:flex; align-items:center; gap:13px; padding:14px; border:1px solid var(--line); border-radius:11px; } .row:hover { border-color:#c6caf7; } .grow { flex:1; min-width:0; } .row-title { margin:0; font-weight:700; } .row-sub { margin:3px 0 0; color:var(--muted); font-size:13px; } .avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#e8eaff; color:#4940cf; font-weight:800; } .badge { padding:5px 9px; border-radius:999px; font-size:12px; font-weight:700; background:#fff4df; color:var(--warn); } .badge.done { background:#e6f7ef; color:var(--good); }
.form { display:grid; gap:14px; max-width:650px; } label { display:grid; gap:7px; font-weight:650; font-size:14px; } input,select,textarea { width:100%; border:1px solid #cfd4e7; border-radius:9px; padding:11px 12px; color:var(--ink); background:#fff; } textarea { min-height:116px; resize:vertical; } .upload { border:2px dashed #b9c0eb; background:#f9f9ff; padding:28px; text-align:center; border-radius:13px; } .upload input { max-width:280px; margin-top:10px; } .preview { max-width:100%; max-height:300px; border-radius:10px; margin-top:12px; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; min-width:660px; } th { color:var(--muted); font-size:12px; text-align:left; text-transform:uppercase; letter-spacing:.04em; } th,td { padding:13px 9px; border-bottom:1px solid var(--line); } td { font-size:14px; } .empty { text-align:center; padding:26px; color:var(--muted); } .notice { padding:13px; background:#eff9f5; color:#146849; border-radius:10px; margin-bottom:15px; font-size:14px; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#eef0ff,#f9f7ff); } .login-card { width:min(480px,100%); background:#fff; padding:34px; border:1px solid #e1e4f0; border-radius:22px; box-shadow:0 24px 65px rgba(38,46,111,.12); } .login-card h1 { margin-top:18px; } .login-roles { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:22px; } .login-roles button { padding:13px 8px; border:1px solid #d9ddec; background:#fff; color:#3d4665; border-radius:10px; font-weight:700; } .login-roles button.selected { color:#fff; background:var(--brand); border-color:var(--brand); }
dialog { border:0; padding:0; border-radius:18px; width:min(760px,calc(100% - 26px)); box-shadow:0 22px 70px rgba(15,20,47,.28); } dialog::backdrop { background:rgba(12,18,48,.52); } .modal { padding:24px; } .modal-head { display:flex; justify-content:space-between; align-items:start; margin-bottom:18px; } .close { background:#f1f2f7; width:32px; height:32px; border-radius:8px; font-size:18px; } .review-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .image-box { background:#f4f5fa; border-radius:12px; display:grid; place-items:center; min-height:250px; overflow:hidden; } .image-box img { width:100%; height:100%; max-height:480px; object-fit:contain; } .actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
@media (max-width:760px) { .shell { grid-template-columns:1fr; } .side { padding:13px 18px; display:block; } .side .brand { display:inline-flex; } .side .nav { display:flex; overflow:auto; margin-top:12px; } .side .nav button { white-space:nowrap; padding:8px 10px; } .side .user-box { display:none; } .content { padding:25px 16px 40px; } .grid { grid-template-columns:1fr; } .review-grid { grid-template-columns:1fr; } .login-roles { grid-template-columns:1fr; } h1 { font-size:24px; } }