:root {
  --ink: #152238; --muted: #73809a; --blue: #3667e8; --blue-2: #e9efff;
  --line: #e9edf5; --bg: #f7f9fc; --card: #ffffff; --green: #1d9a73;
  --orange: #e98d32; --shadow: 0 20px 50px rgba(33, 56, 102, .08);
  font-family: 'Noto Sans SC', Manrope, sans-serif; color: var(--ink); background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
.link-btn { display:block; margin:14px auto 0; padding:4px; background:transparent; color:var(--blue); font-size:12px; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: #f8faff; }
.login-visual { position: relative; padding: 72px; color: white; overflow: hidden; background: linear-gradient(145deg,#172e70 0%,#2e5ada 52%,#7b91e8 100%); }
.login-visual:after { content:""; position:absolute; width:520px; height:520px; border-radius:50%; right:-190px; bottom:-230px; background: rgba(255,255,255,.13); }
.login-visual:before { content:""; position:absolute; width:310px; height:310px; border-radius:50%; left:-150px; top:35%; border: 1px solid rgba(255,255,255,.18); }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; font-size:18px; letter-spacing:.02em; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:#fff; color:var(--blue); font-size:17px; }
.login-copy { position:relative; z-index:1; max-width:500px; margin-top:150px; }
.login-copy h1 { font-size: clamp(34px,4vw,56px); line-height:1.13; margin:0 0 20px; letter-spacing:-.05em; }
.login-copy p { color: rgba(255,255,255,.75); font-size:16px; line-height:1.8; margin:0; }
.visual-note { position:absolute; left:72px; bottom:64px; z-index:1; display:flex; gap:26px; color:rgba(255,255,255,.8); font-size:13px; }
.visual-note span:before { content:'✓'; margin-right:8px; color:#a8ffce; }
.login-panel { display:flex; align-items:center; justify-content:center; padding:42px; }
.login-box { width:min(430px,100%); }
.login-box h2 { font-size:30px; margin:0 0 10px; letter-spacing:-.04em; }
.login-box .sub { margin:0 0 34px; color:var(--muted); font-size:14px; }
.field { margin-bottom:18px; }
.field label { display:block; font-size:13px; color:#53627c; margin-bottom:8px; font-weight:600; }
.field input, .field select { width:100%; border:1px solid var(--line); border-radius:12px; padding:13px 14px; color:var(--ink); background:#fff; outline:0; transition:.2s; }
.field input:focus, .field select:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(54,103,232,.1); }
.primary { background:var(--blue); color:#fff; border-radius:12px; padding:13px 18px; font-weight:700; box-shadow:0 8px 20px rgba(54,103,232,.2); transition:.2s; }
.primary:hover { transform:translateY(-1px); background:#2d58ca; }
.ghost { color:#53627c; background:#f2f5fa; border-radius:10px; padding:10px 14px; font-weight:600; }
.error { min-height:20px; margin:7px 0 0; color:#cc4b56; font-size:13px; }
.demo-hint { margin-top:28px; padding:14px 16px; border-radius:12px; background:#f3f6fb; color:#76829a; font-size:12px; line-height:1.7; }
.demo-hint strong { color:#495873; }

.app-shell { min-height:100vh; display:flex; }
.sidebar { width:238px; flex:none; background:#fff; border-right:1px solid var(--line); padding:27px 16px; display:flex; flex-direction:column; }
.sidebar .brand { padding:0 12px 36px; }
.nav-label { margin:17px 12px 10px; font-size:11px; font-weight:800; letter-spacing:.1em; color:#a2abc0; text-transform:uppercase; }
.nav-item { width:100%; display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; color:#71809a; background:transparent; text-align:left; font-weight:600; margin-bottom:3px; }
.nav-item:hover, .nav-item.active { color:var(--blue); background:var(--blue-2); }
.nav-icon { width:21px; text-align:center; font-size:17px; }
.sidebar-bottom { margin-top:auto; padding:15px 12px 0; border-top:1px solid var(--line); }
.profile-mini { display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#fff; background:linear-gradient(135deg,#5c86f7,#6b55d9); font-weight:700; font-size:13px; }
.profile-mini div:last-child { overflow:hidden; }
.profile-mini b { display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-mini span { color:#99a3b6; font-size:11px; }
.main { min-width:0; flex:1; padding:30px 42px 50px; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:36px; }
.topbar h1 { font-size:26px; letter-spacing:-.04em; margin:0; }
.topbar p { margin:7px 0 0; color:var(--muted); font-size:13px; }
.top-actions { display:flex; align-items:center; gap:12px; }
.icon-btn { background:#fff; border:1px solid var(--line); width:38px; height:38px; border-radius:11px; color:#71809a; position:relative; }
.icon-btn .dot { position:absolute; width:6px; height:6px; border-radius:50%; background:#ef7184; top:8px; right:9px; border:1px solid #fff; }
.user-pill { display:flex; align-items:center; gap:9px; padding-left:12px; border-left:1px solid var(--line); }
.user-pill span { font-size:13px; font-weight:700; }
.section-title { display:flex; align-items:center; justify-content:space-between; margin:30px 0 15px; }
.section-title h2 { font-size:17px; margin:0; letter-spacing:-.02em; }
.section-title a { font-size:12px; color:var(--blue); cursor:pointer; font-weight:700; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:15px; padding:19px; box-shadow:0 4px 14px rgba(30,52,92,.02); }
.stat-top { display:flex; align-items:center; justify-content:space-between; color:#8290a9; font-size:12px; }
.stat-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:#f1f5ff; color:var(--blue); }
.stat-number { margin:14px 0 4px; font-size:26px; font-weight:800; letter-spacing:-.05em; }
.stat-foot { color:#8a96aa; font-size:11px; }
.stat-foot em { color:var(--green); font-style:normal; font-weight:700; }
.dashboard-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; }
.card { background:#fff; border:1px solid var(--line); border-radius:15px; padding:20px; }
.storage-card { display:flex; align-items:center; gap:30px; }
.ring { width:116px; height:116px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--blue) 0 27%, #e7edff 27% 100%); position:relative; flex:none; }
.ring:after { content:""; position:absolute; inset:11px; border-radius:50%; background:#fff; }
.ring-text { position:relative; z-index:1; text-align:center; font-weight:800; font-size:19px; }
.ring-text small { display:block; color:#91a0b8; font-size:10px; font-weight:500; }
.storage-copy h3 { margin:0 0 6px; font-size:16px; }
.storage-copy p { color:var(--muted); font-size:12px; margin:0 0 15px; }
.progress { background:#edf1f7; height:7px; border-radius:9px; overflow:hidden; width:230px; }
.progress i { display:block; height:100%; width:27%; background:var(--blue); border-radius:9px; }
.recent-list { padding:0; margin:0; list-style:none; }
.recent-list li { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid #f1f3f7; }
.recent-list li:last-child { border-bottom:0; padding-bottom:0; }
.file-type { width:31px; height:34px; border-radius:8px; display:grid; place-items:center; background:#eff3ff; color:#4e73e8; font-size:10px; font-weight:800; }
.file-type.pdf { color:#e76468; background:#fff0f0; } .file-type.xls { color:#1b9b71; background:#eaf9f3; } .file-type.img { color:#b376d9; background:#f7effc; }
.recent-list .file-info { flex:1; min-width:0; } .file-info b { display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:12px; } .file-info span { color:#9aa5b7; font-size:10px; }
.tag { padding:4px 8px; border-radius:6px; font-size:10px; color:#70809b; background:#f4f6fa; white-space:nowrap; }
.tag.sensitive { color:#d2782b; background:#fff4e8; }
.files-card { margin-top:16px; }
.files-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.search { flex:1; position:relative; } .search input { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 13px 11px 36px; outline:0; } .search:before { content:'⌕'; position:absolute; left:13px; top:7px; color:#9ca8b9; font-size:19px; }
.select { border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:#65748e; background:#fff; }
.file-table { width:100%; border-collapse:collapse; } .file-table th { text-align:left; color:#a0aabc; font-size:11px; font-weight:700; padding:0 9px 12px; } .file-table td { padding:12px 9px; border-top:1px solid #f0f2f6; font-size:12px; color:#5a6881; } .file-table td:first-child { color:var(--ink); font-weight:700; } .file-table tr:hover td { background:#fbfcff; }
.file-name { display:flex; align-items:center; gap:10px; min-width:210px; } .file-name .file-type { flex:none; width:29px; height:31px; }
.actions { display:flex; gap:7px; } .text-btn { background:transparent; color:var(--blue); font-size:11px; font-weight:700; padding:5px; } .text-btn.warn { color:#d1742c; }
.badge { color:#4f6ea7; background:#eef3ff; border-radius:5px; padding:4px 7px; font-size:10px; } .badge.gray { color:#778398; background:#f2f4f7; }
.panel { display:none; } .panel.active { display:block; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:25px; } .panel-head h2 { margin:0 0 6px; font-size:22px; } .panel-head p { margin:0; font-size:13px; color:var(--muted); }
.two-col { display:grid; grid-template-columns:1.25fr .75fr; gap:16px; }
.user-table { width:100%; border-collapse:collapse; } .user-table th { text-align:left; font-size:11px; color:#9ca7ba; padding:0 10px 13px; } .user-table td { border-top:1px solid #f0f2f6; padding:14px 10px; font-size:12px; color:#637089; } .person { display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:700; }
.role-chip { background:#f0f4ff; color:#5574cd; padding:5px 8px; border-radius:6px; font-size:10px; } .role-chip.admin { background:#fff1e7; color:#c66e2a; }
.empty { text-align:center; color:#98a4b7; padding:35px; font-size:13px; }
.log-list { list-style:none; padding:0; margin:0; } .log-list li { display:flex; align-items:flex-start; gap:11px; padding:13px 0; border-bottom:1px solid #f0f2f6; } .log-list li:last-child { border-bottom:0; } .log-dot { width:8px; height:8px; border-radius:50%; background:#6c8ef3; margin-top:5px; flex:none; } .log-list b { font-size:12px; display:block; } .log-list span { display:block; color:#929db0; font-size:11px; margin-top:4px; }
.settings-list { display:grid; gap:12px; } .setting { display:flex; align-items:center; justify-content:space-between; padding:17px; border:1px solid var(--line); border-radius:12px; } .setting b { font-size:13px; } .setting p { margin:4px 0 0; color:#929db0; font-size:11px; } .switch { width:38px; height:22px; border-radius:20px; background:var(--blue); padding:3px; } .switch:after { content:""; display:block; width:16px; height:16px; border-radius:50%; background:#fff; margin-left:16px; }
.modal-backdrop { display:none; position:fixed; inset:0; z-index:10; background:rgba(23,34,57,.45); align-items:center; justify-content:center; padding:20px; } .modal-backdrop.show { display:flex; } .modal { width:min(560px,100%); max-height:90vh; overflow:auto; background:#fff; border-radius:18px; padding:25px; box-shadow:0 30px 70px rgba(10,25,65,.2); } .modal h3 { margin:0 0 7px; font-size:19px; } .modal p { margin:0 0 21px; color:#8a96aa; font-size:12px; } .modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:24px; } .check-line { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:#53627c; margin:14px 0; } .check-line input { accent-color:var(--blue); margin-top:3px; } .preview-box { padding:30px; border-radius:12px; background:#f5f7fb; text-align:center; min-height:180px; display:grid; place-items:center; color:#76849e; } .preview-box strong { color:#455574; display:block; font-size:17px; margin-bottom:6px; } .preview-box span { font-size:12px; }
.toast { position:fixed; z-index:20; right:25px; bottom:25px; background:#1d293f; color:#fff; border-radius:10px; padding:12px 16px; font-size:12px; box-shadow:var(--shadow); transform:translateY(80px); opacity:0; transition:.25s; } .toast.show { transform:translateY(0); opacity:1; }
@media(max-width: 900px) { .login-shell { grid-template-columns:1fr; } .login-visual { min-height:330px; padding:35px; } .login-copy { margin-top:70px; } .visual-note { left:35px; bottom:28px; } .login-panel { padding:34px 24px 50px; } .sidebar { width:72px; padding:24px 10px; } .sidebar .brand { padding:0 10px 33px; } .sidebar .brand span, .nav-item span:not(.nav-icon), .nav-label, .sidebar-bottom { display:none; } .nav-item { justify-content:center; padding:12px 0; } .main { padding:24px 20px 40px; } .stats { grid-template-columns:repeat(2,1fr); } .dashboard-grid, .two-col { grid-template-columns:1fr; } }
@media(max-width: 560px) { .topbar { margin-bottom:24px; } .topbar h1 { font-size:22px; } .user-pill span { display:none; } .stats { gap:9px; } .stat { padding:13px; } .stat-number { font-size:21px; } .storage-card { display:block; } .ring { margin:0 auto 22px; } .progress { width:100%; } .files-toolbar { flex-wrap:wrap; } .search { flex-basis:100%; } .file-table th:nth-child(3), .file-table td:nth-child(3), .file-table th:nth-child(4), .file-table td:nth-child(4) { display:none; } .file-name { min-width:150px; } .main { padding:22px 14px 40px; } }