:root {
    --bg: #0b1020;
    --card: rgba(16, 24, 48, 0.72);
    --card-border: rgba(255, 255, 255, 0.08);
    --text: #f5f7ff;
    --muted: #aab4da;
    --primary: #7aa2ff;
    --danger: #ff7d91;
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    --radius-xl: 28px;
    --radius-lg: 20px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(122, 162, 255, 0.18), transparent 30%),
        radial-gradient(circle at bottom right, rgba(114, 224, 165, 0.12), transparent 24%),
        linear-gradient(145deg, #08101d 0%, #0d1530 42%, #09101e 100%);
}
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.app-shell { padding: 24px; min-height: 100vh; }
.glass {
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}
.eyebrow { margin: 0 0 6px; color: #9bb2ff; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.brand-mark { display:flex; gap:14px; align-items:center; }
.brand-mark h1, .brand-mark h2, .hero-content h2, .topbar h2, .activity-head h3 { margin:0; }
.brand-orb {
    width:48px; height:48px; border-radius:18px;
    background: linear-gradient(160deg, #7aa2ff 0%, #72e0a5 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 18px 30px rgba(79,125,255,.35);
}
.login-screen { display:grid; grid-template-columns:minmax(320px,480px) 1fr; gap:24px; align-items:stretch; }
.login-card,.hero-panel,.sidebar,.topbar,.content-card,.activity-card { border-radius: var(--radius-xl); }
.login-card,.hero-panel { padding:36px; }
.login-text { color: var(--muted); line-height:1.6; margin:18px 0 24px; }
.login-form { display:grid; gap:16px; }
.login-form label { display:grid; gap:8px; }
.login-form span { color:#cad4fb; font-size:14px; }
.login-form input {
    width:100%; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--text);
    border-radius:16px; padding:14px 16px; outline:none;
}
.login-form input:focus { border-color: rgba(122,162,255,.7); }
.hint,.form-error { margin:0; font-size:14px; }
.hint,.empty-state { color:var(--muted); }
.form-error { color:#ff9fb0; min-height:18px; }
.hero-panel {
    display:flex; align-items:end; min-height:70vh;
    background: linear-gradient(135deg, rgba(122,162,255,.12), rgba(114,224,165,.06));
}
.hero-content { max-width:520px; }
.hero-content h2 { font-size: clamp(32px, 4vw, 54px); line-height:1.05; margin-bottom:18px; }
.hero-content p { color:#d6ddfb; line-height:1.7; }
.feature-row,.topbar-actions,.action-cell,.breadcrumbs { display:flex; flex-wrap:wrap; gap:10px; }
.feature-row span,.nav-chip,.ghost-btn,.primary-btn,.crumb,.action-btn {
    border-radius:999px; border:1px solid rgba(255,255,255,.08);
}
.feature-row span { padding:10px 14px; background:rgba(255,255,255,.04); color:#e6ebff; }
.workspace { display:grid; grid-template-columns:280px minmax(0,1fr); gap:24px; }
.sidebar { min-height:calc(100vh - 48px); padding:24px; display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.side-nav { display:grid; gap:12px; margin-top:28px; }
.nav-chip,.ghost-btn,.primary-btn { padding:12px 16px; color:var(--text); background:rgba(255,255,255,.04); transition:.2s ease; }
.nav-chip:hover,.ghost-btn:hover,.primary-btn:hover,.action-btn:hover { transform:translateY(-1px); }
.nav-chip.active { background: rgba(122,162,255,.16); }
.upload-chip { display:flex; justify-content:center; }
.sidebar-bottom,.mini-stat,.main-panel,.stats-grid,.content-grid,.file-list,.activity-list { display:grid; gap:12px; }
.mini-stat { border-radius:20px; padding:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.mini-stat span,.stat-card span,.file-subtitle,.type-cell,.size-cell,.date-cell,.dropzone p { color:var(--muted); }
.main-panel { gap:20px; align-content:start; }
.topbar,.content-card,.activity-card { padding:22px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.topbar h2 { font-size: clamp(24px, 3vw, 34px); }
.primary-btn { background: linear-gradient(135deg, rgba(122,162,255,.28), rgba(79,125,255,.42)); }
.primary-btn.secondary { background: rgba(255,255,255,.08); }
.ghost-btn.small { padding:10px 14px; font-size:14px; }
.stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; }
.stat-card { border-radius:20px; padding:18px; gap:10px; }
.stat-card strong { font-size: clamp(24px, 3vw, 36px); }
.content-grid { grid-template-columns:minmax(0, 1.8fr) minmax(280px, .8fr); align-items:start; }
.toolbar { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px; }
.crumb { padding:8px 12px; background:rgba(255,255,255,.04); color:#dbe3ff; }
.crumb.current { background: rgba(122,162,255,.18); }
.dropzone { border:1.5px dashed rgba(122,162,255,.35); border-radius:24px; padding:24px; margin-bottom:16px; background:rgba(122,162,255,.05); transition:.2s ease; }
.dropzone.active { background:rgba(122,162,255,.12); border-color:rgba(122,162,255,.75); }
.dropzone h3 { margin:0 0 8px; }
.table-head,.file-row { display:grid; grid-template-columns:minmax(260px,2fr) 110px 110px 160px minmax(240px,1.2fr); gap:12px; align-items:center; }
.table-head { color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.08em; padding:0 10px 10px; }
.file-row { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); border-radius:20px; padding:14px 10px; }
.file-main { display:flex; align-items:center; gap:14px; min-width:0; }
.file-info-wrap { min-width:0; }
.file-icon {
    width:52px; height:52px; border-radius:18px; background:linear-gradient(135deg, rgba(122,162,255,.26), rgba(114,224,165,.18));
    border:1px solid rgba(255,255,255,.08); position:relative; flex-shrink:0; overflow:hidden;
}
.file-icon::before { content:'✦'; position:absolute; inset:0; display:grid; place-items:center; font-size:22px; }
.file-icon.folder::before { content:'⌂'; font-size:24px; }
.file-icon.image::before { content:''; }
.thumb { width:100%; height:100%; object-fit:cover; display:block; }
.file-name { margin:0 0 4px; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-subtitle { margin:0; font-size:13px; }
.action-cell { justify-content:flex-end; }
.action-btn { background:rgba(255,255,255,.05); color:var(--text); padding:9px 12px; font-size:13px; }
.action-btn.danger { color:#ffd2d9; }
.activity-card { min-height: 240px; }
.activity-item { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:14px; display:grid; gap:6px; }
.activity-item strong { font-size:15px; }
.activity-item span, .activity-item time { color:var(--muted); font-size:13px; }
.toast {
    position:fixed; right:24px; bottom:24px; padding:14px 18px; border-radius:16px; background:rgba(8,15,32,.92);
    color:white; border:1px solid rgba(255,255,255,.08); opacity:0; transform:translateY(12px); transition:.25s ease; pointer-events:none;
}
.toast.show { opacity:1; transform:translateY(0); }
@media (max-width: 1280px) { .content-grid { grid-template-columns: 1fr; } }
@media (max-width: 1180px) {
    .table-head { display:none; }
    .file-row { grid-template-columns:1fr; gap:10px; padding:16px; }
    .action-cell { justify-content:flex-start; }
}
@media (max-width: 980px) {
    .workspace, .login-screen, .stats-grid { grid-template-columns:1fr; }
    .sidebar { min-height:unset; }
    .hero-panel { min-height:320px; }
    .topbar { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 640px) {
    .app-shell { padding:14px; }
    .login-card,.hero-panel,.sidebar,.topbar,.content-card,.activity-card { padding:18px; }
}