:root { color-scheme:light; --ink:#172b4d; --muted:#5f6f86; --line:#d9e2f0; --soft:#f5f9fd; --surface:#fff; --accent:#0078d4; --accent-dark:#005a9e; --accent-soft:#e5f3ff; --navy:#fff; --cyan:#00a4ef; --danger:#c42b3f; --shadow:0 18px 55px #174a7d14; }
* { box-sizing:border-box; }
body { margin:0; background:var(--soft); color:var(--ink); font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; } h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.04em; } h1 { font-size:1.65rem; margin-bottom:0; } h2 { font-size:1.55rem; margin-bottom:7px; } h3 { font-size:1rem; }
.shell { min-height:100vh; } .muted { color:var(--muted); } .eyebrow { color:var(--accent); font-size:.68rem; font-weight:800; letter-spacing:.16em; margin-bottom:10px; }
.brand-mark { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:15px; background:linear-gradient(135deg,var(--accent),var(--cyan)); color:#fff; font-size:.85rem; font-weight:800; box-shadow:0 8px 20px #0078d44d; } .brand-mark.small { width:34px; height:34px; border-radius:10px; font-size:.7rem; }
.login-layout { max-width:1060px; min-height:100vh; margin:auto; padding:35px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(50px,9vw,150px); } .intro { max-width:470px; } .intro .brand-mark { margin-bottom:55px; } .intro h1 { font-size:clamp(2.5rem,5vw,4.3rem); line-height:1.02; margin-bottom:16px; } .intro h1 em { color:var(--accent); font-style:normal; }
.login-card { padding:38px; background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); } .form-intro { margin-bottom:30px; }
.login-card { border-top:4px solid var(--accent); }
label { display:block; color:#405570; font-size:.8rem; font-weight:700; margin-bottom:17px; } input,select { display:block; width:100%; margin-top:7px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); outline:0; } input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 4px #0078d41a; }
button { padding:10px 16px; border:0; border-radius:10px; font-weight:750; } .primary { color:#fff; background:var(--accent); box-shadow:0 7px 16px #0078d433; } .primary:hover { background:var(--accent-dark); } .full { width:100%; display:flex; align-items:center; justify-content:space-between; } .secondary { color:var(--muted); background:transparent; border:1px solid var(--line); } .secondary:hover { background:var(--accent-soft); color:var(--accent-dark); } .error { color:var(--danger); font-size:.84rem; margin:12px 0 0; }
.app-layout { display:grid; grid-template-columns:240px 1fr; min-height:100vh; } .sidebar { display:flex; flex-direction:column; padding:30px 18px; background:var(--navy); color:var(--ink); border-right:1px solid var(--line); } .brand { display:flex; align-items:center; gap:11px; padding:0 12px 48px; color:var(--ink); font-size:1.05rem; } .sidebar nav { display:grid; gap:6px; } .nav-item { width:100%; display:flex; gap:13px; align-items:center; padding:12px 14px; color:#536b86; background:transparent; text-align:left; font-size:.86rem; } .nav-item span { width:18px; text-align:center; color:var(--accent); font-size:1.1rem; } .nav-item:hover { color:var(--accent-dark); background:#f0f7fd; } .nav-item.active { color:var(--accent-dark); background:var(--accent-soft); box-shadow:inset 3px 0 var(--accent); } .sidebar-footer { margin-top:auto; color:#6f849b; font-size:.72rem; padding:16px 12px; } .status-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#55d99a; }
.workspace { min-width:0; padding:38px clamp(25px,5vw,70px) 70px; } .topbar { display:flex; align-items:center; justify-content:space-between; padding-bottom:28px; border-bottom:1px solid var(--line); } .account { display:flex; align-items:center; gap:14px; font-size:.82rem; font-weight:700; } .live { padding:4px 9px; border-radius:20px; color:#168355; background:#e9f8f1; font-size:.68rem; } .live.off { color:var(--muted); background:#eef0f5; }
.notification-trigger { position:relative; padding:8px 10px; color:var(--ink); background:var(--accent-soft); font-size:1.1rem; } .notification-count { position:absolute; top:-5px; right:-5px; min-width:18px; padding:1px 4px; color:#fff; background:var(--danger); border-radius:10px; font-size:.65rem; line-height:16px; } .notifications-panel { position:fixed; inset:auto 24px 80px auto; width:min(390px,calc(100% - 32px)); max-height:min(520px,calc(100vh - 110px)); margin:0; padding:18px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); } .notifications-panel:popover-open { display:block; } .notifications-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .notifications-head h2 { margin:0; font-size:1.2rem; } .notifications-head .modal-close { position:static; } .notifications-read { margin:14px 0 8px; padding:7px 10px; font-size:.75rem; } .notifications-list { display:grid; gap:8px; max-height:350px; margin:0; padding:0; overflow:auto; list-style:none; } .notification-item { padding:11px 12px; border-left:3px solid var(--line); border-radius:8px; color:var(--muted); font-size:.85rem; } .notification-item.unread { border-left-color:var(--accent); color:var(--ink); background:var(--accent-soft); font-weight:650; } .notifications-empty { padding:25px 10px; color:var(--muted); text-align:center; }
.view-section { padding-top:42px; } .welcome-row,.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:27px; } .welcome-row h2,.section-head h2 { margin-bottom:4px; } .stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px; } .stat-card { position:relative; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:15px; box-shadow:0 8px 28px #174a7d0d; } .stat-card strong { display:block; margin:5px 0 1px; font-size:1.5rem; letter-spacing:-.04em; } .stat-card small,.stat-label { display:block; color:var(--muted); font-size:.75rem; } .stat-label { margin-top:13px; } .stat-icon { position:absolute; right:20px; top:20px; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; } .purple { color:var(--accent); background:var(--accent-soft); } .green { color:#168355; background:#e9f8f1; } .orange { color:#c97718; background:#fff4e5; } .card { background:var(--surface); border:1px solid var(--line); border-radius:15px; box-shadow:0 8px 28px #174a7d0d; } .quick-card { display:flex; align-items:center; justify-content:space-between; padding:23px 26px; border-left:4px solid var(--accent); } .quick-card p { margin-bottom:0; }
.table-card { overflow:auto; } table { width:100%; border-collapse:collapse; } th,td { padding:17px 20px; text-align:left; border-bottom:1px solid var(--line); overflow-wrap:anywhere; } th { color:var(--muted); font-size:.67rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; } tbody tr:hover { background:#f7fbff; } td:first-child { font-weight:700; } td.actions { text-align:right; white-space:nowrap; } td.actions button { padding:7px 10px; margin-left:5px; font-size:.76rem; } .danger { color:var(--danger); background:#fff1f2; } .empty { padding:30px; color:var(--muted); text-align:center; } .users-card { padding:25px; } .users-list { list-style:none; margin:0; padding:0; } .users-list li { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); } .users-list li:last-child { border-bottom:0; } .role-badge { padding:4px 9px; color:var(--accent-dark); background:var(--accent-soft); border-radius:20px; font-size:.7rem; }
.modal { width:min(470px,calc(100% - 30px)); padding:0; border:0; border-radius:20px; background:transparent; box-shadow:var(--shadow); } .modal::backdrop { background:#0b1f3399; backdrop-filter:blur(5px); } .modal-card { position:relative; padding:30px; background:var(--surface); border-radius:20px; border-top:4px solid var(--accent); } .modal-close { position:absolute; top:16px; right:16px; padding:4px 9px; color:var(--muted); background:var(--soft); font-size:1.25rem; } .dropzone { display:grid; place-items:center; gap:4px; padding:28px 15px; margin:25px 0; border:1px dashed #8eb9d8; border-radius:13px; color:var(--ink); text-align:center; cursor:pointer; background:#f7fbff; } .dropzone small { color:var(--muted); font-weight:400; } .drop-icon { display:grid; place-items:center; width:36px; height:36px; color:var(--accent); background:var(--accent-soft); border-radius:50%; font-size:1.3rem; } #file-input { position:absolute; width:1px; height:1px; opacity:0; } .modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; } #toasts { position:fixed; right:24px; bottom:24px; z-index:5; margin:0; padding:0; list-style:none; display:grid; gap:8px; width:min(360px,calc(100% - 32px)); } #toasts li { padding:14px 16px; color:#fff; background:var(--navy); border-left:4px solid var(--accent); border-radius:10px; box-shadow:var(--shadow); animation:toast-in .2s ease-out; } #toasts .toast-uploaded { border-left-color:#55d99a; } #toasts .toast-deleted { border-left-color:#ff9f43; } @keyframes toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) { .login-layout { display:block; padding:28px 18px; } .intro { padding:35px 0; } .intro .brand-mark { margin-bottom:30px; } .login-card { padding:25px; } .app-layout { display:block; } .sidebar { padding:15px; } .sidebar .brand { padding:0 5px 15px; } .sidebar nav { display:flex; overflow:auto; } .nav-item { flex:0 0 auto; width:auto; } .sidebar-footer { display:none; } .workspace { padding:25px 16px 50px; } .topbar,.welcome-row,.section-head { align-items:flex-start; flex-direction:column; } .account { width:100%; justify-content:space-between; } .stats-grid { grid-template-columns:1fr; } .quick-card { align-items:flex-start; flex-direction:column; gap:16px; } table { min-width:650px; } }