/* 0LL1E CLOUD — Brand UI v0.3. Responsive, no external fonts or scripts. */
:root {
  color-scheme: dark;
  --bg:#090e17; --canvas:#0c121e; --sidebar:#0b111c;
  --panel:#111c2b; --panel-raised:#172336; --panel-hover:#1a2a40;
  --border:#263449; --border-soft:#1c2a3b;
  --text:#f2f6fc; --muted:#98a9c0; --dim:#647a97;
  --orange:#ff7a00; --orange-light:#ff9b3b; --blue:#0084ff;
  --blue-bright:#4cadff; --green:#58dfae; --violet:#b19bff;
  --shadow:0 24px 65px rgba(0,0,0,.24);
  --curve:18px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; min-height:100%; font:15px/1.5 Inter,"Segoe UI",ui-sans-serif,system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); }
body.drawer-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.55; cursor:not-allowed; }
:focus-visible { outline:2px solid var(--blue-bright); outline-offset:3px; }
::selection { background:#005caf; color:white; }
.i { width:19px; height:19px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
.icon-symbols { width:0; height:0; position:absolute; overflow:hidden; pointer-events:none; }
.orange { color:var(--orange); } .blue { color:var(--blue); }

/* App chrome */
.shell { display:flex; min-height:100vh; }
.sidebar { position:sticky; left:0; top:0; width:260px; flex:0 0 260px; height:100vh; height:100dvh; display:flex; flex-direction:column; background:linear-gradient(180deg,#0d1420 0%,#090f19 100%); border-right:1px solid #263348; padding:25px 16px 17px; z-index:40; overflow-y:auto; scrollbar-width:thin; }
.sidebar-head { display:flex; align-items:center; justify-content:space-between; min-height:65px; padding:0 6px 22px; border-bottom:1px solid var(--border-soft); }
.brand { display:flex; align-items:center; gap:9px; min-width:0; }
.brand-avatar { width:49px; height:53px; flex:0 0 49px; display:flex; justify-content:center; align-items:center; border-radius:13px; background:radial-gradient(circle at 40% 32%,#252e3a,#101723 82%); border:1px solid #293648; overflow:hidden; }
.brand-avatar img { width:44px; height:53px; object-fit:contain; object-position:bottom; }
.brand strong { font-size:19px; line-height:1; font-weight:900; letter-spacing:1.2px; white-space:nowrap; }
.brand-blue { color:var(--blue); }.brand-cloud { font-size:9px; color:var(--orange); letter-spacing:.8px; vertical-align:middle; }
.brand small { display:block; margin-top:8px; color:#8299b9; font-size:8px; font-weight:850; letter-spacing:1.75px; white-space:nowrap; }
.sidebar-section { margin:31px 15px 11px; color:#6987ae; font-size:10px; letter-spacing:2px; font-weight:900; }
.admin-section { margin-top:30px; }
.nav-items { display:flex; flex-direction:column; gap:5px; }
.nav-item { display:flex; align-items:center; gap:13px; min-height:46px; border-radius:11px; padding:11px 13px; color:#9fb1c9; font-size:13px; font-weight:650; border:1px solid transparent; transition:color .16s,background .16s,border-color .16s; }
.nav-item .i { width:19px; height:19px; stroke-width:1.9; }
.nav-item:hover { color:#fff; background:#172439; }
.nav-item.active { color:#fff; border-color:#344158; background:linear-gradient(95deg,#212c3f,#162031); }
.nav-item.active .i { color:var(--orange); }
.sidebar-spacer { flex:1; min-height:26px; }
.side-ollie { display:flex; align-items:flex-end; gap:4px; background:linear-gradient(125deg,#0e2335,#111b2a 58%,#152335); border:1px solid #24344b; border-radius:16px; min-height:111px; margin:0 2px 18px; padding:10px 6px 0 1px; overflow:hidden; }
.side-ollie img { width:106px; height:111px; object-fit:contain; object-position:bottom; margin-left:-8px; }
.side-ollie span { align-self:center; min-width:0; }
.side-ollie b { display:block; font-size:12px; line-height:1.2; color:#fff; }
.side-ollie small { display:block; margin-top:7px; color:#8ab6d1; font-size:9px; line-height:1.4; }
.sidebar-foot { display:flex; align-items:center; gap:12px; padding:16px 9px 2px; border-top:1px solid var(--border-soft); }
.sidebar-foot strong { color:var(--green); font-size:9px; letter-spacing:1px; font-weight:850; display:block; }
.sidebar-foot small { color:#7286a1; font-size:10px; display:block; margin-top:7px; }
.live-pulse { display:inline-block; flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 13px #58dfae88; }
.main { display:flex; flex:1; min-width:0; min-height:100vh; flex-direction:column; }
.topbar { min-height:75px; padding:12px 38px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--border-soft); background:#0d1522; }
.topbar-left,.topbar-right { display:flex; align-items:center; gap:12px; min-width:0; }
.topline { display:flex; align-items:center; gap:11px; color:#93a9c8; font-size:10px; font-weight:850; letter-spacing:1.8px; white-space:nowrap; }
.crumb-separator { margin:0 4px; color:#455a75; }
.private-tag { color:var(--green); border:1px solid #2a4d4b; background:#112a29; border-radius:30px; padding:6px 11px; font-size:10px; font-weight:800; letter-spacing:1px; display:flex; align-items:center; gap:6px; }
.private-tag .i { width:13px; height:13px; }
.user-avatar,.user-list-avatar { display:grid; place-items:center; border-radius:12px; flex:0 0 auto; width:37px; height:37px; font-size:15px; font-weight:900; color:#fff; background:linear-gradient(140deg,#005aa9,#0084ff); border:1px solid #3e80d5; }
.account-name strong,.account-name small { display:block; } .account-name strong { font-size:12px; } .account-name small { color:var(--dim); font-size:10px; margin-top:1px; }
.icon-button { display:grid; place-items:center; height:39px; width:39px; border:1px solid var(--border); color:#b5c7dd; background:#111d2d; border-radius:10px; padding:0; }
.icon-button:hover { color:#fff; border-color:#47607b; background:#192b42; }
.icon-button .i { width:19px; height:19px; }
.mobile-brand,.menu-toggle,.close-sidebar,.mobile-bottom,.mobile-backdrop { display:none; }
.content { flex:1; width:min(1450px,100%); margin:0 auto; padding:35px 38px 74px; }
footer { padding:20px 38px; border-top:1px solid var(--border-soft); color:#7085a0; font-size:11px; display:flex; align-items:center; gap:8px; }
.footer-dot { color:var(--orange); } .footer-end { margin-left:auto; }

/* Buttons and microcomponents */
.primary,.secondary-button,.mini-button,.danger-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:11px; text-align:center; font-weight:850; line-height:1.2; white-space:nowrap; transition:filter .16s,transform .16s,background .16s,border-color .16s; }
.primary { border:1px solid var(--orange); background:var(--orange); color:#10131b; padding:13px 17px; font-size:13px; }
.primary:hover { filter:brightness(1.13); transform:translateY(-1px); }.primary .i { width:17px; height:17px; stroke-width:2.3; }
.secondary-button { border:1px solid #435975; color:#e5f0fd; background:#1a2a3c; padding:13px 17px; font-size:13px; }
.secondary-button:hover { border-color:#6d8daf; background:#243950; }
.mini-button { border:1px solid #3d5b7a; color:#d3eaff; background:#17283a; padding:10px 13px; font-size:12px; }
.mini-button .i { width:15px; height:15px; }.mini-button:hover { border-color:var(--blue-bright); background:#1e3b55; }
.danger-button { color:#ffc4c4; background:#3e1a21; border:1px solid #71404b; padding:10px 13px; font-size:12px; }
.danger-button:hover { border-color:#ff9cae; }.large { width:100%; padding:16px 20px; font-size:14px; justify-content:center; margin-top:24px; }
.eyebrow { display:flex; align-items:center; gap:9px; color:#72b7ff; font-size:10px; font-weight:900; letter-spacing:2.2px; text-transform:uppercase; }
.eyebrow a:hover { color:white; }.eyebrow-line { width:20px; height:2px; background:var(--orange); }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:14px 0 36px; }
.page-heading h1 { font-size:clamp(32px,4vw,49px); line-height:1.12; letter-spacing:-1.9px; margin:12px 0 10px; font-weight:850; overflow-wrap:anywhere; }
.page-heading p { color:var(--muted); margin:0; font-size:14px; line-height:1.7; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:35px 0 18px; }
.section-heading h2 { font-size:23px; letter-spacing:-.7px; line-height:1.2; margin:9px 0 0; font-weight:850; }
.section-heading h2 span { color:#7790b1; font-weight:550; }.section-meta { color:var(--dim); font-size:12px; }

/* Dashboard hero */
.welcome-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr); isolation:isolate; overflow:hidden; min-height:313px; background:linear-gradient(112deg,#172439 0%,#142239 49%,#0c2344 100%); border:1px solid #30435b; border-radius:21px; box-shadow:0 18px 50px #0002; }
.welcome-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 81% 51%,#0084ff2f,transparent 43%),radial-gradient(circle at 42% 0%,#ff7a000c,transparent 49%); z-index:-1; }
.hero-copy { padding:44px 12px 42px 37px; position:relative; z-index:2; }
.hero-copy h1 { font-size:clamp(34px,4.5vw,58px); font-weight:920; line-height:1.07; letter-spacing:-2.5px; margin:19px 0 14px; }
.hero-copy h1 span { color:#b7cbe3; }.hero-copy h1 .orange { color:var(--orange); }
.hero-copy p { color:#a5bbd5; font-size:13px; max-width:510px; line-height:1.75; margin:0; }
.hero-copy p strong { color:#e9f4ff; font-weight:750; }.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.hero-visual { position:relative; min-width:0; display:flex; align-items:end; justify-content:center; }
.hero-visual img { display:block; max-width:440px; width:min(112%,440px); height:320px; object-fit:contain; object-position:bottom; position:relative; z-index:2; filter:drop-shadow(0 14px 23px #0007); margin-bottom:-8px; }
.orb { position:absolute; display:block; border-radius:50%; pointer-events:none; }.orb-one { width:270px;height:270px;right:11%;top:8%;background:#0074fc25;box-shadow:0 0 85px #0084ff25; }.orb-two { width:370px;height:370px;border:1px solid #3263944a;right:-9%;top:-25%; }
.hero-tag { position:absolute; right:20px; top:22px; display:flex; align-items:center; gap:8px; z-index:3; padding:9px 11px; font-size:9px; color:#bfe6ff; letter-spacing:1px; font-weight:850; border-radius:10px; background:#122840c9; border:1px solid #3b5c7f; }
.hero-chip { position:absolute; z-index:3; right:19px; bottom:19px; display:flex;align-items:center;gap:8px; color:var(--green); background:#102a31e0; border:1px solid #376867; padding:9px 12px; border-radius:10px; font-size:9px;font-weight:800;letter-spacing:1px; }
.hero-chip .i { width:15px;height:15px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.metrics article { position:relative; border:1px solid var(--border); background:var(--panel); padding:18px 19px 17px; border-radius:16px; min-width:0; min-height:151px; }
.metrics article small { color:#90a5c0; font-size:9px; font-weight:850; letter-spacing:1.35px; display:block; margin:14px 0 1px; }
.metrics article strong { color:#fff; display:block; font-size:34px; line-height:1.35; font-weight:850; }
.metrics article span { color:#8297b2; font-size:11px; }
.metric-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; }
.metric-icon .i { width:17px; height:17px; }.orange-icon { color:#ffad65; background:#4b2814; }.blue-icon { color:#59baff; background:#133b5c; }.violet-icon { color:#c6b6ff; background:#322c55; }.green-icon { color:#71eac2; background:#123f38; }
.folder-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.folder-card { display:flex; flex-direction:column; min-width:0; min-height:155px; padding:19px; background:var(--panel); border:1px solid var(--border); border-radius:17px; transition:border-color .2s,transform .2s,background .2s; }
.folder-card:hover { background:var(--panel-raised); border-color:#567491; transform:translateY(-3px); }
.folder-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:21px; }
.folder-art { height:45px; width:45px; border-radius:14px; display:grid; place-items:center; background:#4b2c17; color:#ff9b45; }.folder-art .i { width:23px;height:23px;stroke-width:1.7; }
.folder-art.art-blue { background:#123953;color:#78c5ff; }.folder-art.art-violet { background:#302c54;color:#bdaaff; }.folder-art.art-green { background:#14433d;color:#77efc9; }
.open-arrow { color:#6e87a4; width:16px; height:16px; transform:rotate(-45deg); transition:transform .2s,color .2s; }.folder-card:hover .open-arrow { transform:translate(2px,-2px) rotate(-45deg); color:var(--orange); }
.folder-card strong { font-size:14px; font-weight:790; overflow-wrap:anywhere; }.folder-card-sub { color:#8b9eb9; font-size:11px; margin-top:6px; }
.files-heading { margin-top:39px; }
.panel { border:1px solid var(--border); border-radius:17px; background:var(--panel); overflow:hidden; }
.file-row,.share-card { display:flex; align-items:center; gap:15px; padding:17px 20px; border-bottom:1px solid var(--border-soft); }
.file-row:last-child,.share-card:last-child { border-bottom:0; }
.file-icon { display:grid; place-items:center; width:43px; height:43px; border:1px solid #365574; border-radius:12px; background:#14334b; color:#8dd0ff; flex:0 0 43px; }
.file-icon .i { width:19px; height:19px; }.file-name { flex:1; min-width:0; }.file-name strong { display:block; color:#edf5ff; font-size:13px; overflow-wrap:anywhere; font-weight:740; }.file-name small { display:block; color:#8ca0ba; font-size:11px; margin-top:5px; overflow-wrap:anywhere; }.middle-dot { color:var(--orange); margin:0 5px; }
.right { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.right form { margin:0; }.status { color:#f0ca9b; background:#4b311b; border-radius:99px; padding:6px 10px; font-size:10px; white-space:nowrap; }.status.ok { color:#73ecc0; background:#16433b; }
.empty-state { display:flex; align-items:center; gap:23px; padding:27px 30px; min-height:140px; }.empty-state img { width:154px; height:98px; object-fit:contain; }.empty-state strong { display:block; font-size:14px; }.empty-state p { color:var(--muted); font-size:12px; margin:5px 0 0; }.empty-card { grid-column:1/-1; padding:22px; border:1px dashed var(--border); border-radius:12px;color:var(--muted); }

/* Other screens */
.form-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(245px,.58fr); gap:22px; max-width:1030px; align-items:start; }
.form-panel { background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:31px; max-width:770px; }
.form-panel.centered { margin:55px auto; max-width:620px; }
.form-panel h1 { letter-spacing:-1.2px; margin:18px 0 8px; font-size:32px; overflow-wrap:anywhere; }
.form-field { margin-bottom:18px; }
.form-panel form label,.login-form label { display:block; margin:0 0 8px; color:#c5d4e7; font-size:12px; font-weight:750; }
.form-panel form>label { margin-top:20px; }.form-panel input,.form-panel select,.form-panel textarea,.login-form input { width:100%; max-width:100%; color:white; background:#0d1725; border:1px solid #374962; border-radius:11px; padding:13px 14px; min-height:47px; outline:none; }
.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus,.login-form input:focus { border-color:#5eabfc; box-shadow:0 0 0 3px #0084ff18; }
.form-panel select { color-scheme:dark; }.form-panel textarea { min-height:105px; resize:vertical; }.form-panel input[type=file] { padding:12px; color:#a8bdd7; cursor:pointer; }.form-panel input[type=file]::file-selector-button { border:0;border-radius:7px;padding:8px 11px;margin-right:11px;background:#294968;color:#fff;cursor:pointer; }
.helper { color:#8fa2bb; font-size:12px; line-height:1.6; margin-top:10px; display:block; }.helper ul { padding-left:18px; }
.field-error,.errorlist { color:#ffadbb; font-size:12px; line-height:1.6; }.errorlist { padding:0 0 0 18px; }
.form-illustration { border:1px solid #2d4058; background:radial-gradient(circle at 50% 38%,#154370,#102039 54%,#111a29 90%); text-align:center; padding:27px 20px; border-radius:18px; overflow:hidden; }
.form-illustration .eyebrow { justify-content:center; }.form-illustration img { display:block; width:min(100%,330px); height:255px; object-fit:contain; margin:5px auto 0; }.form-illustration strong { display:block; font-size:16px; }.form-illustration p { font-size:12px; color:#9db3d0; margin:5px 0 0; }
.inline-notice,.info-banner { display:flex;align-items:flex-start;gap:13px;padding:17px 18px;border-radius:13px;border:1px solid #375e67;background:#102b36;color:#c8eaff;line-height:1.6;font-size:12px; }
.inline-notice { margin-top:20px; }.inline-notice .i,.info-banner .i { color:#66d9e9;flex:0 0 20px;margin-top:1px; }.inline-notice p,.info-banner p { color:#a4becb; margin:3px 0 0; }.info-banner strong { font-size:13px; }.info-banner.warning { background:#302519;border-color:#6c5439; }.info-banner.warning .i { color:#ffb971; }.info-banner.warning p { color:#e0c6a8; }
.warning-icon { background:#3c2c20; border-color:#72533a; color:#ffc38e; }
.user-list-avatar { width:43px;height:43px;flex:0 0 43px; }
.share-file-icon { color:#76e7c3;background:#183d38;border-color:#357163; }
.share-card { align-items:flex-start; }.share-card .right { align-self:center; }.share-link { display:flex; align-items:center; gap:9px; min-width:0; width:max-content; max-width:100%; margin-top:12px; border:1px solid #32465d; padding:7px 7px 7px 12px; background:#0c1826; border-radius:9px; }
.share-link>span { display:block; max-width:300px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8fb8de; font-size:11px; }.copy-link { display:flex;gap:5px;align-items:center;background:#213650;border:1px solid #3c5b78;border-radius:7px;padding:6px 9px;color:#d3eafd;font-size:10px;white-space:nowrap; }.copy-link:hover { border-color:var(--blue); }.copy-link .i { width:13px;height:13px; }
.flash-area { margin-bottom:20px; }.flash { padding:13px 17px; color:#d3ebff; font-size:13px; border:1px solid #415e73; border-radius:11px; background:#183047; margin-bottom:9px; }.flash.error { color:#ffc4c9; border-color:#904953; background:#3e2029; }.flash.success { color:#a5f8d5; border-color:#396b59; background:#163b32; }

/* Auth flows (login and MFA) */
.auth-page { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:radial-gradient(circle at 86% 32%,#132b47 0%,transparent 45%),var(--bg); }
.auth-topbar { display:flex; justify-content:space-between; align-items:center; min-height:78px; padding:17px clamp(20px,4.5vw,75px); border-bottom:1px solid var(--border-soft); }
.auth-brand { display:flex; align-items:center; gap:9px; font-weight:900; letter-spacing:1.1px; font-size:21px; }
.auth-brand>span:not(.brand-logo-pill) { color:var(--blue); }.auth-brand b { color:var(--orange); font-size:12px; margin-left:3px; }
.brand-logo-pill { font-style:italic; border-radius:11px; color:#101722; background:var(--orange); display:grid; place-items:center; height:37px;width:37px;font-size:27px; }
.auth-top-status { display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:2px;font-weight:850;color:#8ca5c3; }.auth-top-status .i { margin-left:6px;color:#62dcb7;width:18px;height:18px; }
.auth-main { width:100%; max-width:1340px; flex:1; padding:48px clamp(18px,4.5vw,75px) 40px; margin:0 auto; display:flex;flex-direction:column;justify-content:center; }
.auth-footer { border-top:1px solid var(--border-soft);justify-content:space-between;padding:16px clamp(20px,4.5vw,75px); }
.login-layout { min-height:620px; max-width:1160px; width:100%; margin:0 auto; display:grid;grid-template-columns:1fr .93fr;overflow:hidden;border:1px solid #2d4058;border-radius:22px;background:#121c2c;box-shadow:var(--shadow); }
.login-card { padding:clamp(30px,4.4vw,64px); display:flex; flex-direction:column; justify-content:center; min-width:0; }
.login-card h1 { font-size:clamp(43px,5vw,67px); line-height:1.06; letter-spacing:-3px; font-weight:900; margin:23px 0 18px; }
.login-card h1 em { font-style:normal;color:var(--orange); }.login-subtitle { font-size:14px;color:#9aacc5;line-height:1.8;max-width:400px;margin:0 0 20px; }
.login-form { margin-top:15px; }.login-form label { margin-top:17px; }.login-form input { padding:15px 16px; font-size:14px; }.login-form input::placeholder { color:#678098; }.login-form button { justify-content:space-between; }
.login-note { display:flex;align-items:center;gap:9px;margin-top:29px;color:#8ba8c1;font-size:11px; }.login-note .i { width:16px;height:16px;color:var(--green); }
.login-art { position:relative; min-width:0; overflow:hidden; display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 54% 45%,#095ebc88,transparent 45%),linear-gradient(145deg,#10304b,#0c2442 58%,#111c32); }
.login-grid { position:absolute;inset:0;opacity:.16;background-image:linear-gradient(#78b6f522 1px,transparent 1px),linear-gradient(90deg,#78b6f522 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,transparent,#000 23%,#000 70%,transparent); }
.login-orbit { position:absolute; width:420px;height:420px;border-radius:50%;border:1px solid #4389ce45;box-shadow:0 0 100px #0084ff22,inset 0 0 95px #0084ff1b;top:12%;left:calc(50% - 210px); }
.login-orbit:after { content:"";position:absolute;inset:45px;border-radius:50%;border:1px solid #4389ce35; }
.login-art-top { position:absolute;top:27px;left:27px;right:25px;display:flex;gap:9px;align-items:center;font-size:10px;color:#a5c7e2;font-weight:850;letter-spacing:1.7px; }.login-art-top>span:last-child { margin-left:auto; }.art-dot { display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 10px #58dfae; }
.login-ollie { width:min(98%,520px);height:440px;object-fit:contain;object-position:center bottom;position:relative;z-index:2;filter:drop-shadow(0 20px 25px #0008);margin-top:-24px; }
.login-art-bottom { position:absolute;bottom:26px;left:33px;right:29px;z-index:3;text-shadow:0 2px 10px #000a; }.art-eyebrow { display:block;color:#8cc6ff;font-weight:850;font-size:9px;letter-spacing:2px; }.login-art-bottom h2 { font-size:clamp(32px,3.7vw,48px);margin:10px 0 4px;line-height:1.06;letter-spacing:-1.7px; }.login-art-bottom h2>span { color:var(--orange); }.login-art-bottom p { margin:5px 0 0;font-size:12px;color:#c5d8ed; }.mfa-art .login-ollie { width:min(93%,430px);height:455px;object-position:bottom; }.qr { display:block;background:#fff;border-radius:15px;padding:12px;width:204px;height:204px;object-fit:contain;margin:8px 0 14px; }

@media (max-width:1230px) {
  .sidebar { width:238px;flex-basis:238px; }.content { padding-left:28px;padding-right:28px; }
  .hero-copy h1 { font-size:clamp(32px,4vw,47px); }.hero-visual img { height:302px; }
  .topbar { padding-left:28px;padding-right:28px; }
  .folder-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1050px) {
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .welcome-hero { grid-template-columns:minmax(0,1fr) 280px; }
  .hero-copy { padding:32px 0 35px 27px; }.hero-visual img { width:320px; height:288px; }
  .hero-tag { font-size:8px; }.hero-chip { display:none; }
  .account-name,.private-tag { display:none; }
  .login-layout { min-height:590px; }
}
@media (max-width:860px) {
  .shell { display:block; }.sidebar { position:fixed;top:0;left:0; width:min(320px,87vw);height:100dvh; z-index:80;transform:translateX(-104%);transition:transform .24s ease;box-shadow:25px 0 60px #0008; }.sidebar.sidebar-open { transform:translateX(0); }
  .close-sidebar,.menu-toggle { display:grid; }.mobile-backdrop:not([hidden]) { display:block;position:fixed;inset:0;background:#000b;z-index:70;backdrop-filter:blur(3px); }
  .main { min-height:100dvh; }.topbar { position:sticky;top:0;z-index:30;min-height:66px;padding:10px 20px;box-shadow:0 3px 16px #0002; }
  .topline { display:none; }.mobile-brand { display:block; font-size:18px; font-weight:950;letter-spacing:1.3px;white-space:nowrap; }.mobile-brand span { color:var(--blue); }.mobile-brand b { color:var(--orange);font-size:11px; }.content { padding:23px 20px 110px; }
  .mobile-bottom { display:flex;align-items:stretch;justify-content:space-around;gap:6px;position:fixed;bottom:0;left:0;right:0;z-index:29;min-height:67px;padding:5px max(12px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#111b2bee;backdrop-filter:blur(20px);border-top:1px solid #32435b; }
  .mobile-bottom a,.mobile-bottom button { min-width:62px;border:0;background:transparent;color:#899bb4;font-size:10px;font-weight:650;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px;padding:6px 8px;border-radius:10px; }
  .mobile-bottom a.active { color:var(--orange);background:#3b291e; }.mobile-bottom .i { width:21px;height:21px; }
  footer { padding:18px 20px 96px; }.footer-end { display:none; }
  .form-layout { grid-template-columns:1fr; }.form-illustration { display:none; }
  .login-layout { grid-template-columns:1fr 0.85fr; }.login-card { padding:35px; }
  .login-card h1 { font-size:45px; }.login-ollie { height:390px; }
}
@media (max-width:650px) {
  .content { padding:20px 15px 102px; }.topbar { padding:10px 14px; }.topbar-right { gap:8px; }.user-avatar { width:32px;height:32px;border-radius:9px;font-size:13px; }.logout { height:35px;width:35px; }
  .welcome-hero { grid-template-columns:1fr; min-height:0; }
  .hero-copy { padding:26px 23px 0; }.hero-copy h1 { font-size:clamp(31px,8vw,44px);letter-spacing:-1.6px;margin:15px 0 12px; }.hero-copy p { font-size:12px; }
  .hero-actions { margin-top:19px; }.hero-actions .primary,.hero-actions .secondary-button { padding:12px 13px; font-size:12px; }
  .hero-visual { min-height:185px; }.hero-visual img { width:min(87%,330px); height:220px; margin-bottom:-9px; }.hero-tag { display:none; }
  .orb-one { width:215px;height:215px;left:calc(50% - 108px);top:-7px; }
  .section-heading { margin:27px 0 14px; }.section-heading h2 { font-size:20px; }.section-meta { display:none; }
  .metrics { gap:9px; }.metrics article { padding:15px; min-height:126px; border-radius:13px; }.metrics article strong { font-size:29px; }.metrics article small { font-size:9px;margin-top:11px;letter-spacing:.8px; }.metrics article span { font-size:10px; }.metric-icon { width:30px;height:30px; }
  .folder-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }.folder-card { padding:13px;min-height:143px;border-radius:13px; }.folder-card-top { margin-bottom:16px; }.folder-art { width:40px;height:40px; }.folder-card strong { font-size:12px; }.folder-card-sub { font-size:10px; }
  .page-heading { flex-direction:column;align-items:flex-start; gap:16px; margin:8px 0 25px; }.page-heading h1 { font-size:35px;letter-spacing:-1.4px; }.page-heading p { font-size:12px; }.page-heading>.primary { width:100%; }
  .file-row,.share-card { padding:13px 12px;gap:10px; flex-wrap:wrap; }.file-icon { flex:0 0 37px;width:37px;height:37px;border-radius:9px; }.file-name strong { font-size:12px; }.file-name small { font-size:10px; }
  .file-row .mini-button { font-size:11px; padding:9px; }.file-row .mini-button span { display:none; }.right { width:100%;justify-content:flex-end; }
  .share-card>.right { width:100%; }.share-card .file-name { flex-basis:calc(100% - 50px); }.share-link { width:100%; }.share-link>span { flex:1;max-width:none; }
  .empty-state { display:flex;flex-direction:column;text-align:center;gap:6px;padding:23px 17px; }.empty-state img { width:130px;height:81px; }.empty-state p { font-size:11px; }
  .form-panel { padding:20px;border-radius:14px; }.form-panel.centered { margin:15px auto; }.auth-topbar { padding:12px 18px;min-height:66px; }.auth-brand { font-size:19px; }.auth-top-status { font-size:0;gap:4px; }.auth-top-status .i { width:16px;height:16px; }.auth-main { padding:23px 14px 30px; }
  .login-layout { grid-template-columns:1fr;min-height:0; }.login-card { padding:30px 24px 31px; }.login-card h1 { font-size:clamp(39px,11vw,52px);letter-spacing:-2px; }.login-subtitle { font-size:13px; }.login-art { display:none; }.auth-footer { padding:16px 18px;gap:8px;font-size:10px;flex-wrap:wrap; }
}
@media (max-width:380px) {
  .hero-actions { flex-direction:column; }.hero-actions>* { width:100%; }.welcome-hero .eyebrow { font-size:9px;letter-spacing:1.5px; }
  .metrics article { padding:12px; }.metrics article small { font-size:8px; }.folder-art { width:36px;height:36px; }
  .mobile-brand { font-size:16px; }.mobile-brand b { font-size:9px; }
}
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }

/* v0.3: Consistent 0 orange / 1 blue everywhere. */
.brand-orange { color:#FF7A00 !important; }
.brand-blue { color:#0084FF !important; }
.brand-white { color:#FFFFFF !important; }
.account-section { margin-top:22px; }
.upload-progress { display:grid;gap:11px;margin-top:19px;padding:18px;border-radius:14px;border:1px solid #36516e;background:#0b1b2c; }
.upload-progress[hidden],#upload-error[hidden] { display:none !important; }
.upload-progress-head {display:flex;align-items:center;justify-content:space-between;gap:15px;color:#d9eaff;font-size:13px; }
#upload-progressbar {display:block;width:100%;height:12px;border:0;border-radius:8px;overflow:hidden;accent-color:#FF7A00;background:#1b3149;}
#upload-progressbar::-webkit-progress-bar {background:#1b3149;border-radius:8px;}
#upload-progressbar::-webkit-progress-value {background:linear-gradient(90deg,#ff7a00,#0084ff);border-radius:8px;transition:width .12s;}
#upload-progressbar::-moz-progress-bar {background:#0084FF;border-radius:8px;}
#upload-bytes {color:#91aecd;}
#upload-cancel {justify-self:start;padding:10px 14px;}
@media (max-width:650px) { .upload-progress {padding:15px;} #upload-cancel {width:100%;} }

/* v0.3.1: Admin-only storage overview, responsive without JavaScript. */
.storage-panel { border:1px solid #2a3c54; border-radius:17px; background:linear-gradient(155deg,#15243a 0%,#101a2a 85%); padding:25px 27px; margin:25px 0 28px; }
.storage-title-row { display:flex; align-items:end; justify-content:space-between; gap:16px; }
.storage-title-row h2 { margin:8px 0 0; font-size:23px; letter-spacing:-.65px; }
.storage-title-row h2 span { color:#9db5d3; }
.storage-refresh-note { font-size:11px; color:#8daccb; white-space:nowrap; }
.storage-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; margin:22px 0 20px; }
.storage-summary>div { min-width:0; padding:12px 15px; background:#0c1828;border:1px solid #2b415c;border-radius:11px; }
.storage-summary small { color:#8da8c8;font-size:9px;letter-spacing:1.3px;font-weight:850;display:block; }
.storage-summary strong { display:block;font-size:clamp(18px,2.3vw,28px);line-height:1.2;margin-top:11px;overflow-wrap:anywhere; }
.storage-summary .storage-free { color:#63e3c2; }
.storage-meter-line { display:flex;justify-content:space-between;align-items:center;gap:12px;color:#c5d9ee;font-size:12px;margin:0 0 9px; }
.storage-meter-line strong { font-size:12px;color:#fff; }
.storage-meter { background:#0b1522; border:1px solid #33455a; height:14px; border-radius:99px; overflow:hidden; }
.storage-fill { display:block; height:100%;border-radius:inherit;background:linear-gradient(90deg,#0084FF,#FF7A00); }
.storage-fill-warning { background:linear-gradient(90deg,#FF7A00,#ffd166); }
.storage-fill-danger { background:linear-gradient(90deg,#ff8a4c,#ff566b); }
.storage-warning { color:#ffd2a4; margin:12px 0 0; font-size:12px; }
.storage-libraries-head { margin:22px 0 12px; font-size:12px; font-weight:800; }
.storage-libraries-head span { color:#8199b9; font-size:11px; font-weight:500; }
.storage-libraries { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 13px; }
.storage-library { display:flex; justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;background:#0c192a;border:1px solid #263b54;border-radius:9px;min-width:0;font-size:12px; }
.storage-library span {min-width:0;overflow-wrap:anywhere; }
.storage-library small { color:#7b96b5;white-space:nowrap; }
.storage-library strong { font-size:12px;color:#acd2ff;white-space:nowrap; }
.storage-footnote { margin:16px 0 0;color:#819bb7;font-size:11px;line-height:1.6; }
.storage-unavailable {margin:22px 0 0; padding:14px;color:#ffc0bf;background:#4a222533;border:1px solid #7a4147;border-radius:10px; font-size:13px; }
@media (max-width:720px) {
 .storage-panel { padding:17px 14px; border-radius:13px; }
 .storage-title-row { display:block; }.storage-title-row h2 { font-size:20px; }.storage-refresh-note { display:block;margin-top:6px; }
 .storage-summary { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:17px; }
 .storage-summary>div { padding:12px 10px; }.storage-summary strong {font-size:21px;}
 .storage-libraries {grid-template-columns:1fr;}.storage-library {padding:10px 11px;}
}

/* v0.4 – contextual actions for desktop, tablet and phones */
.folder-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.folder-actions .i,.folder-context .i,.empty-create-link .i { width:17px; height:17px; }
.folder-context { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:-14px 0 20px; padding:12px 16px; border:1px solid #315274; background:#102336; border-radius:12px; color:#c0d8f2; font-size:12px; }
.folder-context strong { color:white; }
.folder-context > .i { color:var(--blue-bright); }
.folder-context a { color:#96d2ff; margin-left:auto; text-decoration:underline; text-underline-offset:3px; }
.empty-create-link { display:inline-flex; align-items:center; gap:7px; margin-top:13px; color:#8dc7ff; font-size:12px; font-weight:800; }
.empty-create-link:hover { color:white; }
@media (max-width:650px) {
  .folder-actions { width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .folder-actions > a { width:100%; padding:12px 8px; white-space:normal; }
  .folder-context { margin-top:-9px; }
  .folder-context a { margin-left:0; flex-basis:100%; }
}
@media (max-width:380px) { .folder-actions { grid-template-columns:1fr; } }

/* v0.4.1 – safe file deletion and trash, optimized for touch screens */
.danger-outline { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 13px; min-height:38px; border-radius:10px; background:#321c27; border:1px solid #9a4855; color:#ffd8dc; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; }
.danger-outline:hover,.danger-outline:focus-visible { border-color:#ff8994; background:#542936; color:#fff; }
.danger-outline .i { width:15px; height:15px; }
.file-row .right form { margin:0; }
@media (max-width:650px) { .file-row .danger-outline { min-height:40px; padding:9px 11px; font-size:11px; } .file-row .right { align-items:center; } }