:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --ink: #14213d;
  --muted: #6c7890;
  --line: #e4e9f1;
  --primary: #4f6df5;
  --primary-dark: #3853db;
  --primary-soft: #eef1ff;
  --success: #15a36d;
  --danger: #dc4555;
  --shadow: 0 18px 50px rgba(38, 54, 95, .09);
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 260px; padding: 28px 20px; background: rgba(255,255,255,.94); border-right: 1px solid var(--line); display: flex; flex-direction: column; backdrop-filter: blur(18px); }
.brand-row { display: flex; align-items: center; gap: 12px; padding: 0 6px 28px; }
.brand-row strong { display: block; font-size: 18px; letter-spacing: -.4px; }
.brand-row span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, #526ef6, #7d59ef); box-shadow: 0 10px 25px rgba(79,109,245,.25); }
.brand-mark svg { width: 28px; fill: white; }.brand-mark .brand-arrow { fill: #536df2; }
.primary-button, .secondary-button, .ghost-button, .danger-button, .link-button { border: 0; border-radius: 12px; min-height: 42px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 700; transition: .18s ease; white-space: nowrap; }
.primary-button { color: white; background: var(--primary); box-shadow: 0 8px 20px rgba(79,109,245,.2); }.primary-button:hover { background: var(--primary-dark); transform: translateY(-1px); }
.secondary-button { color: var(--ink); background: white; border: 1px solid var(--line); }.secondary-button:hover { border-color: #c8d1e2; background: var(--surface-soft); }
.ghost-button { color: var(--primary); background: var(--primary-soft); }.ghost-button:hover { background: #e4e9ff; }
.danger-button { color: white; background: var(--danger); }
.sidebar-upload { width: 100%; margin-bottom: 22px; }.plus { font-size: 22px; line-height: 1; }
.side-nav { display: grid; gap: 7px; }
.nav-item { width: 100%; min-height: 45px; padding: 0 13px; border: 0; border-radius: 12px; background: transparent; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; text-align: left; color: var(--muted); font-weight: 650; }
.nav-item:hover { background: var(--surface-soft); color: var(--ink); }.nav-item.active { color: var(--primary); background: var(--primary-soft); }.nav-icon { font-size: 19px; }
.nav-badge { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: white; color: var(--primary); font-size: 11px; }
.storage-card { margin-top: auto; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.storage-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }.storage-head strong { color: var(--ink); }
.meter { height: 7px; border-radius: 99px; background: #e5eaf3; overflow: hidden; margin: 12px 0 10px; }.meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f6df5, #8b5cf6); transition: width .5s; }
.storage-card p { margin: 0; font-size: 12px; color: var(--muted); }
.sidebar-note { display: flex; gap: 10px; align-items: flex-start; padding: 18px 8px 0; }.sidebar-note strong,.sidebar-note small { display: block; }.sidebar-note strong { font-size: 12px; }.sidebar-note small { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }.status-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; background: var(--success); box-shadow: 0 0 0 5px rgba(21,163,109,.1); }
.main-area { grid-column: 2; min-width: 0; }
.topbar { height: 76px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(244,247,251,.86); border-bottom: 1px solid rgba(228,233,241,.8); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 10; }
.search-box { width: min(520px, 60vw); height: 43px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: white; border-radius: 13px; }
.search-box:focus-within { border-color: #aab8fa; box-shadow: 0 0 0 4px rgba(79,109,245,.08); }.search-box svg { width: 19px; fill: none; stroke: var(--muted); stroke-width: 1.8; }.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; }.search-box input::placeholder { color: #9aa5b8; }
.shared-chip { border: 1px solid #dce4f0; border-radius: 999px; background: white; padding: 9px 13px; color: var(--muted); font-size: 12px; font-weight: 700; }.shared-chip span { color: var(--success); }
.icon-button { width: 39px; height: 39px; border-radius: 11px; border: 1px solid var(--line); background: white; color: var(--muted); display: grid; place-items: center; font-size: 19px; }.icon-button:hover { color: var(--ink); border-color: #c9d2e2; }.mobile-menu { display: none; }
.content-wrap { width: min(1240px, calc(100% - 68px)); margin: 0 auto; padding: 36px 0 80px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 25px; }.page-heading h1 { margin: 4px 0 5px; font-size: clamp(27px, 3vw, 36px); letter-spacing: -1.2px; }.page-heading p { margin: 0; color: var(--muted); font-size: 14px; }.heading-actions { display: flex; gap: 10px; }
.breadcrumbs { min-height: 18px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }.breadcrumbs button { border: 0; background: none; color: inherit; padding: 0; }.breadcrumbs button:hover { color: var(--primary); }.breadcrumbs i { font-style: normal; color: #b3bdcc; }
.drop-zone { min-height: 210px; border: 1.5px dashed #bdc8dc; border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(242,245,255,.95)); display: flex; align-items: center; justify-content: center; gap: 28px; padding: 28px; box-shadow: var(--shadow); outline: none; transition: .2s; position: relative; overflow: hidden; }
.drop-zone::before { content:""; position:absolute; width:280px; height:280px; border-radius:50%; background: radial-gradient(circle, rgba(113,90,245,.12), transparent 68%); right:-70px; top:-100px; }.drop-zone:hover,.drop-zone.dragging,.drop-zone:focus-visible { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 22px 60px rgba(47,64,108,.12); }
.drop-visual { position: relative; width: 95px; height: 95px; display: grid; place-items: center; }.drop-visual svg { width: 67px; fill: #dfe5ff; filter: drop-shadow(0 10px 16px rgba(79,109,245,.12)); z-index: 2; }.drop-visual .arrow { fill: var(--primary); }.upload-orbit { position: absolute; border: 1px solid rgba(79,109,245,.16); border-radius: 50%; }.orbit-one { width: 90px; height: 90px; }.orbit-two { width: 68px; height: 68px; }
.drop-copy { display: grid; gap: 6px; min-width: 240px; }.drop-copy strong { font-size: 19px; letter-spacing: -.3px; }.drop-copy span { color: var(--muted); font-size: 13px; }.drop-actions { display: flex; gap: 9px; z-index: 2; }

.mobile-gallery-button, .mobile-picker-note { display: none; }
.mobile-gallery-button span { font-size: 18px; line-height: 1; }
.mobile-picker-note { position: relative; z-index: 2; margin: 0; color: var(--muted); font-size: 11px; }
.files-panel { margin-top: 26px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 12px 35px rgba(38,54,95,.06); overflow: hidden; }
.panel-toolbar { min-height: 65px; padding: 12px 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.toolbar-left,.toolbar-right { display: flex; align-items: center; gap: 10px; }.toolbar-left > span { font-size: 13px; color: var(--muted); }.toolbar-right select { height: 39px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); padding: 0 30px 0 12px; background: white; outline: 0; }
.file-header,.file-row { display: grid; grid-template-columns: minmax(260px, 1fr) 130px 170px 120px; align-items: center; column-gap: 18px; }.file-header { min-height: 40px; padding: 0 18px; background: #fafbfc; color: #8a95a8; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.file-row { min-height: 68px; padding: 8px 18px; border-top: 1px solid #edf0f5; transition: background .15s; }.file-row:first-child { border-top: 0; }.file-row:hover { background: #fafbfe; }.file-main { min-width: 0; display: flex; align-items: center; gap: 12px; }.file-main button { min-width: 0; border: 0; padding: 0; background: none; text-align: left; color: inherit; }.file-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; }.file-type { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }.file-cell { color: var(--muted); font-size: 12px; }.file-actions { display: flex; justify-content: flex-end; gap: 4px; opacity: .4; }.file-row:hover .file-actions { opacity: 1; }.mini-action { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); }.mini-action:hover { background: var(--primary-soft); color: var(--primary); }.mini-action.danger:hover { background: #fff0f2; color: var(--danger); }
.file-icon { flex: 0 0 auto; width: 41px; height: 41px; border-radius: 12px; display: grid; place-items: center; background: #eef1ff; color: var(--primary); font-weight: 900; font-size: 11px; text-transform: uppercase; }.file-icon.folder { background: #fff4d7; color: #d59617; font-size: 21px; }.file-icon.image { background: #e8f8ef; color: #168f61; }.file-icon.video { background: #f5eaff; color: #8a4cc7; }.file-icon.audio { background: #fff0f2; color: #d44c62; }.file-icon.pdf { background: #ffecef; color: #d83a4f; }.file-icon.archive { background: #e9f7fb; color: #187f9c; }
.file-list.grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding: 16px; }.grid-view .file-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-height: 175px; border: 1px solid var(--line); border-radius: 15px; padding: 16px; }.grid-view .file-main { flex-direction: column; align-items: flex-start; gap: 15px; }.grid-view .file-icon { width: 48px; height: 48px; }.grid-view .file-cell { display: none; }.grid-view .file-actions { margin-top: auto; opacity: 1; justify-content: flex-start; }.grid-view .file-main button { width: 100%; }.grid-view + .empty-state { min-height: 350px; }
.empty-state { min-height: 300px; display: grid; place-items: center; align-content: center; text-align: center; padding: 40px; }.empty-state .empty-icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 35px; }.empty-state h2 { margin: 18px 0 7px; font-size: 18px; }.empty-state p { margin: 0; max-width: 400px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.upload-drawer { position: fixed; z-index: 50; right: 22px; bottom: 22px; width: min(410px, calc(100vw - 30px)); max-height: min(560px, calc(100vh - 44px)); border: 1px solid var(--line); border-radius: 19px; background: white; box-shadow: 0 24px 70px rgba(22,32,58,.22); display: flex; flex-direction: column; transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; transition: .25s ease; }.upload-drawer.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.drawer-head { min-height: 68px; padding: 13px 17px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }.drawer-head strong,.drawer-head span { display: block; }.drawer-head span { color: var(--muted); font-size: 11px; margin-top: 3px; }.upload-list { overflow: auto; padding: 8px; }.upload-item { padding: 12px; border-radius: 12px; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; }.upload-item:hover { background: var(--surface-soft); }.upload-item-icon { width: 36px; height: 36px; border-radius: 10px; display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:800; }.upload-info { min-width: 0; }.upload-name { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700; }.upload-status { display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin:5px 0; }.upload-progress { height:4px;border-radius:99px;background:#e6eaf2;overflow:hidden; }.upload-progress span { display:block;height:100%;background:var(--primary);transition:width .15s; }.upload-item.done .upload-progress span { background:var(--success); }.upload-item.failed .upload-progress span { background:var(--danger); }.upload-cancel { border:0;background:none;color:var(--muted);font-size:18px; }.clear-button { border:0;border-top:1px solid var(--line);background:white;color:var(--primary);min-height:46px;font-weight:700; }
.modal { width: min(480px, calc(100vw - 28px)); border: 0; border-radius: 20px; padding: 0; color: var(--ink); box-shadow: 0 28px 90px rgba(16,26,49,.28); }.modal::backdrop { background: rgba(18,28,48,.42); backdrop-filter: blur(5px); }.modal form { padding: 0; }.modal-head { min-height: 73px; padding: 16px 19px; display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line); }.modal-head strong,.modal-head span { display:block; }.modal-head span { margin-top:3px;color:var(--muted);font-size:11px;max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.modal label { display:grid;gap:8px;padding:24px 20px 10px;color:var(--muted);font-size:12px;font-weight:700; }.modal input { height:46px;border:1px solid var(--line);border-radius:12px;padding:0 13px;outline:0;color:var(--ink); }.modal input:focus { border-color:#aab8fa;box-shadow:0 0 0 4px rgba(79,109,245,.08); }.modal-actions { padding: 16px 20px 20px; display:flex;justify-content:flex-end;gap:9px; }
.preview-modal { width:min(1000px,calc(100vw - 28px)); }.preview-body { min-height: 360px; max-height: 68vh; display:grid;place-items:center;background:#eef1f5;overflow:auto; }.preview-body img,.preview-body video { max-width:100%;max-height:68vh; }.preview-body audio { width:min(600px,90%); }.preview-body iframe { width:100%;height:68vh;border:0;background:white; }.preview-body pre { width:100%;min-height:360px;margin:0;padding:24px;background:#172033;color:#e9eef8;overflow:auto;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;word-break:break-word; }
.confirm-modal { width:min(420px,calc(100vw - 28px));text-align:center;padding:28px 20px 10px; }.confirm-symbol { width:54px;height:54px;border-radius:18px;margin:0 auto;display:grid;place-items:center;background:#fff0f2;color:var(--danger);font-size:27px;font-weight:900; }.confirm-modal h2 { margin:17px 0 7px;font-size:20px; }.confirm-modal p { margin:0;color:var(--muted);font-size:13px; }.confirm-modal .modal-actions { justify-content:center; }
.toast-stack { position:fixed;z-index:100;top:20px;right:20px;display:grid;gap:9px; }.toast { min-width:280px;max-width:400px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:white;box-shadow:0 15px 45px rgba(20,31,56,.16);display:flex;gap:10px;align-items:flex-start;animation:toast-in .22s ease; }.toast-icon { width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#e8f8ef;color:var(--success);font-size:12px;font-weight:900; }.toast.error .toast-icon { background:#fff0f2;color:var(--danger); }.toast strong,.toast span { display:block; }.toast strong { font-size:12px; }.toast span { margin-top:3px;color:var(--muted);font-size:11px;line-height:1.4; }
@keyframes toast-in { from { transform:translateY(-10px);opacity:0; } }
.sidebar-scrim { display:none; }
@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 1fr; }.main-area { grid-column:1; }.sidebar { transform:translateX(-105%);transition:.23s ease;box-shadow:20px 0 70px rgba(22,32,58,.18); }.sidebar.open { transform:translateX(0); }.sidebar-scrim { position:fixed;z-index:19;inset:0;background:rgba(18,28,48,.35); }.sidebar-scrim.open { display:block; }.mobile-menu { display:grid; }.topbar { padding:0 20px; }.search-box { flex:1;width:auto; }.content-wrap { width:min(100% - 40px,1240px); }.file-header,.file-row { grid-template-columns:minmax(220px,1fr) 100px 130px 105px; }
}
@media (max-width: 720px) {
  .topbar { height:68px;padding:0 14px;gap:10px; }.shared-chip { display:none; }.search-box { height:40px; }.content-wrap { width:calc(100% - 24px);padding:24px 0 60px; }.page-heading { align-items:flex-start;margin-bottom:18px; }.page-heading p { font-size:12px;line-height:1.5; }.heading-actions .secondary-button { display:none; }.heading-actions .primary-button { min-width:44px;padding:0 12px; }.drop-zone { min-height:275px;flex-direction:column;gap:10px;text-align:center;padding:22px 16px; }.drop-visual { width:76px;height:70px; }.drop-copy { min-width:0; }.drop-actions { margin-top:7px; flex-wrap:wrap; justify-content:center; width:100%; }.drop-actions > button { flex:1 1 132px; max-width:210px; }.mobile-gallery-button { display:inline-flex; }.mobile-picker-note { display:block; }.files-panel { margin-top:17px;border-radius:16px; }.panel-toolbar { padding:10px; }.toolbar-right select { display:none; }.file-header { display:none; }.file-row { grid-template-columns:minmax(0,1fr) auto;min-height:68px;padding:9px 11px;column-gap:7px; }.file-row .file-cell { display:none; }.file-actions { opacity:1; }.file-actions .optional { display:none; }.file-icon { width:38px;height:38px;border-radius:11px; }.file-main { gap:10px; }.file-name { font-size:13px; }.grid-view.file-list { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px; }.grid-view .file-row { min-height:155px;padding:12px; }.grid-view .file-actions { flex-wrap:wrap; }.upload-drawer { right:8px;bottom:8px;width:calc(100vw - 16px);max-height:70vh; }.toast-stack { top:10px;right:10px;left:10px; }.toast { min-width:0;max-width:none; }.preview-body,.preview-body pre { min-height:300px; }.preview-body iframe { height:62vh; }
}

/* v1.1 file previews */
.admin-nav { text-decoration:none; }
.admin-lock { margin-left:auto; font-size:11px; opacity:.55; }
.file-thumbnail { position:relative; flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; overflow:hidden; border-radius:12px; background:#eef1ff; color:var(--primary); font-size:10px; font-weight:900; text-transform:uppercase; }
.file-thumbnail.folder { background:#fff4d7; color:#d59617; font-size:22px; }
.file-thumbnail.image { background:#e8f8ef; color:#168f61; }
.file-thumbnail.video { background:#f5eaff; color:#8a4cc7; }
.file-thumbnail.audio { background:#fff0f2; color:#d44c62; }
.file-thumbnail.pdf { background:#ffecef; color:#d83a4f; }
.file-thumbnail.archive { background:#e9f7fb; color:#187f9c; }
.file-thumbnail img,.file-thumbnail video { width:100%; height:100%; display:block; object-fit:cover; }
.file-thumbnail .thumb-fallback { display:grid; width:100%; height:100%; place-items:center; }
.video-mark { position:absolute; right:4px; bottom:4px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(18,25,42,.72); font-size:8px; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.grid-view .file-thumbnail { width:100%; height:112px; border-radius:12px; }
.grid-view .file-main { width:100%; }
.grid-view .file-main button { padding:0 2px; }
.grid-view .file-thumbnail.folder { font-size:44px; }
.grid-view .file-thumbnail:not(.media) .thumb-fallback { font-size:18px; }
@media (max-width:620px) {
  .file-thumbnail { width:42px; height:42px; }
  .grid-view .file-thumbnail { width:100%; height:92px; }
  .grid-view .file-row { min-height:205px; }
}