*{box-sizing:border-box;margin:0;padding:0} :root{--bg:#020617;--panel:#0f172a;--card:#111c2e;--card2:#172436;--line:rgba(255,255,255,.08);--text:#f8fafc;--muted:#94a3b8;--blue:#3b82f6;--blue2:#2563eb;--green:#22c55e;--red:#dc2626;--red2:#b91c1c;--shadow:0 20px 45px rgba(0,0,0,.35)} html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Inter,Arial,sans-serif;color:var(--text)} body{background:radial-gradient(circle at top left,#1d4ed8 0%,transparent 32%),linear-gradient(135deg,#020617,#0f172a)} .hidden{display:none!important} button{border:none;outline:none;border-radius:16px;padding:12px 16px;cursor:pointer;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--blue),var(--blue2));transition:.15s;box-shadow:var(--shadow)} button:hover{transform:translateY(-2px);filter:brightness(1.06)} button:active{transform:scale(.98)} .danger{background:linear-gradient(135deg,var(--red),var(--red2))!important}.adminBtn{background:linear-gradient(135deg,#7c3aed,#1d4ed8)!important} input,select{border:1px solid var(--line);outline:none;background:#0b1220;color:#fff;border-radius:16px;padding:12px 14px;min-width:0} input:focus,select:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,.16)} select option{background:#0f172a;color:white}.smallText{color:var(--muted);font-size:13px;line-height:1.45}.app{width:100vw;height:100vh;display:flex}.sidebar{width:320px;background:rgba(9,15,27,.95);border-right:1px solid var(--line);backdrop-filter:blur(16px);padding:20px;display:flex;flex-direction:column;gap:18px;overflow:auto}.brand{display:flex;align-items:center;gap:16px;cursor:pointer;border-radius:24px;padding:16px;transition:.15s}.brand:hover,.navGroup button.active{background:rgba(255,255,255,.06)}.brandIcon{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,var(--blue),#60a5fa)}.brand h1{font-size:28px;font-weight:900}.brand p{color:var(--muted);font-size:14px}.userBox,.sidebarGroup{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:12px}.navGroup button{display:flex;align-items:center;gap:10px;justify-content:flex-start;box-shadow:none;background:rgba(255,255,255,.05)}.folderHeader{display:flex;align-items:center;justify-content:space-between;font-weight:800}.folderPlus{width:36px;height:36px;padding:0;border-radius:12px;font-size:22px}.folderHint{font-size:12px;color:var(--muted)}#folderList{display:flex;flex-direction:column;gap:10px}.folderItem{background:linear-gradient(135deg,#18263a,#1d2b40);border:1px solid var(--line);border-radius:18px;padding:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;transition:.15s;user-select:none}.folderItem:hover{transform:translateX(2px);border-color:#60a5fa}.folderItem.selected{border-color:var(--green)!important;background:linear-gradient(180deg,#123021,#14532d)!important}.main{flex:1;overflow:hidden;display:flex;flex-direction:column}.fileView{height:100%;display:flex;flex-direction:column;overflow:hidden}.topbar{min-height:84px;display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);background:rgba(10,18,32,.9);backdrop-filter:blur(10px)}.pathBox{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:12px 14px;min-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topActions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.topActions input{width:190px}.dropzone{margin:20px;min-height:112px;border-radius:28px;border:2px dashed rgba(96,165,250,.45);background:linear-gradient(180deg,rgba(59,130,246,.13),rgba(59,130,246,.04));display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:.16s}.dropzone.drag{border-color:var(--green);background:rgba(34,197,94,.12)}.dropzone b{display:block;font-size:21px}.dropzone span{display:block;margin-top:8px;color:#bfdbfe}.grid{flex:1;overflow:auto;padding:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;align-content:start}.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:24px;padding:14px;min-height:140px;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;cursor:pointer;transition:.16s;user-select:none}.card:hover{transform:translateY(-3px);border-color:#60a5fa}.card.selected,.listRow.selected{border-color:var(--green)!important;background:linear-gradient(180deg,#123021,#14532d)!important}.thumbWrap{width:100%;height:84px;border-radius:16px;overflow:hidden;background:#020617}.thumbImg{width:100%;height:100%;object-fit:cover}.icon{font-size:48px;margin-top:8px}.name{width:100%;text-align:center;margin-top:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}.grid.listView{display:flex;flex-direction:column}.listHeader,.listRow{display:grid;grid-template-columns:1fr 140px 220px;gap:10px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:16px}.listHeader{background:rgba(255,255,255,.05);position:sticky;top:0;z-index:10}.listRow{background:linear-gradient(180deg,var(--card),var(--card2));cursor:pointer}.listRow:hover{border-color:#60a5fa}.listMeta{color:var(--muted)}.menu{position:fixed;min-width:250px;background:#0f172a;border:1px solid var(--line);border-radius:22px;overflow:hidden;display:none;flex-direction:column;z-index:999999;box-shadow:0 25px 50px rgba(0,0,0,.5)}.menu button{background:none!important;border-radius:0!important;box-shadow:none!important;text-align:left;padding:15px 16px}.menu button:hover{background:rgba(255,255,255,.06)!important}.toast{position:fixed;bottom:25px;right:25px;background:#0f172a;border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:none;z-index:100000;box-shadow:var(--shadow);font-weight:800}.selectionBox{position:fixed;display:none;border:2px solid #60a5fa;background:rgba(96,165,250,.18);z-index:99999;pointer-events:none}.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:99998;backdrop-filter:blur(8px)}.modalBox{width:min(92vw,760px);max-height:92vh;overflow:auto;background:#0f172a;border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}.previewBox{width:min(96vw,980px)}.previewBox img,.previewBox video,.previewBox iframe{width:100%;max-height:78vh;border:none;border-radius:18px;background:#000}.modalActions{display:flex;gap:12px;flex-wrap:wrap}.uploadBox,.zipBox{position:fixed;right:24px;background:#0f172a;border:1px solid var(--line);border-radius:22px;padding:16px;display:none;z-index:90000;box-shadow:var(--shadow);width:min(420px,calc(100vw - 40px))}.uploadBox{bottom:90px}.zipBox{bottom:25px}.uploadItem{background:#020617;border:1px solid var(--line);border-radius:16px;padding:12px;margin-top:10px}.uploadBar,.zipBar{height:12px;background:#020617;border-radius:999px;overflow:hidden;margin:10px 0}.uploadFill,.zipFill{height:100%;width:0%;background:linear-gradient(90deg,#3b82f6,#22c55e)}.uploadStats{font-size:12px;color:var(--muted)}.adminFull{flex:1;overflow:auto;padding:26px}.adminTopbar{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:28px;padding:24px;margin-bottom:22px}.adminTopbar p{color:var(--muted);margin-top:6px}.adminTabs{display:flex;gap:10px;flex-wrap:wrap;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:24px;padding:12px;margin-bottom:22px}.adminTabs button{box-shadow:none}.adminCard{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:28px;padding:22px}.formGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0 24px}.permissionGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px;margin:16px 0}.permissionItem,.userItem,.logItem,.backupItem,.storageItem{background:#020617;border:1px solid var(--line);border-radius:18px;padding:14px;margin-top:12px}.permissionItem{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:0}.permissionItem input[type=checkbox],.logItem input[type=checkbox]{width:22px;height:22px;accent-color:#3b82f6}.userItem,.backupItem{display:flex;flex-direction:column;gap:10px}.adminButtonRow{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.logsScrollable{max-height:520px;overflow:auto;padding-right:6px}.loginScreen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top left,#1d4ed8 0%,transparent 32%),linear-gradient(135deg,#020617,#0f172a)}.loginBox{width:min(390px,92vw);background:rgba(15,23,42,.94);border:1px solid var(--line);border-radius:32px;padding:34px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}.loginBox h1{text-align:center;font-size:36px}.loginBox p,.loginHint{text-align:center;color:var(--muted)}@media(max-width:900px){.app{flex-direction:column}.sidebar{width:100%;height:auto;max-height:45vh}.topbar{align-items:flex-start;flex-direction:column}.topActions{margin-left:0}.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.adminTabs,.formGrid,.permissionGrid{grid-template-columns:1fr;display:grid}.listHeader,.listRow{grid-template-columns:1fr}}
.uploadActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.uploadActions button{padding:9px 11px;border-radius:12px;box-shadow:none;font-size:12px}#shareResult input{width:100%;margin-top:10px}.menu button{white-space:nowrap}

.app.adminMode .sidebar{display:none!important}.app.adminMode .main{width:100vw;max-width:100vw}.app.adminMode .adminFull{width:100vw}.rootDropActive{outline:2px dashed var(--green);background:rgba(34,197,94,.12)!important}.folderHint{display:none!important}

/* =========================
   V9 KRASSES CLOUD UI
========================= */
body{background:radial-gradient(circle at 10% 0%,rgba(59,130,246,.45),transparent 28%),radial-gradient(circle at 90% 10%,rgba(34,197,94,.18),transparent 26%),linear-gradient(135deg,#020617,#07111f 45%,#0f172a)}
.sidebar{background:linear-gradient(180deg,rgba(2,6,23,.96),rgba(15,23,42,.92));box-shadow:18px 0 60px rgba(0,0,0,.22)}
.brand{border:1px solid rgba(96,165,250,.12);background:rgba(255,255,255,.03)}
.brandIcon{box-shadow:0 0 35px rgba(59,130,246,.45)}
.navGroup button.active{background:linear-gradient(135deg,#16a34a,#2563eb)!important;box-shadow:0 12px 30px rgba(37,99,235,.3)}
.cloudDashboard{padding:20px 20px 0;display:grid;gap:14px}.cloudDashboard.hidden{display:none!important}
.dashHero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;border-radius:30px;background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(15,23,42,.94));border:1px solid rgba(255,255,255,.08);box-shadow:0 25px 60px rgba(0,0,0,.26)}
.dashHero h2{font-size:30px;margin-bottom:6px}.dashHero p{color:#bfdbfe}.dashPills{display:flex;gap:10px;flex-wrap:wrap}.dashPills span,.pathChip{display:inline-flex;align-items:center;border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:12px;color:#bfdbfe}
.dashCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.dashCard{padding:16px;border-radius:22px;background:linear-gradient(180deg,rgba(17,28,46,.96),rgba(23,36,54,.96));border:1px solid rgba(255,255,255,.07)}.dashCard span{display:block;color:#94a3b8;font-size:12px}.dashCard b{font-size:22px;margin-top:6px;display:block}.recentStrip{padding:14px;border-radius:22px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}.recentStrip>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.recentStrip button{padding:9px 12px;border-radius:999px;box-shadow:none;background:rgba(59,130,246,.18)!important;border:1px solid rgba(96,165,250,.18)}
.proCard{isolation:isolate}.proCard::before{content:"";position:absolute;inset:-1px;background:linear-gradient(135deg,rgba(96,165,250,.18),transparent 35%,rgba(34,197,94,.12));opacity:.0;transition:.18s;z-index:-1}.proCard:hover::before{opacity:1}.starBtn{position:absolute;top:10px;right:10px;width:34px;height:34px;padding:0;border-radius:12px;background:rgba(2,6,23,.65)!important;border:1px solid rgba(255,255,255,.10);box-shadow:none;color:#94a3b8;z-index:5}.starBtn.on{color:#fde68a;background:rgba(180,83,9,.28)!important}.pathChip{margin-top:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quickPanel{padding:0 20px 0}.quickPanel.hidden{display:none}.detailCard{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 18px;border-radius:22px;background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(37,99,235,.14));border:1px solid rgba(255,255,255,.08)}.detailCard span{color:#bfdbfe;font-size:13px}.emptyState{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;border-radius:30px;background:rgba(255,255,255,.035);border:1px dashed rgba(148,163,184,.28);color:#cbd5e1;gap:8px}.emptyState b{font-size:22px;color:#fff}.shareGrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.shareCard{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid rgba(255,255,255,.07);border-radius:26px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}.shareCard input,.backupItem input{width:100%;font-size:12px}.rootDropActive,.pathBox.rootDropActive{outline:2px solid #22c55e!important;box-shadow:0 0 0 6px rgba(34,197,94,.18)!important}
body.adminMode .sidebar{display:none}body.adminMode .main{width:100vw}body.adminMode .adminFull{padding:30px;min-height:100vh;background:radial-gradient(circle at top right,rgba(59,130,246,.22),transparent 35%)}
@media(max-width:900px){.dashHero{align-items:flex-start;flex-direction:column}.cloudDashboard{padding:12px 12px 0}.dashHero h2{font-size:24px}.quickPanel{padding:0 12px}.shareGrid{grid-template-columns:1fr}}

/* =========================
   V10 AURORA MODERN DESIGN
========================= */
:root{
  --bg:#080713;
  --bg2:#10111f;
  --card:rgba(20,22,42,.82);
  --card2:rgba(14,16,32,.92);
  --line:rgba(255,255,255,.10);
  --blue:#7c3aed;
  --blue2:#06b6d4;
  --green:#2dd4bf;
  --red:#fb7185;
  --red2:#e11d48;
  --text:#f8fafc;
  --muted:#a7b1c8;
  --shadow:0 24px 70px rgba(0,0,0,.40);
}
body{
  background:
    radial-gradient(circle at 12% 0%,rgba(124,58,237,.45),transparent 30%),
    radial-gradient(circle at 86% 12%,rgba(6,182,212,.30),transparent 28%),
    radial-gradient(circle at 52% 95%,rgba(45,212,191,.15),transparent 28%),
    linear-gradient(135deg,#070614,#10111f 48%,#111827)!important;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.035) 24%,transparent 45%,rgba(6,182,212,.04) 70%,transparent 100%);
  animation:auroraSweep 16s linear infinite;
}
@keyframes auroraSweep{0%{transform:translateX(-18%)}50%{transform:translateX(12%)}100%{transform:translateX(-18%)}}
button{background:linear-gradient(135deg,#7c3aed,#06b6d4)!important;box-shadow:0 14px 35px rgba(6,182,212,.18);position:relative;overflow:hidden}
button::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-120%);transition:.55s;pointer-events:none}button:hover::after{transform:translateX(120%)}
.danger{background:linear-gradient(135deg,#fb7185,#e11d48)!important}.adminBtn{background:linear-gradient(135deg,#8b5cf6,#22d3ee)!important}
.sidebar{background:linear-gradient(180deg,rgba(9,8,24,.88),rgba(15,18,38,.72))!important;backdrop-filter:blur(24px);border-right:1px solid rgba(255,255,255,.08);box-shadow:22px 0 80px rgba(0,0,0,.26)}
.brand,.userBox,.sidebarGroup,.adminCard,.adminTopbar,.modalBox,.uploadBox,.zipBox{background:linear-gradient(180deg,rgba(24,26,52,.78),rgba(13,16,34,.72))!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 22px 65px rgba(0,0,0,.28);backdrop-filter:blur(18px)}
.brandIcon{background:linear-gradient(135deg,#8b5cf6,#06b6d4)!important;animation:softPulse 3.8s ease-in-out infinite;box-shadow:0 0 42px rgba(6,182,212,.35)}
@keyframes softPulse{0%,100%{transform:scale(1);filter:saturate(1)}50%{transform:scale(1.045);filter:saturate(1.35)}}
.topbar{background:rgba(10,12,28,.74)!important;backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.08)}
.pathBox,input,select{background:rgba(10,12,28,.70)!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.navGroup button.active,.bellBtn.active{background:linear-gradient(135deg,#2dd4bf,#7c3aed)!important;box-shadow:0 16px 40px rgba(124,58,237,.26)}
.dashHero{background:linear-gradient(135deg,rgba(124,58,237,.30),rgba(6,182,212,.13),rgba(20,22,42,.82))!important;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(6,182,212,.14)}
.dashHero h2{background:linear-gradient(90deg,#fff,#c4b5fd,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}.dashHero p{color:#dbeafe!important}
.dashCard,.card,.listRow,.shareCard,.folderItem{background:linear-gradient(180deg,rgba(24,26,52,.82),rgba(11,14,30,.88))!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 18px 55px rgba(0,0,0,.24);animation:cardIn .28s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.card:hover,.listRow:hover,.folderItem:hover,.dashCard:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.45)!important;box-shadow:0 24px 80px rgba(6,182,212,.15)}
.card.selected,.listRow.selected,.folderItem.selected{border-color:#2dd4bf!important;background:linear-gradient(180deg,rgba(20,83,73,.72),rgba(13,56,68,.84))!important;box-shadow:0 0 0 4px rgba(45,212,191,.12),0 24px 80px rgba(45,212,191,.14)!important}
.dropzone{background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(6,182,212,.08))!important;border-color:rgba(34,211,238,.35)!important}.dropzone.drag{border-color:#2dd4bf!important;background:rgba(45,212,191,.12)!important}
.bellBtn{width:48px;height:48px;padding:0!important;border-radius:16px!important;display:inline-flex;align-items:center;justify-content:center;font-size:20px;overflow:visible!important}.bellBadge{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:#fb7185;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid #0b1020}.bellBadge.hidden{display:none}.bellHover{position:absolute;right:0;top:calc(100% + 12px);width:min(340px,calc(100vw - 40px));display:none;flex-direction:column;gap:8px;padding:14px;border-radius:22px;background:rgba(11,14,30,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 25px 70px rgba(0,0,0,.45);z-index:999999;text-align:left;backdrop-filter:blur(22px)}.bellBtn:hover .bellHover{display:flex}.bellHover b{font-size:14px}.bellHover button{display:flex;align-items:center;gap:8px;width:100%;padding:10px;border-radius:14px;box-shadow:none;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.08);font-size:13px}.bellHover small{color:var(--muted);font-size:11px;margin-top:2px}.activityGrid{animation:cardIn .25s ease both}.activityMeta{margin-top:8px;color:#67e8f9;font-size:12px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.16);border-radius:999px;padding:5px 8px}
.marqueeWrap{display:block;max-width:100%;overflow:hidden;white-space:nowrap;position:relative}.marqueeText{display:inline-block;max-width:100%;vertical-align:bottom}.card .name .marqueeWrap{width:100%}.listRow .inlineMarquee{display:inline-block;max-width:min(44vw,520px);vertical-align:middle}.card:hover .marqueeText,.listRow:hover .marqueeText,.bellHover button:hover .marqueeText{max-width:none;animation:marquee var(--marquee-duration,18s) linear infinite alternate}.card:hover .marqueeWrap::after,.listRow:hover .marqueeWrap::after{content:"";position:absolute;right:0;top:0;width:32px;height:100%;background:linear-gradient(90deg,transparent,rgba(11,14,30,.95))}@keyframes marquee{0%{transform:translateX(0)}12%{transform:translateX(0)}88%{transform:translateX(calc(-100% + 100px))}100%{transform:translateX(calc(-100% + 100px))}}
.auroraEntrance{animation:cardIn .38s ease both}.starBtn{background:rgba(10,12,28,.72)!important}.starBtn.on{background:rgba(251,191,36,.20)!important;color:#fde68a!important}
.recentStrip{display:none!important}
@media(max-width:900px){.bellHover{right:-120px}.topActions{gap:8px}.bellBtn{width:44px;height:44px}.listRow .inlineMarquee{max-width:58vw}}


/* =========================
   V11 NEBULA GLASS + MOBILE FIRST POLISH
========================= */
:root{
  --bg:#060812;
  --bg2:#0d1020;
  --card:rgba(18,24,42,.78);
  --card2:rgba(10,14,28,.88);
  --line:rgba(148,163,184,.16);
  --blue:#14b8a6;
  --blue2:#8b5cf6;
  --green:#34d399;
  --red:#f43f5e;
  --red2:#be123c;
  --text:#f8fafc;
  --muted:#a5b4c8;
  --shadow:0 28px 90px rgba(0,0,0,.42);
}
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;}
body{
  background:
    radial-gradient(circle at 20% -10%,rgba(20,184,166,.34),transparent 32%),
    radial-gradient(circle at 90% 16%,rgba(139,92,246,.35),transparent 28%),
    radial-gradient(circle at 50% 110%,rgba(244,63,94,.12),transparent 32%),
    linear-gradient(135deg,#050712,#0c1020 52%,#111827)!important;
}
body::before{animation:nebulaDrift 18s ease-in-out infinite;background:linear-gradient(120deg,transparent,rgba(52,211,153,.045),transparent,rgba(139,92,246,.05),transparent)!important;}
@keyframes nebulaDrift{0%,100%{transform:translate3d(-10%,0,0) rotate(0deg)}50%{transform:translate3d(10%,2%,0) rotate(1.5deg)}}
button{background:linear-gradient(135deg,#14b8a6,#8b5cf6)!important;box-shadow:0 14px 38px rgba(20,184,166,.18)!important;}
button:hover{filter:saturate(1.18) brightness(1.05)}
.danger{background:linear-gradient(135deg,#f43f5e,#be123c)!important}.adminBtn{background:linear-gradient(135deg,#8b5cf6,#14b8a6)!important}
.sidebar,.topbar{background:rgba(8,12,26,.70)!important;border-color:rgba(148,163,184,.14)!important;backdrop-filter:blur(26px) saturate(1.25);}
.brand,.userBox,.sidebarGroup,.adminCard,.adminTopbar,.modalBox,.uploadBox,.zipBox,.dashHero,.dashCard,.card,.listRow,.shareCard,.folderItem,.detailCard{
  background:linear-gradient(180deg,rgba(21,28,50,.78),rgba(8,12,26,.78))!important;
  border:1px solid rgba(148,163,184,.16)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.brandIcon{background:linear-gradient(135deg,#14b8a6,#8b5cf6,#f43f5e)!important;animation:softPulse 4.2s ease-in-out infinite, hueFloat 10s linear infinite;}
@keyframes hueFloat{0%,100%{filter:hue-rotate(0deg) saturate(1.05)}50%{filter:hue-rotate(18deg) saturate(1.35)}}
.dashHero h2{background:linear-gradient(90deg,#ffffff,#99f6e4,#c4b5fd,#fecdd3);-webkit-background-clip:text;background-clip:text;color:transparent;}
.dashPills span,.pathChip{background:rgba(20,184,166,.08)!important;border-color:rgba(45,212,191,.20)!important;color:#ccfbf1!important;}
.navGroup button.active,.bellBtn.active{background:linear-gradient(135deg,#34d399,#8b5cf6)!important;box-shadow:0 18px 50px rgba(52,211,153,.18)!important;}
.card:hover,.listRow:hover,.folderItem:hover,.dashCard:hover{border-color:rgba(45,212,191,.55)!important;box-shadow:0 30px 95px rgba(20,184,166,.16)!important;}
.card.selected,.listRow.selected,.folderItem.selected{border-color:#34d399!important;background:linear-gradient(180deg,rgba(6,78,59,.72),rgba(30,41,59,.84))!important;}
.dropzone{background:linear-gradient(135deg,rgba(20,184,166,.10),rgba(139,92,246,.09))!important;border-color:rgba(45,212,191,.38)!important;}
.bellBtn{flex:0 0 auto}.bellHover{background:rgba(8,12,26,.96)!important;border-color:rgba(148,163,184,.18)!important;}
.bellHover button{min-width:0}.bellHover .marqueeWrap{min-width:0;flex:1;}
.recentStrip{display:none!important;visibility:hidden!important;height:0!important;padding:0!important;margin:0!important;border:0!important;}
.card:hover .marqueeText,.listRow:hover .marqueeText,.folderItem:hover .marqueeText,.bellHover button:hover .marqueeText,.card:active .marqueeText,.listRow:active .marqueeText,.folderItem:active .marqueeText{
  max-width:none;animation:marquee var(--marquee-duration,18s) linear infinite alternate;
}
.folderItem span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

@media (max-width: 980px){
  html,body{height:100%;overflow:hidden;}
  .app{display:flex;flex-direction:column;height:100dvh;width:100vw;overflow:hidden;}
  .sidebar{width:100%!important;max-height:none!important;height:auto!important;display:grid;grid-template-columns:1fr;gap:10px;padding:10px 10px 8px;border-right:0!important;border-bottom:1px solid rgba(148,163,184,.14)!important;box-shadow:0 16px 55px rgba(0,0,0,.22)!important;overflow:visible;}
  .brand{padding:10px 12px;border-radius:18px;gap:10px;}
  .brandIcon{width:44px;height:44px;border-radius:14px;font-size:24px;}
  .brand h1{font-size:20px}.brand p{font-size:12px}
  .userBox{display:grid;grid-template-columns:1fr auto auto;align-items:center;padding:10px;border-radius:18px;gap:8px;}
  .userBox button{padding:10px 11px;border-radius:13px;font-size:12px;}
  .navGroup{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;border-radius:18px;}
  .navGroup button{justify-content:center;padding:10px 6px;border-radius:14px;font-size:12px;gap:4px;}
  .navGroup button span{display:none;}
  .foldersBlock{max-height:128px;overflow:auto;padding:10px;border-radius:18px;}
  #folderList{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:8px;}
  .folderItem{padding:10px 11px;border-radius:14px;}
  .main{min-height:0;flex:1;width:100%;overflow:hidden;}
  .fileView{height:100%;min-height:0;}
  .topbar{min-height:auto;padding:10px;gap:8px;display:grid;grid-template-columns:auto 1fr;align-items:center;}
  .pathBox{min-width:0;width:100%;padding:10px;border-radius:14px;font-size:13px;}
  #backBtn{padding:10px 12px;border-radius:13px;font-size:12px;}
  .topActions{grid-column:1/-1;width:100%;margin-left:0;display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;align-items:center;}
  .topActions input{width:100%;grid-column:2/4;min-height:42px;}
  .topActions select,.topActions button{min-height:42px;padding:9px 10px;border-radius:13px;font-size:12px;}
  .topActions select{width:100%;}
  .bellBtn{width:42px!important;height:42px!important;border-radius:14px!important;grid-row:1;}
  .bellHover{right:auto!important;left:0;top:calc(100% + 10px);width:min(92vw,360px)!important;}
  .cloudDashboard{padding:10px 10px 0;}
  .dashHero{padding:14px!important;border-radius:22px!important;gap:10px;}
  .dashHero h2{font-size:22px!important;}
  .dashHero p{font-size:13px;line-height:1.35;}
  .dashCards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .dashCard{padding:12px;border-radius:18px;}.dashCard b{font-size:18px;}
  .dropzone{margin:10px;min-height:76px;border-radius:20px;}.dropzone b{font-size:16px}.dropzone span{font-size:12px;margin-top:4px;}
  .quickPanel{padding:0 10px!important;}.detailCard{padding:12px;border-radius:18px;}
  .grid{padding:10px;gap:10px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));}
  .card{min-height:122px;border-radius:18px;padding:10px;}.thumbWrap{height:68px;border-radius:13px}.icon{font-size:38px}.name{font-size:12px;margin-top:8px;}
  .grid.listView{gap:8px;}.listHeader{display:none!important;}
  .listRow{grid-template-columns:1fr;gap:5px;padding:12px;border-radius:16px;}.listMeta{font-size:12px;}
  .listRow .inlineMarquee{max-width:82vw!important;}
  .menu{min-width:min(260px,calc(100vw - 24px));max-width:calc(100vw - 24px);border-radius:18px;}.menu button{padding:14px;font-size:14px;}
  .uploadBox,.zipBox{left:10px;right:10px;width:auto;}.uploadBox{bottom:82px}.zipBox{bottom:14px;}
  .modal{padding:10px;align-items:flex-end;}.modalBox{width:100%;max-height:88dvh;border-radius:24px 24px 18px 18px;padding:18px;}
  .adminFull{padding:12px!important;}.adminTopbar{padding:16px;border-radius:22px;align-items:flex-start;}.adminTopbar h2{font-size:22px;}.adminTabs{display:grid!important;grid-template-columns:repeat(2,1fr);gap:8px;padding:10px;border-radius:20px;}.adminTabs button{padding:10px 8px;font-size:12px;}
  .adminCard{padding:14px;border-radius:22px;}.formGrid,.permissionGrid{grid-template-columns:1fr!important;gap:10px;}.permissionItem,.userItem,.logItem,.backupItem,.storageItem{border-radius:16px;padding:12px;}
}

@media (max-width: 520px){
  .sidebar{gap:8px;padding:8px;}
  .userBox{grid-template-columns:1fr;}.userBox button{width:100%;}
  .foldersBlock{max-height:104px;}
  .topbar{grid-template-columns:1fr;}.topActions{grid-template-columns:1fr 1fr;}.bellBtn{grid-column:1/2}.topActions input{grid-column:2/3}.topActions select,.topActions button{font-size:11px;padding:8px;}.dashCards{grid-template-columns:1fr 1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr));}.card{min-height:116px}.loginBox{padding:22px;border-radius:26px;}.loginBox h1{font-size:28px}.adminTabs{grid-template-columns:1fr!important;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}


/* =========================
   V13 SHADOW PRO - DARK MODERN, LESS COLORFUL
========================= */
:root{
  --bg:#050505;
  --bg2:#090909;
  --panel:#0b0b0c;
  --card:rgba(17,17,18,.92);
  --card2:rgba(9,9,10,.96);
  --line:rgba(255,255,255,.105);
  --text:#f4f4f5;
  --muted:#a1a1aa;
  --blue:#f59e0b;
  --blue2:#ef4444;
  --green:#a3e635;
  --red:#ef4444;
  --red2:#991b1b;
  --shadow:0 32px 90px rgba(0,0,0,.62);
}
html,body{background:#050505!important;color:var(--text)!important;}
body{
  background:
    radial-gradient(circle at 16% -12%,rgba(245,158,11,.16),transparent 30%),
    radial-gradient(circle at 106% 8%,rgba(239,68,68,.10),transparent 26%),
    linear-gradient(135deg,#050505,#090909 48%,#10100f)!important;
}
body::before{
  opacity:.55!important;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.025),transparent,rgba(245,158,11,.025),transparent)!important;
}
button{
  background:linear-gradient(135deg,#f59e0b,#ef4444)!important;
  box-shadow:0 16px 44px rgba(245,158,11,.12)!important;
  color:#fff!important;
}
button:hover{filter:brightness(1.08) saturate(1.03)!important;}
.danger{background:linear-gradient(135deg,#ef4444,#7f1d1d)!important;}
.adminBtn{background:linear-gradient(135deg,#27272a,#f59e0b)!important;}
input,select{
  background:#080809!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#f4f4f5!important;
}
input:focus,select:focus{
  border-color:rgba(245,158,11,.62)!important;
  box-shadow:0 0 0 3px rgba(245,158,11,.16)!important;
}
.sidebar,.topbar{
  background:rgba(5,5,5,.88)!important;
  border-color:rgba(255,255,255,.10)!important;
  backdrop-filter:blur(24px) saturate(1.08)!important;
}
.topbar,.topActions{overflow:visible!important;position:relative;z-index:2000000!important;}
.brand,.userBox,.sidebarGroup,.adminCard,.adminTopbar,.modalBox,.uploadBox,.zipBox,.dashHero,.dashCard,.card,.listRow,.shareCard,.folderItem,.detailCard,.menu,.permissionItem,.userItem,.logItem,.backupItem,.storageItem{
  background:linear-gradient(180deg,rgba(22,22,24,.94),rgba(7,7,8,.97))!important;
  border:1px solid rgba(255,255,255,.105)!important;
  box-shadow:0 26px 78px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.brandIcon{
  background:linear-gradient(135deg,#18181b,#f59e0b 55%,#ef4444)!important;
  animation:shadowPulse 4.5s ease-in-out infinite!important;
}
@keyframes shadowPulse{0%,100%{box-shadow:0 0 0 rgba(245,158,11,0);transform:scale(1)}50%{box-shadow:0 0 38px rgba(245,158,11,.18);transform:scale(1.025)}}
.navGroup button{background:rgba(255,255,255,.045)!important;box-shadow:none!important;}
.navGroup button.active,.bellBtn.active{
  background:linear-gradient(135deg,#27272a,#f59e0b)!important;
  box-shadow:0 18px 50px rgba(245,158,11,.14)!important;
}
.card:hover,.listRow:hover,.folderItem:hover,.dashCard:hover{
  border-color:rgba(245,158,11,.48)!important;
  box-shadow:0 30px 95px rgba(245,158,11,.09),0 20px 70px rgba(0,0,0,.55)!important;
}
.card.selected,.listRow.selected,.folderItem.selected{
  border-color:#f59e0b!important;
  background:linear-gradient(180deg,rgba(120,53,15,.52),rgba(20,20,20,.95))!important;
}
.dashHero{
  background:linear-gradient(135deg,rgba(24,24,27,.96),rgba(10,10,10,.96))!important;
  border-color:rgba(245,158,11,.18)!important;
}
.dashHero h2{
  background:linear-gradient(90deg,#fafafa,#fbbf24,#fca5a5)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.dashHero p,.dashPills span,.pathChip{color:#d4d4d8!important;}
.dashPills span,.pathChip{
  background:rgba(245,158,11,.07)!important;
  border-color:rgba(245,158,11,.16)!important;
}
.dropzone{
  background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(255,255,255,.025))!important;
  border-color:rgba(245,158,11,.30)!important;
}
.dropzone span{color:#d6d3d1!important;}
.uploadFill,.zipFill{background:linear-gradient(90deg,#f59e0b,#ef4444)!important;}
.permissionItem input[type=checkbox],.logItem input[type=checkbox]{accent-color:#f59e0b!important;}
.selectionBox{border-color:#f59e0b!important;background:rgba(245,158,11,.14)!important;}
.activityMeta{
  color:#fbbf24!important;
  background:rgba(245,158,11,.07)!important;
  border-color:rgba(245,158,11,.17)!important;
}

/* Glocke: live, oben, sichtbar, dunkles Popup */
.bellBtn{
  position:relative!important;
  z-index:2147483000!important;
  background:linear-gradient(135deg,#1f1f22,#f59e0b)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#fff!important;
  overflow:visible!important;
  isolation:isolate;
}
.bellBtn.hasUnread{animation:bellLive 1.8s ease-in-out infinite;}
@keyframes bellLive{0%,100%{transform:translateY(0)}15%{transform:translateY(-1px) rotate(-5deg)}30%{transform:translateY(-1px) rotate(5deg)}45%{transform:translateY(0) rotate(0)}}
.bellBadge{
  background:#f59e0b!important;
  color:#111!important;
  border:2px solid #050505!important;
  box-shadow:0 8px 22px rgba(245,158,11,.22)!important;
}
.bellHover{
  position:absolute!important;
  right:0!important;
  top:calc(100% + 14px)!important;
  width:min(370px,calc(100vw - 32px))!important;
  max-height:min(520px,calc(100vh - 110px))!important;
  overflow:auto!important;
  background:#070707!important;
  border:1px solid rgba(245,158,11,.22)!important;
  box-shadow:0 34px 120px rgba(0,0,0,.82),0 0 0 1px rgba(255,255,255,.035)!important;
  color:#f4f4f5!important;
  backdrop-filter:none!important;
  z-index:2147483001!important;
  opacity:1!important;
}
.bellBtn:hover .bellHover,.bellBtn:focus-within .bellHover{display:flex!important;}
.bellHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08);}
.bellHead b{font-size:14px!important;color:#fff!important;}
.bellHead span{font-size:11px;color:#111;background:#f59e0b;border-radius:999px;padding:4px 8px;font-weight:900;white-space:nowrap;}
.bellHover button{
  background:#101011!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none!important;
  color:#e4e4e7!important;
}
.bellHover button:hover{
  background:#18181b!important;
  border-color:rgba(245,158,11,.28)!important;
  transform:none!important;
}
.bellHover small{color:#a1a1aa!important;line-height:1.35;}
.menu{background:#080809!important;z-index:2147482000!important;}
.toast{background:#080809!important;border-color:rgba(245,158,11,.20)!important;}

@media(max-width:980px){
  .topbar,.topActions{z-index:2000000!important;}
  .bellHover{left:0!important;right:auto!important;top:calc(100% + 10px)!important;width:min(92vw,370px)!important;}
  .sidebar{background:rgba(5,5,5,.94)!important;}
}
@media(max-width:520px){
  .bellHover{left:-4px!important;width:calc(100vw - 20px)!important;max-height:60vh!important;}
}

/* =========================
   V14 Editor / Vorschau / schnelleres Laufband
========================= */
.iconPreview{
  width:100%;
  height:92px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.22));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.iconPreview .iconBig{font-size:38px;line-height:1;filter:drop-shadow(0 12px 24px rgba(0,0,0,.4));}
.iconPreview span{
  font-size:11px;
  letter-spacing:.12em;
  font-weight:900;
  color:#f5f5f4;
  opacity:.78;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:3px 8px;
}
.listNameCell{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;}
.miniIcon{font-size:22px;flex:0 0 auto;}
.miniExt{font-size:10px;font-weight:900;letter-spacing:.08em;color:#d6d3d1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);padding:4px 6px;border-radius:8px;flex:0 0 auto;}
.card:hover .marqueeText,.listRow:hover .marqueeText,.folderItem:hover .marqueeText,.bellHover button:hover .marqueeText,.card:active .marqueeText,.listRow:active .marqueeText,.folderItem:active .marqueeText{
  max-width:none!important;
  animation:marquee var(--marquee-duration,8s) linear infinite alternate!important;
}
@keyframes marquee{0%{transform:translateX(0)}3%{transform:translateX(0)}97%{transform:translateX(calc(-100% + 108px))}100%{transform:translateX(calc(-100% + 108px))}}
.previewBox{width:min(96vw,1180px)!important;height:min(92vh,900px);display:flex;flex-direction:column;gap:14px;}
#previewContent{min-height:0;flex:1;display:flex;flex-direction:column;gap:14px;}
.previewBox iframe,.previewBox video,.previewBox img{flex:1;min-height:55vh;}
.previewBox audio{width:100%;margin-top:20px;}
.editorHead{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px;}
.editorHead h2{margin:0;font-size:clamp(18px,3vw,27px);max-width:760px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.editorHead span{display:block;color:#a1a1aa;margin-top:4px;font-size:13px;}
.okPill,.warnPill{border-radius:999px;padding:8px 12px;font-size:12px;white-space:nowrap;}
.okPill{background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.20);color:#bbf7d0;}
.warnPill{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.24);color:#fde68a;}
.editorWarning{background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.18);color:#f5f5f4;border-radius:18px;padding:12px 14px;line-height:1.45;}
.fileEditorArea{
  flex:1;
  min-height:48vh;
  width:100%;
  resize:none;
  border-radius:20px;
  padding:18px;
  background:#050505!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:#f4f4f5!important;
  font-family:Consolas, Monaco, 'Courier New', monospace;
  font-size:14px;
  line-height:1.55;
  tab-size:2;
  white-space:pre;
  overflow:auto;
}
.fileEditorArea:focus{border-color:rgba(245,158,11,.48)!important;box-shadow:0 0 0 3px rgba(245,158,11,.12)!important;}
.stickyEditorActions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(7,7,7,.72),#070707);padding-top:12px;margin-top:auto;}
.modal{cursor:pointer;}
.modalBox{cursor:auto;}
@media(max-width:680px){
  .previewBox{width:100vw!important;height:100vh!important;max-height:100vh!important;border-radius:0!important;padding:14px!important;}
  .editorHead{align-items:flex-start;flex-direction:column;}
  .fileEditorArea{min-height:58vh;font-size:13px;padding:14px;}
  .stickyEditorActions{display:grid;grid-template-columns:1fr;}
  .iconPreview{height:74px;}
}

/* =========================
   V15 Obsidian Mint Login + No Orange/Red
========================= */
:root{
  --bg:#050509!important;
  --panel:#0a0a10!important;
  --card:#101018!important;
  --card2:#15151f!important;
  --line:rgba(255,255,255,.09)!important;
  --text:#f7f7fb!important;
  --muted:#9ca3af!important;
  --blue:#a3e635!important;
  --blue2:#8b5cf6!important;
  --green:#a3e635!important;
  --red:#52525b!important;
  --red2:#27272a!important;
  --shadow:0 26px 80px rgba(0,0,0,.58)!important;
}
html,body{background:#050509!important;}
body{
  background:
    radial-gradient(circle at 15% 8%,rgba(163,230,53,.12),transparent 28%),
    radial-gradient(circle at 85% 18%,rgba(139,92,246,.10),transparent 32%),
    linear-gradient(135deg,#050509,#09090f 48%,#030306)!important;
}
button{
  background:linear-gradient(135deg,#1f1f2a,#2a2a36)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.38)!important;
}
button:hover{
  border-color:rgba(163,230,53,.38)!important;
  box-shadow:0 22px 70px rgba(163,230,53,.08),0 18px 55px rgba(0,0,0,.42)!important;
}
.danger{
  background:linear-gradient(135deg,#27272a,#18181b)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#f4f4f5!important;
}
.adminBtn,.brandIcon,.bellBtn,.navGroup button.active,.bellBtn.active{
  background:linear-gradient(135deg,#202029,#a3e635)!important;
  color:#08080c!important;
  box-shadow:0 24px 80px rgba(163,230,53,.13)!important;
}
input,select{
  background:#090910!important;
  border-color:rgba(255,255,255,.10)!important;
}
input:focus,select:focus,.fileEditorArea:focus{
  border-color:rgba(163,230,53,.54)!important;
  box-shadow:0 0 0 4px rgba(163,230,53,.10)!important;
}
.sidebar,.topbar,.adminFull,.adminTopbar,.adminCard,.modalBox,.uploadBox,.zipBox,.menu,.toast,.bellHover{
  background:rgba(7,7,12,.96)!important;
  border-color:rgba(255,255,255,.09)!important;
}
.userBox,.sidebarGroup,.card,.listRow,.dashCard,.shareCard,.folderItem,.permissionItem,.userItem,.logItem,.backupItem,.storageItem{
  background:linear-gradient(180deg,rgba(17,17,26,.96),rgba(10,10,16,.98))!important;
  border-color:rgba(255,255,255,.08)!important;
}
.card:hover,.listRow:hover,.folderItem:hover,.dashCard:hover{
  border-color:rgba(163,230,53,.42)!important;
  box-shadow:0 30px 100px rgba(163,230,53,.075),0 20px 70px rgba(0,0,0,.58)!important;
}
.card.selected,.listRow.selected,.folderItem.selected{
  border-color:rgba(163,230,53,.78)!important;
  background:linear-gradient(180deg,rgba(49,65,20,.55),rgba(8,8,12,.98))!important;
}
.dashHero{
  background:
    radial-gradient(circle at top left,rgba(163,230,53,.09),transparent 42%),
    linear-gradient(135deg,rgba(15,15,23,.98),rgba(6,6,10,.98))!important;
  border-color:rgba(163,230,53,.16)!important;
}
.dashHero h2{
  background:linear-gradient(90deg,#ffffff,#d9f99d,#c4b5fd)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.dashPills span,.pathChip,.activityMeta{
  background:rgba(163,230,53,.065)!important;
  border-color:rgba(163,230,53,.14)!important;
  color:#d9f99d!important;
}
.dropzone{
  background:linear-gradient(135deg,rgba(163,230,53,.045),rgba(139,92,246,.035))!important;
  border-color:rgba(163,230,53,.24)!important;
}
.dropzone.drag,.rootDropActive,.pathBox.rootDropActive{
  outline:2px solid rgba(163,230,53,.75)!important;
  box-shadow:0 0 0 7px rgba(163,230,53,.10)!important;
}
.uploadFill,.zipFill{
  background:linear-gradient(90deg,#a3e635,#8b5cf6)!important;
}
.selectionBox{
  border-color:#a3e635!important;
  background:rgba(163,230,53,.12)!important;
}
.permissionItem input[type=checkbox],.logItem input[type=checkbox]{accent-color:#a3e635!important;}
.bellBtn{
  background:linear-gradient(135deg,#181820,#a3e635)!important;
  color:#050509!important;
  border-color:rgba(163,230,53,.22)!important;
}
.bellBadge{
  background:#a3e635!important;
  color:#050509!important;
  border-color:#050509!important;
  box-shadow:0 8px 22px rgba(163,230,53,.18)!important;
}
.bellHover{
  background:#07070b!important;
  border-color:rgba(163,230,53,.20)!important;
  box-shadow:0 34px 120px rgba(0,0,0,.86),0 0 0 1px rgba(255,255,255,.035)!important;
}
.bellHead span{
  background:#a3e635!important;
  color:#050509!important;
}
.bellHover button:hover,.menu button:hover{
  border-color:rgba(163,230,53,.22)!important;
  background:rgba(163,230,53,.055)!important;
}
.iconPreview{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(163,230,53,.035))!important;
  border-color:rgba(163,230,53,.13)!important;
}
.okPill{background:rgba(163,230,53,.08)!important;border-color:rgba(163,230,53,.18)!important;color:#d9f99d!important;}
.warnPill,.editorWarning{background:rgba(139,92,246,.08)!important;border-color:rgba(139,92,246,.20)!important;color:#ddd6fe!important;}
.fileEditorArea{background:#050509!important;border-color:rgba(255,255,255,.11)!important;}

/* Login passend zum neuen dunklen Design */
.loginScreen{
  background:
    radial-gradient(circle at 25% 15%,rgba(163,230,53,.15),transparent 30%),
    radial-gradient(circle at 80% 20%,rgba(139,92,246,.12),transparent 35%),
    radial-gradient(circle at 50% 110%,rgba(255,255,255,.04),transparent 35%),
    linear-gradient(135deg,#050509,#08080f 48%,#030305)!important;
  overflow:hidden;
}
.loginScreen::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at center,black 0%,transparent 72%);
  opacity:.45;
}
.loginBox{
  position:relative;
  width:min(420px,92vw)!important;
  background:linear-gradient(180deg,rgba(16,16,25,.92),rgba(7,7,12,.96))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:34px!important;
  padding:38px 34px!important;
  box-shadow:0 40px 130px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(22px)!important;
  animation:loginFloat .7s cubic-bezier(.2,.8,.2,1) both;
}
.loginBox::before{
  content:"☁";
  width:72px;
  height:72px;
  margin:0 auto 2px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  color:#050509;
  background:linear-gradient(135deg,#a3e635,#c4b5fd);
  box-shadow:0 22px 70px rgba(163,230,53,.16);
}
.loginBox h1{
  font-size:34px!important;
  letter-spacing:-.04em;
  background:linear-gradient(90deg,#fff,#d9f99d,#ddd6fe);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
.loginBox p{color:#a1a1aa!important;margin-top:-6px;}
.loginBox input{
  height:52px;
  border-radius:18px!important;
  background:rgba(5,5,9,.82)!important;
  border-color:rgba(255,255,255,.11)!important;
}
.loginBox button{
  height:54px;
  border-radius:18px!important;
  background:linear-gradient(135deg,#a3e635,#8b5cf6)!important;
  color:#050509!important;
  border:none!important;
  box-shadow:0 20px 70px rgba(163,230,53,.13)!important;
}
.loginHint{
  color:#71717a!important;
  font-size:12px!important;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.025);
}
@keyframes loginFloat{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){
  .loginBox{padding:28px 22px!important;border-radius:28px!important;}
  .loginBox h1{font-size:29px!important;}
}

/* =========================
   V16 Slate Blue Pro UI
   clean blue/grey design + professional notification bell
========================= */
:root{
  --bg:#070b12!important;
  --panel:#0d1420!important;
  --card:#111a28!important;
  --card2:#0b111b!important;
  --line:rgba(148,163,184,.18)!important;
  --text:#f8fafc!important;
  --muted:#94a3b8!important;
  --blue:#60a5fa!important;
  --blue2:#2563eb!important;
  --green:#38bdf8!important;
  --red:#64748b!important;
  --red2:#334155!important;
  --shadow:0 28px 90px rgba(0,0,0,.58)!important;
}
html,body{background:#070b12!important;color:var(--text)!important;}
body{
  background:
    radial-gradient(circle at 12% 8%,rgba(59,130,246,.18),transparent 30%),
    radial-gradient(circle at 78% 0%,rgba(14,165,233,.10),transparent 34%),
    radial-gradient(circle at 50% 110%,rgba(148,163,184,.08),transparent 40%),
    linear-gradient(135deg,#070b12 0%,#0b1220 50%,#05070d 100%)!important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(148,163,184,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.03) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at center,black 0%,transparent 82%);
  z-index:-1;
}
button{
  background:linear-gradient(135deg,#1e293b,#0f172a)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  color:#f8fafc!important;
  box-shadow:0 18px 60px rgba(0,0,0,.35)!important;
}
button:hover{
  border-color:rgba(96,165,250,.55)!important;
  box-shadow:0 22px 75px rgba(37,99,235,.16),0 18px 60px rgba(0,0,0,.44)!important;
  transform:translateY(-2px)!important;
}
.danger{
  background:linear-gradient(135deg,#334155,#1e293b)!important;
  color:#e2e8f0!important;
  border-color:rgba(148,163,184,.24)!important;
}
.adminBtn,.brandIcon,.navGroup button.active,.bellBtn.active{
  background:linear-gradient(135deg,#2563eb,#38bdf8)!important;
  color:#ffffff!important;
  border-color:rgba(125,211,252,.50)!important;
  box-shadow:0 24px 80px rgba(37,99,235,.24)!important;
}
input,select,.fileEditorArea{
  background:rgba(8,13,22,.84)!important;
  border-color:rgba(148,163,184,.20)!important;
  color:#f8fafc!important;
}
input:focus,select:focus,.fileEditorArea:focus{
  border-color:rgba(96,165,250,.75)!important;
  box-shadow:0 0 0 4px rgba(96,165,250,.16)!important;
}
.sidebar,.topbar,.adminFull,.adminTopbar,.adminCard,.modalBox,.uploadBox,.zipBox,.menu,.toast{
  background:rgba(9,14,24,.90)!important;
  border-color:rgba(148,163,184,.16)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.045)!important;
  backdrop-filter:blur(22px)!important;
}
.userBox,.sidebarGroup,.card,.listRow,.dashCard,.shareCard,.folderItem,.permissionItem,.userItem,.logItem,.backupItem,.storageItem{
  background:linear-gradient(180deg,rgba(17,26,40,.88),rgba(9,14,24,.96))!important;
  border-color:rgba(148,163,184,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 55px rgba(0,0,0,.28)!important;
}
.card:hover,.listRow:hover,.folderItem:hover,.dashCard:hover,.shareCard:hover{
  border-color:rgba(96,165,250,.56)!important;
  box-shadow:0 30px 100px rgba(37,99,235,.13),0 20px 70px rgba(0,0,0,.55)!important;
}
.card.selected,.listRow.selected,.folderItem.selected{
  border-color:rgba(56,189,248,.88)!important;
  background:linear-gradient(180deg,rgba(14,116,144,.34),rgba(9,14,24,.98))!important;
}
.dashHero{
  background:
    radial-gradient(circle at top left,rgba(96,165,250,.18),transparent 42%),
    linear-gradient(135deg,rgba(15,23,42,.98),rgba(7,11,18,.96))!important;
  border-color:rgba(96,165,250,.24)!important;
  box-shadow:0 28px 100px rgba(0,0,0,.44)!important;
}
.dashHero h2,.brand h1{
  background:linear-gradient(90deg,#ffffff,#bfdbfe,#7dd3fc)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.dashPills span,.pathChip,.activityMeta,.okPill{
  background:rgba(96,165,250,.10)!important;
  border-color:rgba(96,165,250,.22)!important;
  color:#bfdbfe!important;
}
.warnPill,.editorWarning{
  background:rgba(148,163,184,.10)!important;
  border-color:rgba(148,163,184,.22)!important;
  color:#cbd5e1!important;
}
.dropzone{
  background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(15,23,42,.55))!important;
  border-color:rgba(96,165,250,.34)!important;
}
.dropzone.drag,.rootDropActive,.pathBox.rootDropActive{
  outline:2px solid rgba(96,165,250,.85)!important;
  box-shadow:0 0 0 7px rgba(96,165,250,.16)!important;
}
.uploadFill,.zipFill{background:linear-gradient(90deg,#2563eb,#38bdf8)!important;}
.selectionBox{border-color:#38bdf8!important;background:rgba(56,189,248,.12)!important;}
.permissionItem input[type=checkbox],.logItem input[type=checkbox]{accent-color:#38bdf8!important;}
.iconPreview{
  background:linear-gradient(180deg,rgba(148,163,184,.08),rgba(15,23,42,.86))!important;
  border-color:rgba(96,165,250,.18)!important;
}

/* Pro Bell: clean shape, fixed layer, no sticky focus popup */
.topbar,.topActions{overflow:visible!important;}
.bellBtn{
  position:relative!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  padding:0!important;
  border-radius:16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:20px!important;
  color:#f8fafc!important;
  background:linear-gradient(145deg,#1e293b,#0f172a)!important;
  border:1px solid rgba(96,165,250,.34)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08)!important;
  isolation:isolate!important;
  z-index:500000!important;
  overflow:visible!important;
}
.bellBtn:hover{
  background:linear-gradient(145deg,#2563eb,#0ea5e9)!important;
  border-color:rgba(191,219,254,.70)!important;
  box-shadow:0 22px 90px rgba(37,99,235,.30),0 18px 60px rgba(0,0,0,.44)!important;
}
.bellBtn.hasUnread{animation:bellPulsePro 1.8s ease-in-out infinite!important;}
@keyframes bellPulsePro{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-1px) scale(1.03)}70%{transform:translateY(0) scale(1)}}
.bellBadge{
  position:absolute!important;
  top:-8px!important;
  right:-8px!important;
  min-width:22px!important;
  height:22px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:#38bdf8!important;
  color:#020617!important;
  border:2px solid #070b12!important;
  font-size:11px!important;
  font-weight:950!important;
  box-shadow:0 8px 28px rgba(56,189,248,.36)!important;
}
.bellHover{
  position:absolute!important;
  right:0!important;
  top:calc(100% + 14px)!important;
  width:min(380px,calc(100vw - 34px))!important;
  max-height:min(480px,70vh)!important;
  overflow:auto!important;
  display:none!important;
  flex-direction:column!important;
  gap:10px!important;
  padding:16px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(9,14,24,.98),rgba(5,8,14,.99))!important;
  border:1px solid rgba(96,165,250,.28)!important;
  box-shadow:0 42px 140px rgba(0,0,0,.82),0 0 0 1px rgba(255,255,255,.04),0 0 70px rgba(37,99,235,.12)!important;
  backdrop-filter:blur(28px)!important;
  z-index:2147483647!important;
  text-align:left!important;
  pointer-events:auto!important;
}
.bellBtn:focus-within .bellHover{display:none!important;}
.bellBtn:hover .bellHover{display:flex!important;}
.bellHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding-bottom:10px!important;border-bottom:1px solid rgba(148,163,184,.16)!important;}
.bellHead b{font-size:14px!important;color:#f8fafc!important;}
.bellHead span{font-size:11px!important;color:#020617!important;background:#38bdf8!important;border-radius:999px!important;padding:5px 9px!important;font-weight:950!important;white-space:nowrap!important;}
.bellHover button{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  padding:11px 12px!important;
  border-radius:16px!important;
  background:rgba(15,23,42,.82)!important;
  border:1px solid rgba(148,163,184,.16)!important;
  box-shadow:none!important;
  color:#e2e8f0!important;
}
.bellHover button:hover{background:rgba(37,99,235,.18)!important;border-color:rgba(96,165,250,.38)!important;transform:translateX(2px)!important;}
.bellHover small{color:#94a3b8!important;line-height:1.35!important;font-size:11px!important;}

/* Login: blue/grey pro look */
.loginScreen{
  background:
    radial-gradient(circle at 22% 16%,rgba(37,99,235,.24),transparent 33%),
    radial-gradient(circle at 82% 18%,rgba(56,189,248,.14),transparent 35%),
    linear-gradient(135deg,#070b12,#0b1220 48%,#05070d)!important;
  overflow:hidden!important;
}
.loginScreen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(148,163,184,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.035) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at center,black 0%,transparent 74%);
}
.loginBox{
  position:relative!important;
  width:min(430px,92vw)!important;
  padding:38px 34px!important;
  border-radius:34px!important;
  background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(7,11,18,.96))!important;
  border:1px solid rgba(148,163,184,.18)!important;
  box-shadow:0 44px 140px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(24px)!important;
  animation:loginFloat .65s cubic-bezier(.2,.8,.2,1) both!important;
}
.loginBox::before{
  content:"☁"!important;
  width:74px!important;height:74px!important;margin:0 auto 6px!important;
  border-radius:24px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  font-size:34px!important;color:#fff!important;
  background:linear-gradient(135deg,#2563eb,#38bdf8)!important;
  box-shadow:0 24px 80px rgba(37,99,235,.30)!important;
}
.loginBox h1{font-size:34px!important;letter-spacing:-.04em!important;background:linear-gradient(90deg,#fff,#bfdbfe,#7dd3fc)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;}
.loginBox p{color:#cbd5e1!important;margin-top:-4px!important;}
.loginBox input{height:52px!important;border-radius:18px!important;background:rgba(7,11,18,.82)!important;border-color:rgba(148,163,184,.22)!important;}
.loginBox button{height:54px!important;border-radius:18px!important;background:linear-gradient(135deg,#2563eb,#38bdf8)!important;color:#fff!important;border:1px solid rgba(191,219,254,.42)!important;box-shadow:0 22px 80px rgba(37,99,235,.24)!important;}
.loginHint{color:#94a3b8!important;font-size:12px!important;border:1px solid rgba(148,163,184,.16)!important;border-radius:14px!important;padding:10px!important;background:rgba(15,23,42,.55)!important;}
@keyframes loginFloat{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Mobile polish */
@media(max-width:900px){
  html,body{overflow:auto!important;}
  .app{min-height:100dvh;height:auto!important;display:block!important;overflow:visible!important;}
  .sidebar{position:relative!important;width:100%!important;max-height:none!important;border-right:0!important;border-bottom:1px solid rgba(148,163,184,.16)!important;overflow:visible!important;}
  .main{height:auto!important;min-height:100dvh!important;overflow:visible!important;}
  .fileView{height:auto!important;min-height:100dvh!important;overflow:visible!important;}
  .topbar{position:sticky!important;top:0!important;z-index:10000!important;display:grid!important;grid-template-columns:auto 1fr!important;align-items:start!important;gap:10px!important;padding:12px!important;}
  .topActions{grid-column:1/-1!important;display:grid!important;grid-template-columns:auto 1fr!important;width:100%!important;gap:8px!important;overflow:visible!important;}
  .topActions select,.topActions button:not(.bellBtn){min-height:42px!important;font-size:12px!important;padding:9px!important;}
  .topActions input{min-width:0!important;width:100%!important;}
  .bellBtn{width:44px!important;height:44px!important;min-width:44px!important;border-radius:15px!important;}
  .bellHover{left:0!important;right:auto!important;top:calc(100% + 10px)!important;width:min(92vw,380px)!important;max-height:60vh!important;}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:12px!important;gap:12px!important;overflow:visible!important;}
  .card{min-height:132px!important;}
  .dropzone{margin:12px!important;min-height:96px!important;}
}
@media(max-width:520px){
  .topActions{grid-template-columns:1fr 1fr!important;}
  .bellBtn{grid-column:1/2!important;}
  .topActions input{grid-column:2/3!important;}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .loginBox{padding:28px 22px!important;border-radius:28px!important;}
  .loginBox h1{font-size:29px!important;}
}

/* =========================
   V17 Auth Pro UI
========================= */
.loginBox{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.22) !important;
  background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(2,6,23,.96)) !important;
  box-shadow:0 32px 90px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.loginBox::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:radial-gradient(circle at 25% 10%,rgba(59,130,246,.20),transparent 34%),radial-gradient(circle at 90% 35%,rgba(148,163,184,.12),transparent 30%);
  pointer-events:none;
  animation:authGlow 8s ease-in-out infinite alternate;
}
.loginBox>*{position:relative;z-index:1}
@keyframes authGlow{from{transform:translate3d(-12px,-8px,0) scale(1)}to{transform:translate3d(12px,10px,0) scale(1.05)}}
.loginActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.ghostBtn{
  background:rgba(15,23,42,.74) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  color:#dbeafe !important;
  box-shadow:none !important;
}
.ghostBtn:hover{
  border-color:rgba(96,165,250,.55) !important;
  background:rgba(30,41,59,.9) !important;
}
.authModalBox{
  width:min(96vw,720px) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  background:linear-gradient(180deg,rgba(15,23,42,.97),rgba(2,6,23,.985)) !important;
  box-shadow:0 32px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.securityQuestionGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;
  margin-top:14px;
}
.securityQuestionItem{
  background:rgba(15,23,42,.84);
  border:1px solid rgba(148,163,184,.16);
  border-radius:20px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.securityQuestionItem label{
  color:#dbeafe;
  font-weight:800;
  font-size:13px;
}
.tokenAdminCard{
  position:relative;
  overflow:hidden;
}
.tokenAdminCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right,rgba(59,130,246,.11),transparent 34%);
  pointer-events:none;
}
.tokenAdminCard>*{position:relative;z-index:1}
.tokenReveal{
  margin:16px 0;
  background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(15,23,42,.88));
  border:1px solid rgba(96,165,250,.28);
  border-radius:24px;
  padding:16px;
}
.tokenReveal input{
  width:100%;
  margin:12px 0;
  font-family:Consolas,monospace;
  letter-spacing:.03em;
}
.tokenItem{
  margin-top:12px;
  padding:15px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(15,23,42,.74);
}
.tokenItem.active{border-color:rgba(34,197,94,.34);box-shadow:inset 4px 0 0 rgba(34,197,94,.75)}
.tokenItem.used{border-color:rgba(148,163,184,.18);opacity:.72;box-shadow:inset 4px 0 0 rgba(148,163,184,.55)}
.tokenItem.expired{border-color:rgba(248,113,113,.25);opacity:.72;box-shadow:inset 4px 0 0 rgba(248,113,113,.62)}
@media(max-width:720px){
  .loginActions{grid-template-columns:1fr}
  .securityQuestionGrid{grid-template-columns:1fr}
  .tokenItem{align-items:stretch;flex-direction:column}
  .authModalBox{max-height:92vh;overflow:auto}
}


/* =========================
   V18 Secure Questions UI
   - 3 eigene Sicherheitsfragen sauber ausgerichtet
========================= */
.authModalBox{
  width:min(94vw,860px)!important;
  padding:28px!important;
}
.authModalBox h2{
  margin-bottom:2px!important;
  letter-spacing:-.03em!important;
}
.authModalBox > input{
  width:100%!important;
  height:52px!important;
  display:block!important;
}
.securityQuestionGrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
  width:100%!important;
  margin:8px 0 2px!important;
}
.securityQuestionItem{
  min-height:166px!important;
  display:grid!important;
  grid-template-rows:auto 52px 52px!important;
  gap:12px!important;
  padding:16px!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(8,13,24,.96))!important;
  border:1px solid rgba(148,163,184,.22)!important;
}
.securityQuestionItem label{
  color:#e5eefc!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
}
.securityQuestionItem select,
.securityQuestionItem input{
  width:100%!important;
  min-width:0!important;
  height:52px!important;
  border-radius:16px!important;
  background:rgba(2,6,23,.82)!important;
}
.authModalBox .modalActions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  margin-top:4px!important;
}
.authModalBox .modalActions button{
  min-width:170px!important;
  height:52px!important;
}
@media(max-width:900px){
  .authModalBox{width:100%!important;max-height:92dvh!important;padding:20px!important;}
  .securityQuestionGrid{grid-template-columns:1fr!important;}
  .securityQuestionItem{min-height:auto!important;grid-template-rows:auto 50px 50px!important;}
  .authModalBox .modalActions{display:grid!important;grid-template-columns:1fr!important;}
  .authModalBox .modalActions button{width:100%!important;}
}

/* =========================
   V19 Registration copy + clean aligned questions
========================= */
.tokenRevealHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.tokenBadge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:7px 11px;
  border-radius:999px;
  color:#dbeafe;
  background:rgba(30,41,59,.92);
  border:1px solid rgba(148,163,184,.24);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.copyFieldLabel{
  display:block;
  margin:12px 0 7px;
  color:#cbd5e1;
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.copyFieldRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.copyFieldRow input{
  margin:0!important;
  min-width:0!important;
}
.copyFieldRow button{
  height:52px!important;
  white-space:nowrap;
}
.authModalBox{
  width:min(94vw,900px)!important;
}
.securityQuestionGrid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
}
.securityQuestionItem{
  height:180px!important;
  min-height:180px!important;
  display:grid!important;
  grid-template-rows:22px 52px 52px!important;
  align-content:start!important;
}
.securityQuestionItem label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:980px){
  .securityQuestionGrid{grid-template-columns:1fr!important;}
  .securityQuestionItem{height:auto!important;min-height:auto!important;}
  .copyFieldRow{grid-template-columns:1fr!important;}
  .copyFieldRow button{width:100%!important;}
  .tokenRevealHead{align-items:flex-start;flex-direction:column;}
}

/* =========================
   V23 PRO CLEAN BLUE/GREY + MOBILE FIXES
========================= */
:root{
  --bg:#050914!important;
  --panel:#0a1020!important;
  --card:#0f172a!important;
  --card2:#111827!important;
  --line:rgba(148,163,184,.18)!important;
  --text:#f8fafc!important;
  --muted:#94a3b8!important;
  --blue:#2563eb!important;
  --blue2:#38bdf8!important;
  --danger:#ef4444!important;
  --danger2:#7f1d1d!important;
  --shadow:0 28px 90px rgba(0,0,0,.45)!important;
}
html,body{height:100%!important;min-height:100%!important;overflow:hidden!important;background:#050914!important;}
body{background:radial-gradient(circle at 20% -10%,rgba(37,99,235,.32),transparent 36%),radial-gradient(circle at 95% 0%,rgba(56,189,248,.14),transparent 28%),linear-gradient(135deg,#050914,#0b1220 48%,#111827)!important;}
button{background:linear-gradient(135deg,#1d4ed8,#38bdf8)!important;border:1px solid rgba(191,219,254,.28)!important;box-shadow:0 16px 50px rgba(37,99,235,.22)!important;}
button:hover{filter:none!important;transform:translateY(-1px)!important;border-color:rgba(191,219,254,.55)!important;}
.danger{background:linear-gradient(135deg,#ef4444,#991b1b)!important;border-color:rgba(254,202,202,.4)!important;box-shadow:0 18px 70px rgba(239,68,68,.28)!important;color:#fff!important;}
.danger:hover{background:linear-gradient(135deg,#f87171,#7f1d1d)!important;box-shadow:0 22px 80px rgba(239,68,68,.36)!important;}
input,select,textarea{background:rgba(5,9,20,.76)!important;border-color:rgba(148,163,184,.22)!important;color:#f8fafc!important;}
input:focus,select:focus,textarea:focus{border-color:#7dd3fc!important;box-shadow:0 0 0 3px rgba(56,189,248,.16)!important;}
.sidebar,.topbar,.adminCard,.adminTopbar,.modalBox,.userBox,.sidebarGroup,.card,.listRow,.menu,.toast,.uploadBox,.zipBox{background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(8,13,26,.97))!important;border-color:rgba(148,163,184,.18)!important;box-shadow:0 22px 70px rgba(0,0,0,.35)!important;}
.brandIcon,.adminBtn,.navGroup button.active{background:linear-gradient(135deg,#1e40af,#38bdf8)!important;box-shadow:0 16px 55px rgba(37,99,235,.25)!important;}
.dropzone{background:linear-gradient(180deg,rgba(37,99,235,.10),rgba(15,23,42,.38))!important;border-color:rgba(125,211,252,.36)!important;}
.dropzone span{color:#bae6fd!important;}
.card:hover,.listRow:hover,.folderItem:hover{border-color:rgba(125,211,252,.6)!important;box-shadow:0 20px 70px rgba(37,99,235,.18)!important;}
.card.selected,.listRow.selected,.folderItem.selected{border-color:#7dd3fc!important;background:linear-gradient(180deg,rgba(14,116,144,.30),rgba(30,64,175,.28))!important;}
.uploadFill,.zipFill{background:linear-gradient(90deg,#2563eb,#38bdf8)!important;}
.selectionBox{border-color:#7dd3fc!important;background:rgba(56,189,248,.14)!important;}

/* Bell: dunkles Popup ohne weißen Schimmer */
.bellBtn{position:relative!important;background:linear-gradient(135deg,#111827,#1e293b)!important;border:1px solid rgba(148,163,184,.28)!important;box-shadow:0 14px 45px rgba(0,0,0,.34)!important;overflow:visible!important;z-index:900000!important;}
.bellBtn::before,.bellBtn::after,.bellHover::before,.bellHover::after{display:none!important;content:none!important;}
.bellBtn:hover{background:linear-gradient(135deg,#172033,#26344f)!important;}
.bellBadge{background:#38bdf8!important;color:#020617!important;border:2px solid #050914!important;box-shadow:none!important;}
.bellHover{background:#070b14!important;background-image:none!important;border:1px solid rgba(148,163,184,.28)!important;box-shadow:0 32px 120px rgba(0,0,0,.72)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:9999999!important;color:#f8fafc!important;}
.bellHover.forceHidden{display:none!important;}
.bellBtn:focus-within .bellHover{display:none!important;}
.bellBtn:hover .bellHover{display:flex!important;}
.bellHead{border-bottom:1px solid rgba(148,163,184,.16)!important;}
.bellHead span{background:#38bdf8!important;color:#020617!important;}
.bellHover button{background:#0f172a!important;border:1px solid rgba(148,163,184,.18)!important;box-shadow:none!important;color:#f8fafc!important;}
.bellHover button:hover{background:#152238!important;border-color:rgba(125,211,252,.46)!important;transform:translateX(2px)!important;}

/* Login professionell gerade */
.loginScreen{background:radial-gradient(circle at 30% 0%,rgba(37,99,235,.34),transparent 34%),radial-gradient(circle at 100% 20%,rgba(56,189,248,.12),transparent 28%),linear-gradient(135deg,#050914,#0b1220 55%,#111827)!important;padding:18px!important;overflow:auto!important;}
.loginBox{width:min(430px,94vw)!important;background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(8,13,26,.96))!important;border:1px solid rgba(148,163,184,.22)!important;border-radius:34px!important;box-shadow:0 35px 120px rgba(0,0,0,.55)!important;padding:34px!important;display:flex!important;flex-direction:column!important;gap:14px!important;}
.loginBox::before{display:none!important;}
.loginBox h1{color:#f8fafc!important;background:none!important;-webkit-text-fill-color:#f8fafc!important;text-align:center!important;}
.loginBox p,.loginHint{color:#94a3b8!important;text-align:center!important;}
.loginActions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;}
.loginActions button,.ghostBtn{background:rgba(15,23,42,.82)!important;border:1px solid rgba(148,163,184,.24)!important;box-shadow:none!important;color:#e5e7eb!important;}

/* Modal/confirm dangerous layout */
.dangerConfirm .modalBox{border-color:rgba(248,113,113,.45)!important;box-shadow:0 0 0 1px rgba(248,113,113,.18),0 40px 120px rgba(127,29,29,.34)!important;}
.dangerConfirm h2::before{content:'⚠ ';}
.modalActions .danger:first-child, .dangerConfirm .modalActions button:first-child{background:linear-gradient(135deg,#ef4444,#7f1d1d)!important;border-color:rgba(254,202,202,.42)!important;}
.modalActions button:not(.danger){background:linear-gradient(135deg,#334155,#111827)!important;border-color:rgba(148,163,184,.22)!important;}

/* Registration request / forms aligned */
.authModalBox{width:min(900px,94vw)!important;}
.securityQuestionGrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;align-items:start!important;}
.securityQuestionItem{display:grid!important;gap:8px!important;background:rgba(2,6,23,.45)!important;border:1px solid rgba(148,163,184,.16)!important;border-radius:18px!important;padding:12px!important;}
.securityQuestionItem label{font-weight:800!important;color:#e5e7eb!important;font-size:13px!important;}
.registerRequestRow{display:grid!important;grid-template-columns:1fr auto!important;gap:10px!important;align-items:center!important;}
.tokenItem{background:#070b14!important;border:1px solid rgba(148,163,184,.18)!important;border-radius:18px!important;padding:14px!important;margin-top:12px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
.tokenItem.active{border-color:rgba(56,189,248,.35)!important;}
.tokenItem.used,.tokenItem.expired{opacity:.78!important;}

/* extra search */
#folderSearch{width:210px!important;}
#globalSearch{width:210px!important;}

/* Marquee starts faster */
.card:hover .marqueeText,.listRow:hover .marqueeText,.folderItem:hover .marqueeText,.card:active .marqueeText,.listRow:active .marqueeText,.folderItem:active .marqueeText{animation-delay:.18s!important;}
@keyframes marquee{0%{transform:translateX(0)}5%{transform:translateX(0)}95%{transform:translateX(calc(-100% + 100px))}100%{transform:translateX(calc(-100% + 100px))}}

/* MOBILE: echte Scrollbarkeit, keine Überlappung */
@media(max-width:980px){
  html,body{overflow:auto!important;height:auto!important;min-height:100%!important;}
  .app{height:auto!important;min-height:100vh!important;display:block!important;overflow:visible!important;}
  .sidebar{position:relative!important;width:100%!important;max-height:none!important;height:auto!important;overflow:visible!important;padding:12px!important;border-right:none!important;border-bottom:1px solid rgba(148,163,184,.18)!important;}
  .brand{padding:12px!important;border-radius:20px!important;}.brandIcon{width:48px!important;height:48px!important;font-size:24px!important;}.brand h1{font-size:22px!important;}
  .userBox{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;align-items:center!important;}
  .userBox #userInfo{grid-column:1/-1!important;}
  .navGroup{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important;}
  .navGroup button{justify-content:center!important;padding:10px 8px!important;font-size:12px!important;}.navGroup button span{display:none!important;}
  .foldersBlock{max-height:220px!important;overflow:auto!important;}
  .main,.fileView{height:auto!important;min-height:60vh!important;overflow:visible!important;display:block!important;}
  .topbar{position:sticky!important;top:0!important;z-index:50000!important;display:block!important;padding:12px!important;min-height:0!important;background:rgba(5,9,20,.96)!important;}
  .pathBox{width:100%!important;min-width:0!important;margin:10px 0!important;}
  .topActions{display:grid!important;grid-template-columns:48px 1fr 1fr!important;gap:8px!important;width:100%!important;margin:0!important;align-items:stretch!important;}
  .topActions input,.topActions select,.topActions button:not(.bellBtn){width:100%!important;min-width:0!important;min-height:42px!important;padding:9px!important;font-size:12px!important;}
  .bellBtn{grid-column:1!important;grid-row:1!important;width:44px!important;height:44px!important;min-width:44px!important;}
  #globalSearch{grid-column:2/4!important;width:100%!important;}
  #folderSearch{grid-column:1/4!important;width:100%!important;}
  .bellHover{left:0!important;right:auto!important;top:calc(100% + 10px)!important;width:calc(100vw - 24px)!important;max-height:58vh!important;overflow:auto!important;}
  .cloudDashboard,.quickPanel{padding:10px!important;}.dashCards{grid-template-columns:1fr 1fr!important;}
  .dropzone{margin:12px!important;min-height:82px!important;border-radius:22px!important;}.dropzone b{font-size:16px!important;}
  .grid{height:auto!important;overflow:visible!important;padding:12px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .card{min-height:122px!important;border-radius:20px!important;padding:10px!important;}.iconPreview{height:70px!important;}.thumbWrap{height:70px!important;}
  .grid.listView{display:block!important;}.listHeader{display:none!important;}.listRow{grid-template-columns:1fr!important;margin-bottom:8px!important;}
  .adminFull{height:auto!important;overflow:visible!important;padding:12px!important;}.adminTopbar{display:grid!important;gap:12px!important;padding:16px!important;}.adminTabs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .formGrid,.permissionGrid{grid-template-columns:1fr!important;}.adminCard{padding:16px!important;border-radius:22px!important;}
  .modal{align-items:flex-start!important;overflow:auto!important;padding:12px!important;}.modalBox{width:100%!important;max-height:none!important;margin:24px 0!important;border-radius:24px!important;}.previewBox iframe,.previewBox video,.previewBox img{max-height:68vh!important;}
  .securityQuestionGrid{grid-template-columns:1fr!important;}.registerRequestRow{grid-template-columns:1fr!important;}.loginActions{grid-template-columns:1fr!important;}.tokenItem{display:grid!important;}
  .uploadBox,.zipBox{left:10px!important;right:10px!important;width:auto!important;bottom:12px!important;max-height:55vh!important;overflow:auto!important;}
}
@media(max-width:520px){
  .topActions{grid-template-columns:44px 1fr!important;}.bellBtn{grid-column:1!important;}#globalSearch{grid-column:2!important;}#folderSearch{grid-column:1/3!important;}.topActions select,.topActions button:not(.bellBtn){grid-column:auto!important;}
  .grid{grid-template-columns:1fr 1fr!important;}.dashCards{grid-template-columns:1fr!important;}.adminTabs{grid-template-columns:1fr!important;}.loginBox{padding:24px 18px!important;}
}


/* Rename: Dateiendung statisch schützen */
.renameLine{display:flex;align-items:center;gap:10px;width:100%;}
.renameLine input{flex:1;min-width:0;}
.renameSuffix{display:inline-flex;align-items:center;align-self:stretch;padding:0 14px;border-radius:16px;background:rgba(148,163,184,.14);border:1px solid rgba(148,163,184,.24);color:#dbeafe;font-weight:900;letter-spacing:.3px;user-select:none;}
.renameHint{margin-top:10px;color:#93a4b8;}
@media(max-width:640px){.renameLine{gap:8px}.renameSuffix{padding:0 10px;font-size:13px}}

/* =========================
   V32 Bell Popup Pro + Root Drop
========================= */
.bellBtn{
  position:relative!important;
  overflow:visible!important;
  z-index:2000000!important;
}
.bellHover{
  pointer-events:auto!important;
  z-index:3000000!important;
}
.bellHover.manualOpen{
  display:flex!important;
}
.bellHover.forceHidden{
  display:none!important;
}
.bellFooter{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.bellFooter button{
  justify-content:center!important;
  text-align:center!important;
  font-weight:900!important;
}
.bellReadBtn{
  background:linear-gradient(135deg,#0f766e,#14b8a6)!important;
  border-color:rgba(45,212,191,.55)!important;
}
.bellOpenBtn{
  background:linear-gradient(135deg,#1e3a8a,#2563eb)!important;
  border-color:rgba(96,165,250,.5)!important;
}
.bellItemBtn{
  cursor:pointer!important;
}
.bellFileIcon{
  flex:0 0 auto;
}
.bellFileText{
  min-width:0;
  flex:1;
}
.rootDropActive,
.pathBox.rootDropActive{
  outline:2px solid #60a5fa!important;
  box-shadow:0 0 0 6px rgba(96,165,250,.18),0 18px 50px rgba(37,99,235,.25)!important;
  background:rgba(37,99,235,.16)!important;
}
@media(max-width:700px){
  .bellFooter{grid-template-columns:1fr;}
}

/* V33 Dashboard cards are real navigation buttons */
.dashCardBtn{
    appearance:none;
    border:1px solid rgba(148,163,184,.22) !important;
    text-align:left;
    cursor:pointer;
    width:100%;
    background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(2,6,23,.82)) !important;
    box-shadow:0 16px 44px rgba(0,0,0,.28) !important;
    transform:none;
}
.dashCardBtn:hover{
    border-color:rgba(96,165,250,.55) !important;
    background:linear-gradient(180deg,rgba(30,41,59,.98),rgba(15,23,42,.92)) !important;
    box-shadow:0 18px 55px rgba(37,99,235,.22) !important;
    transform:translateY(-2px);
}
.dashCardBtn:active{
    transform:translateY(0) scale(.99);
}
.dashCardBtn span,
.dashCardBtn b{
    pointer-events:none;
}
@media(max-width:760px){
    .dashCardBtn{min-height:76px;}
}

/* V34: Bell delete button + cleaner dashboard return */
.bellFooter{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.bellDangerBtn{
  background:linear-gradient(135deg,#7f1d1d,#dc2626) !important;
  border:1px solid rgba(248,113,113,.45) !important;
  color:#fff !important;
  box-shadow:0 10px 25px rgba(127,29,29,.28) !important;
}
.bellDangerBtn:hover{
  filter:brightness(1.12);
  transform:translateY(-1px);
}
.dashCardBtn{
  cursor:pointer;
}
.dashCardBtn:focus-visible{
  outline:2px solid rgba(147,197,253,.75);
  outline-offset:3px;
}

/* v36 Discord Direktlink Box */
.shareDirectBox{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(96,165,250,.25);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(37,99,235,.12),rgba(15,23,42,.72));
}
.shareDirectBox b{display:block;margin-bottom:8px;color:#dbeafe;}
.shareDirectBox input{margin-bottom:10px;}

/* =========================================================
   V45 MOBILE UI FIX - clean smartphone layout
   Fixes cramped buttons, scrolling and overlapping on phones
========================================================= */

@media (max-width: 980px){
  html, body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  body{
    background:
      radial-gradient(circle at 20% -10%, rgba(59,130,246,.28), transparent 34%),
      linear-gradient(180deg,#020617 0%,#071326 42%,#020617 100%)!important;
  }

  .app{
    width:100%!important;
    min-height:100dvh!important;
    height:auto!important;
    display:block!important;
    overflow:visible!important;
  }

  .main,
  .fileView{
    width:100%!important;
    height:auto!important;
    min-height:auto!important;
    display:block!important;
    overflow:visible!important;
  }

  .sidebar{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:12px!important;
    gap:12px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(148,163,184,.18)!important;
    background:linear-gradient(180deg,rgba(8,13,28,.98),rgba(4,8,18,.96))!important;
  }

  .brand{
    padding:14px!important;
    border-radius:26px!important;
    gap:14px!important;
  }

  .brandIcon{
    width:64px!important;
    height:64px!important;
    border-radius:20px!important;
    flex:0 0 auto!important;
  }

  .brand h1{
    font-size:30px!important;
    line-height:1.05!important;
  }

  .userBox,
  .sidebarGroup{
    padding:14px!important;
    border-radius:24px!important;
  }

  .userBox button,
  .sidebarGroup button{
    min-height:48px!important;
    width:100%!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  .navGroup{
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:10px!important;
  }

  .navGroup button{
    width:100%!important;
    min-width:0!important;
    padding:12px 8px!important;
    border-radius:18px!important;
    font-size:0!important;
    justify-content:center!important;
  }

  .navGroup button::first-letter,
  .navGroup button span{
    font-size:22px!important;
  }

  .folderHeader{
    min-height:52px!important;
    font-size:24px!important;
  }

  .folderPlus{
    width:54px!important;
    height:54px!important;
    border-radius:18px!important;
    font-size:30px!important;
  }

  #folderList{
    max-height:32vh!important;
    overflow:auto!important;
    padding-right:2px!important;
  }

  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:50000!important;
    display:block!important;
    width:100%!important;
    min-height:0!important;
    padding:12px!important;
    background:rgba(4,9,20,.96)!important;
    backdrop-filter:blur(20px)!important;
    border-bottom:1px solid rgba(148,163,184,.18)!important;
    overflow:visible!important;
  }

  .pathBox{
    width:100%!important;
    min-width:0!important;
    margin-bottom:10px!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    font-size:16px!important;
    border-radius:18px!important;
  }

  .topActions{
    width:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:56px 1fr!important;
    gap:10px!important;
    align-items:stretch!important;
    overflow:visible!important;
  }

  .bellBtn{
    grid-column:1!important;
    grid-row:1!important;
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
    border-radius:18px!important;
    padding:0!important;
    font-size:24px!important;
  }

  #globalSearch{
    grid-column:2!important;
    grid-row:1!important;
  }

  #folderSearch{
    grid-column:1 / -1!important;
    grid-row:2!important;
  }

  #viewSelect,
  #sortSelect{
    grid-row:3!important;
  }

  #viewSelect{grid-column:1 / 2!important;}
  #sortSelect{grid-column:2 / 3!important;}

  .topActions input,
  .topActions select,
  .topActions button:not(.bellBtn){
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    height:50px!important;
    padding:0 14px!important;
    border-radius:18px!important;
    font-size:14px!important;
    line-height:1.15!important;
    box-shadow:none!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .topActions button:not(.bellBtn){
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-weight:900!important;
  }

  .topActions button[onclick="openUpload()"]{
    grid-column:1 / 2!important;
    grid-row:4!important;
  }

  .topActions button[onclick="downloadSelected()"]{
    grid-column:2 / 3!important;
    grid-row:4!important;
  }

  .topActions button[onclick="selectAllFiles()"]{
    grid-column:1 / -1!important;
    grid-row:5!important;
  }

  #emptyTrashBtn{
    grid-column:1 / -1!important;
  }

  .cloudDashboard,
  .quickPanel{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .dashHero{
    margin:12px 0!important;
    padding:18px!important;
    border-radius:24px!important;
  }

  .dashHero h2{
    font-size:25px!important;
    line-height:1.15!important;
    word-break:break-word!important;
  }

  .dashCards{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .dashCard,
  .dashCardBtn{
    min-height:76px!important;
    padding:14px!important;
    border-radius:20px!important;
  }

  .dropzone{
    margin:12px!important;
    min-height:88px!important;
    border-radius:22px!important;
    padding:14px!important;
  }

  .dropzone b{
    font-size:17px!important;
  }

  .grid{
    height:auto!important;
    min-height:45vh!important;
    overflow:visible!important;
    padding:12px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    align-content:start!important;
  }

  .card{
    min-height:132px!important;
    padding:10px!important;
    border-radius:20px!important;
  }

  .thumbWrap{
    height:72px!important;
    border-radius:14px!important;
  }

  .icon{
    font-size:40px!important;
    margin-top:6px!important;
  }

  .name{
    font-size:12px!important;
    margin-top:8px!important;
  }

  .grid.listView{
    display:flex!important;
    flex-direction:column!important;
  }

  .listHeader{
    display:none!important;
  }

  .listRow{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    padding:14px!important;
  }

  .listMeta{
    font-size:12px!important;
  }

  .bellHover{
    position:fixed!important;
    top:76px!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:62vh!important;
    overflow:auto!important;
    z-index:9999999!important;
    border-radius:22px!important;
  }

  .menu{
    max-width:calc(100vw - 20px)!important;
    min-width:min(280px,calc(100vw - 20px))!important;
    z-index:9999999!important;
  }

  .modal{
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:auto!important;
    padding:12px!important;
  }

  .modalBox{
    width:100%!important;
    max-height:none!important;
    margin:20px 0!important;
    border-radius:24px!important;
    padding:18px!important;
  }

  .uploadBox,
  .zipBox{
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-height:55vh!important;
    overflow:auto!important;
    bottom:12px!important;
    z-index:999999!important;
  }

  .adminFull{
    padding:12px!important;
    height:auto!important;
    min-height:100dvh!important;
    overflow:visible!important;
  }

  .adminTopbar{
    display:block!important;
    padding:18px!important;
    border-radius:24px!important;
  }

  .adminTopbar button{
    width:100%!important;
    margin-top:12px!important;
  }

  .adminTabs{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    padding:8px!important;
  }

  .adminTabs button{
    min-height:44px!important;
    padding:8px!important;
    font-size:12px!important;
  }

  .formGrid,
  .permissionGrid{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
}

@media (max-width: 430px){
  .sidebar{padding:10px!important;}
  .brand h1{font-size:27px!important;}
  .brandIcon{width:58px!important;height:58px!important;}
  .topbar{padding:10px!important;}
  .topActions{grid-template-columns:52px 1fr!important;gap:8px!important;}
  .bellBtn{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;}
  .topActions input,
  .topActions select,
  .topActions button:not(.bellBtn){
    min-height:48px!important;
    height:48px!important;
    font-size:13px!important;
    padding:0 10px!important;
    border-radius:16px!important;
  }
  .dashCards{grid-template-columns:1fr!important;}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .card{min-height:124px!important;}
}

/* =========================================================
   V46 MOBILE + LOGIN HARD FIX
   - app cannot show over login
   - phone layout is one clean vertical flow
========================================================= */
.loginScreen{
  z-index:2147483000!important;
}
.loginScreen:not(.hidden){
  display:flex!important;
}
.loginScreen.hidden{display:none!important;}
#app.hidden{display:none!important;}
body.authLocked #app{display:none!important;}
body.authLocked #loginScreen{display:flex!important;}

@media (max-width: 980px){
  html,body{
    width:100%!important;
    min-height:100%!important;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
  }
  body{position:relative!important;}
  .app{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-height:100svh!important;
    height:auto!important;
    overflow:visible!important;
  }
  .app.hidden{display:none!important;}
  .sidebar{
    flex:0 0 auto!important;
    width:100%!important;
    padding:12px!important;
    gap:12px!important;
    overflow:visible!important;
  }
  .main,.fileView{
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .topbar{
    position:relative!important;
    top:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    padding:12px!important;
    gap:10px!important;
    overflow:visible!important;
    z-index:50!important;
  }
  #backBtn{
    width:100%!important;
    min-height:46px!important;
    display:none;
  }
  #backBtn[style*="inline-flex"]{
    display:flex!important;
  }
  .pathBox{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .topActions{
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
    margin:0!important;
    overflow:visible!important;
  }
  .bellBtn{grid-column:1!important;grid-row:1!important;}
  #globalSearch{grid-column:2!important;grid-row:1!important;}
  #folderSearch{grid-column:1 / -1!important;grid-row:2!important;}
  #viewSelect{grid-column:1!important;grid-row:3!important;}
  #sortSelect{grid-column:2!important;grid-row:3!important;}
  .topActions button[onclick="openUpload()"]{grid-column:1!important;grid-row:4!important;}
  .topActions button[onclick="downloadSelected()"]{grid-column:2!important;grid-row:4!important;}
  .topActions button[onclick="selectAllVisible()"],
  .topActions button[onclick="selectAllFiles()"]{
    grid-column:1 / -1!important;
    grid-row:5!important;
  }
  #emptyTrashBtn{grid-column:1 / -1!important;}
  .topActions input,.topActions select,.topActions button:not(.bellBtn){
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:52px!important;
    height:52px!important;
    padding:0 12px!important;
    border-radius:18px!important;
    font-size:14px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .cloudDashboard,.dropzone,.quickPanel,.grid{position:relative!important;z-index:1!important;}
  .cloudDashboard{padding:0 12px!important;}
  .dropzone{margin:12px!important;}
  .grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    height:auto!important;
    min-height:320px!important;
    overflow:visible!important;
    padding:12px 12px 100px!important;
  }
  .card{width:100%!important;min-width:0!important;}
}

@media (max-width: 420px){
  .brand h1{font-size:25px!important;}
  .brandIcon{width:56px!important;height:56px!important;}
  .navGroup{gap:8px!important;}
  .topActions{grid-template-columns:54px minmax(0,1fr)!important;gap:8px!important;}
  .topActions input,.topActions select,.topActions button:not(.bellBtn){font-size:13px!important;min-height:50px!important;height:50px!important;}
  .grid{gap:10px!important;}
}

/* =========================================================
   V47 MOBILE CLEAN PRO
   Ziel: Handy-Seite deutlich aufgeraeumter, keine Ueberlappung,
   weniger volle Bereiche, klare Reihenfolge.
========================================================= */
@media (max-width: 820px){
  :root{--mobile-pad:14px;}

  html,body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body{
    background:#081120!important;
  }

  .app:not(.hidden){
    display:block!important;
    min-height:100svh!important;
    height:auto!important;
    overflow:visible!important;
  }

  /* Kopfbereich viel ruhiger */
  .sidebar{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:var(--mobile-pad)!important;
    gap:10px!important;
    overflow:visible!important;
    border-right:0!important;
    border-bottom:1px solid rgba(148,163,184,.14)!important;
    background:linear-gradient(180deg,rgba(8,17,32,.98),rgba(8,17,32,.92))!important;
  }

  .brand{
    min-height:76px!important;
    padding:12px!important;
    border-radius:24px!important;
    gap:12px!important;
  }

  .brandIcon{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    border-radius:18px!important;
    font-size:26px!important;
  }

  .brand h1{
    font-size:26px!important;
    line-height:1.05!important;
  }

  .brand p{
    font-size:13px!important;
    margin-top:4px!important;
  }

  .userBox{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    padding:10px!important;
    border-radius:20px!important;
  }

  #userInfo{
    grid-column:1 / -1!important;
    min-height:0!important;
    font-size:13px!important;
    color:#cbd5e1!important;
    overflow:hidden!important;
  }

  .userBox button{
    width:100%!important;
    min-height:46px!important;
    padding:0 10px!important;
    border-radius:16px!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }

  #adminMainBtn.hidden + .danger,
  #adminMainBtn.hidden ~ .danger{
    grid-column:1 / -1!important;
  }

  .navGroup{
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:20px!important;
  }

  .navGroup button{
    min-width:0!important;
    width:100%!important;
    min-height:54px!important;
    padding:0!important;
    border-radius:18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:0!important;
  }

  .navGroup button::first-letter{font-size:22px!important;}
  .navGroup button span{display:none!important;}

  .foldersBlock{
    padding:12px!important;
    border-radius:20px!important;
  }

  .folderHeader{
    min-height:44px!important;
  }

  .folderHeader span{
    font-size:18px!important;
  }

  .folderPlus{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    border-radius:16px!important;
  }

  #folderList{
    display:flex!important;
    flex-direction:row!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:2px 2px 4px!important;
    scrollbar-width:thin!important;
  }

  #folderList:empty{display:none!important;}

  .folderItem{
    flex:0 0 auto!important;
    max-width:190px!important;
    min-height:44px!important;
    padding:10px 12px!important;
    border-radius:16px!important;
    white-space:nowrap!important;
  }

  .folderNameText{
    max-width:130px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    display:inline-block!important;
  }

  .main,.fileView{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
  }

  /* Topbar als ruhiger Werkzeugkasten */
  .topbar{
    margin:0!important;
    padding:12px var(--mobile-pad)!important;
    gap:10px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:stretch!important;
    background:rgba(8,17,32,.96)!important;
    border-bottom:1px solid rgba(148,163,184,.12)!important;
    position:relative!important;
    overflow:visible!important;
  }

  #backBtn{
    width:100%!important;
    min-height:44px!important;
    border-radius:16px!important;
    justify-content:center!important;
  }

  .pathBox{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    border-radius:16px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 14px!important;
    font-size:15px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .topActions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:52px 1fr!important;
    gap:9px!important;
    margin:0!important;
    overflow:visible!important;
  }

  .bellBtn{
    grid-column:1!important;
    grid-row:1!important;
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    border-radius:17px!important;
    padding:0!important;
  }

  #globalSearch{
    grid-column:2!important;
    grid-row:1!important;
  }

  #folderSearch{
    grid-column:1 / -1!important;
    grid-row:2!important;
  }

  #viewSelect{
    grid-column:1!important;
    grid-row:3!important;
  }

  #sortSelect{
    grid-column:2!important;
    grid-row:3!important;
  }

  .topActions button[onclick="openUpload()"]{
    grid-column:1 / -1!important;
    grid-row:4!important;
  }

  .topActions button[onclick="downloadSelected()"]{
    grid-column:1 / -1!important;
    grid-row:5!important;
  }

  .topActions button[onclick="selectAllVisible()"],
  .topActions button[onclick="selectAllFiles()"]{
    grid-column:1 / -1!important;
    grid-row:6!important;
  }

  #emptyTrashBtn{
    grid-column:1 / -1!important;
    grid-row:auto!important;
  }

  .topActions input,
  .topActions select,
  .topActions button:not(.bellBtn){
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:50px!important;
    min-height:50px!important;
    padding:0 14px!important;
    border-radius:17px!important;
    font-size:14px!important;
    box-shadow:none!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .bellHover{
    position:fixed!important;
    left:var(--mobile-pad)!important;
    right:var(--mobile-pad)!important;
    top:94px!important;
    width:auto!important;
    max-width:none!important;
    z-index:2147482000!important;
  }

  /* Dashboard auf Handy kompakter */
  .cloudDashboard{
    padding:12px var(--mobile-pad) 0!important;
  }

  .heroCard{
    padding:16px!important;
    border-radius:22px!important;
  }

  .heroCard h2{
    font-size:22px!important;
  }

  .heroCard p{
    font-size:13px!important;
    line-height:1.45!important;
  }

  .dashCards{
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
  }

  .dashCard{
    min-height:74px!important;
    padding:12px!important;
    border-radius:18px!important;
  }

  .dashCard b,
  .dashCard strong{
    font-size:18px!important;
  }

  .dropzone{
    margin:12px var(--mobile-pad)!important;
    min-height:74px!important;
    border-radius:20px!important;
  }

  .dropzone b{font-size:16px!important;}
  .dropzone span{font-size:12px!important;}

  .quickPanel{
    margin:0 var(--mobile-pad) 10px!important;
    border-radius:18px!important;
    padding:12px!important;
  }

  .grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    height:auto!important;
    min-height:280px!important;
    overflow:visible!important;
    padding:12px var(--mobile-pad) 120px!important;
    align-content:start!important;
  }

  .card{
    min-width:0!important;
    width:100%!important;
    min-height:142px!important;
    padding:10px!important;
    border-radius:20px!important;
  }

  .thumbWrap{
    height:74px!important;
    border-radius:15px!important;
  }

  .icon{
    font-size:34px!important;
    margin-top:4px!important;
  }

  .name{
    margin-top:8px!important;
    font-size:12px!important;
    line-height:1.25!important;
  }

  .filePathPill,.previewBadge{
    font-size:10px!important;
    padding:4px 7px!important;
    border-radius:999px!important;
  }

  .grid.listView{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }

  .listHeader{display:none!important;}

  .listRow{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    padding:13px!important;
    border-radius:18px!important;
  }

  .listMeta{font-size:12px!important;}

  .menu{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    top:auto!important;
    width:auto!important;
    min-width:0!important;
    max-height:70svh!important;
    overflow:auto!important;
    border-radius:22px!important;
    z-index:2147482500!important;
  }

  .menu button{
    min-height:50px!important;
    font-size:14px!important;
  }

  .modal{
    padding:12px!important;
    align-items:flex-start!important;
    overflow:auto!important;
  }

  .modalBox{
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    margin:18px 0 90px!important;
    border-radius:22px!important;
    padding:16px!important;
  }

  .modalActions,
  .adminButtonRow,
  .copyFieldRow{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }

  .modalActions button,
  .adminButtonRow button,
  .copyFieldRow button{
    width:100%!important;
    min-height:48px!important;
  }

  .uploadBox,.zipBox{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    width:auto!important;
    max-width:none!important;
    border-radius:20px!important;
    z-index:2147482400!important;
  }

  .adminFull{
    padding:12px!important;
    min-height:100svh!important;
    overflow:visible!important;
  }

  .adminTopbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:16px!important;
    border-radius:22px!important;
  }

  .adminTabs{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    padding:8px!important;
    border-radius:20px!important;
  }

  .adminTabs button{
    min-height:44px!important;
    padding:8px!important;
    font-size:12px!important;
    border-radius:14px!important;
  }

  .adminCard{
    padding:15px!important;
    border-radius:22px!important;
  }

  .formGrid,.permissionGrid,.securityQuestionGrid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .authModalBox{
    padding:16px!important;
  }
}

@media (max-width: 390px){
  :root{--mobile-pad:10px;}
  .brand h1{font-size:23px!important;}
  .brandIcon{width:50px!important;height:50px!important;min-width:50px!important;}
  .userBox{grid-template-columns:1fr!important;}
  .navGroup{gap:6px!important;}
  .navGroup button{min-height:50px!important;border-radius:16px!important;}
  .topActions{grid-template-columns:50px 1fr!important;gap:8px!important;}
  .bellBtn{width:50px!important;height:50px!important;min-width:50px!important;}
  .dashCards{grid-template-columns:1fr!important;}
  .grid{gap:8px!important;}
  .card{min-height:132px!important;padding:9px!important;}
}

/* =========================
   V48 MOBILE NAV ICON FIX
   Fix: mobile nav icons disappeared because the whole button text was set to font-size:0.
   Keep labels hidden on phones, but keep the emoji/icon visible.
========================= */
@media (max-width: 900px){
  .navGroup button{
    font-size:24px!important;
    line-height:1!important;
    overflow:visible!important;
    color:#f8fafc!important;
    text-shadow:0 8px 22px rgba(0,0,0,.45)!important;
  }

  .navGroup button span{
    display:none!important;
  }

  .navGroup button.active{
    transform:none!important;
    box-shadow:0 14px 38px rgba(37,99,235,.28)!important;
  }

  .navGroup button:hover{
    transform:none!important;
  }
}


/* v49 Private Folder Share */
.folderShareBox{max-width:980px}
.shareCheck span{display:flex;flex-direction:column;gap:3px}
.shareCheck small{color:var(--muted);font-size:12px}
@media(max-width:760px){.folderShareBox{width:96vw}.folderShareBox .permissionGrid{grid-template-columns:1fr}}


/* =========================
   V50 CLEAN SHARE UI + MOBILE
========================= */
.quickPanel{display:none!important;}
.proToolbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.94));border:1px solid rgba(125,211,252,.18);border-radius:24px;padding:16px 18px;box-shadow:0 18px 55px rgba(0,0,0,.35);margin-bottom:4px;}
.proToolbar>div:first-child{display:flex;flex-direction:column;gap:4px;}
.compactActions{gap:8px;margin:0!important;}
.compactActions button{padding:10px 13px;border-radius:14px;box-shadow:none;}
.dangerStrong{background:linear-gradient(135deg,#7f1d1d,#ef4444)!important;box-shadow:0 0 0 1px rgba(248,113,113,.25),0 18px 50px rgba(239,68,68,.20)!important;}
button:disabled{opacity:.45;cursor:not-allowed;transform:none!important;filter:none!important;}
.shareManagerGrid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));align-content:start;}
.proShareCard,.adminShareRow{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(8,13,25,.98));border:1px solid rgba(148,163,184,.16);box-shadow:0 20px 70px rgba(0,0,0,.32);}
.proShareCard::before,.adminShareRow::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,#60a5fa,#7dd3fc,#a78bfa);opacity:.85;}
.shareCardTop{display:flex;align-items:center;gap:12px;min-width:0;}
.shareTypeIcon{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:rgba(96,165,250,.12);border:1px solid rgba(125,211,252,.18);font-size:20px;flex:0 0 auto;}
.shareTitle{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.shareTitle b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shareMeta{display:flex;justify-content:space-between;gap:8px;color:#94a3b8;font-size:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:9px 10px;}
.shareUrlInput,.adminShareRow input[readonly]{font-size:12px;background:#020617!important;border-color:rgba(125,211,252,.14)!important;width:100%;}
.shareSelect{position:relative;width:24px;height:24px;display:inline-grid;place-items:center;cursor:pointer;flex:0 0 auto;}
.shareSelect input{position:absolute;opacity:0;pointer-events:none;}
.shareSelect span{width:22px;height:22px;border-radius:8px;border:1px solid rgba(148,163,184,.45);background:rgba(15,23,42,.95);box-shadow:inset 0 0 0 2px rgba(2,6,23,.8);}
.shareSelect input:checked+span{background:linear-gradient(135deg,#3b82f6,#7dd3fc);border-color:#7dd3fc;}
.shareSelect input:checked+span::after{content:"✓";display:grid;place-items:center;color:white;font-weight:900;font-size:14px;line-height:22px;}
.emptyAdminText,.shareEmpty{grid-column:1/-1;}
.adminTab .shareToolbar{margin-bottom:14px;}
@media(max-width:760px){
  .proToolbar{flex-direction:column;align-items:stretch;padding:14px;border-radius:20px;}
  .compactActions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
  .compactActions button{width:100%;min-height:42px;padding:10px 8px;font-size:13px;}
  .shareManagerGrid{grid-template-columns:1fr!important;padding:12px!important;gap:12px!important;}
  .proShareCard,.adminShareRow{border-radius:20px!important;padding:14px!important;}
  .shareTypeIcon{width:38px;height:38px;border-radius:14px;}
  .shareMeta{flex-direction:column;}
  .adminShareRow .adminButtonRow,.proShareCard .adminButtonRow{grid-template-columns:1fr 1fr!important;display:grid!important;}
  .dashCards{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .dashCard{min-height:74px!important;padding:14px!important;}
  .topActions{gap:8px!important;}
  .topActions button,.topActions select,.topActions input{width:100%!important;}
}
@media(max-width:430px){
  .compactActions{grid-template-columns:1fr!important;}
  .dashCards{grid-template-columns:1fr!important;}
}

/* =========================
   V53 AUTO SIZE FIX FOR ALL RUBRIKEN
   - Karten passen sich Inhalt und Bildschirmbreite automatisch an
   - Freigaben/Dateien/Favoriten/Papierkorb/Admin-Zeilen schneiden Buttons und Texte nicht mehr ab
========================= */

/* Main grids: fewer columns on wide screens, better auto sizing */
.grid:not(.listView){
  grid-template-columns:repeat(auto-fit,minmax(clamp(150px,12vw,230px),1fr))!important;
  gap:clamp(12px,1.25vw,22px)!important;
  align-items:start!important;
}

/* Normal file/folder/favorite/trash cards */
.card{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:clamp(150px,14vw,220px)!important;
  padding:clamp(12px,1vw,18px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:8px!important;
}
.card .name{
  min-height:34px!important;
  height:auto!important;
  white-space:normal!important;
  line-height:1.25!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  word-break:break-word!important;
}
.card:hover .name,
.card:active .name{
  display:block!important;
  white-space:nowrap!important;
  -webkit-line-clamp:unset!important;
}
.card .thumbWrap,
.card .iconPreview{
  width:100%!important;
  height:clamp(78px,8vw,132px)!important;
  flex:0 0 auto!important;
}
.card .icon{
  min-height:clamp(78px,8vw,132px)!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
}

/* Share/Freigaben cards */
.shareGrid,
.shareManagerGrid{
  grid-template-columns:repeat(auto-fit,minmax(clamp(300px,22vw,430px),1fr))!important;
  gap:clamp(14px,1.1vw,22px)!important;
  align-items:start!important;
}
.proShareCard,
.shareCard,
.adminShareRow{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:auto!important;
  overflow:visible!important;
  padding:clamp(14px,1.1vw,20px)!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
}
.shareCardTop{
  display:grid!important;
  grid-template-columns:auto auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
}
.shareTitle,
.shareTitle b,
.shareTitle span{
  min-width:0!important;
}
.shareTitle b{
  display:block!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.25!important;
  word-break:break-word!important;
}
.shareMeta{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:center!important;
  min-width:0!important;
}
.shareUrlInput,
.adminShareRow input[readonly],
.backupItem input[readonly]{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:38px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.proShareCard .compactActions,
.adminShareRow .compactActions,
.shareCard .compactActions{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important;
  gap:10px!important;
  width:100%!important;
  margin:0!important;
}
.proShareCard .compactActions button,
.adminShareRow .compactActions button,
.shareCard .compactActions button{
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  padding:10px 12px!important;
  white-space:normal!important;
  line-height:1.15!important;
}

/* Toolbar auto fit */
.proToolbar{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:minmax(180px,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
}
.proToolbar .compactActions{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(140px,auto))!important;
  justify-content:end!important;
  align-items:center!important;
}

/* Admin rows and backup/log/storage rows should not clip content */
.userItem,
.backupItem,
.logItem,
.storageItem,
.permissionItem{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  overflow:visible!important;
}
.adminButtonRow{
  align-items:stretch!important;
}
.adminButtonRow button{
  min-height:40px!important;
  white-space:normal!important;
}

/* List view: responsive instead of fixed columns */
.listHeader,
.listRow{
  grid-template-columns:minmax(160px,1fr) minmax(90px,140px) minmax(130px,220px)!important;
  min-width:0!important;
}
.listName,
.listMeta{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

@media(max-width:1200px){
  .shareGrid,
  .shareManagerGrid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;}
  .proToolbar{grid-template-columns:1fr!important;}
  .proToolbar .compactActions{justify-content:stretch!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;}
}

@media(max-width:760px){
  .grid:not(.listView){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    padding:12px!important;
  }
  .card{
    min-height:136px!important;
    padding:10px!important;
    border-radius:18px!important;
  }
  .card .thumbWrap,
  .card .iconPreview,
  .card .icon{
    height:68px!important;
    min-height:68px!important;
  }
  .card .name{font-size:12px!important;min-height:31px!important;}

  .shareGrid,
  .shareManagerGrid{
    grid-template-columns:1fr!important;
    padding:12px!important;
  }
  .proShareCard,
  .shareCard,
  .adminShareRow{
    padding:14px!important;
    border-radius:20px!important;
  }
  .shareCardTop{
    grid-template-columns:auto auto minmax(0,1fr)!important;
    gap:10px!important;
  }
  .shareMeta{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
  .proShareCard .compactActions,
  .adminShareRow .compactActions,
  .shareCard .compactActions{
    grid-template-columns:1fr 1fr!important;
  }
  .listHeader{display:none!important;}
  .listRow{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
}

@media(max-width:390px){
  .grid:not(.listView){grid-template-columns:1fr!important;}
  .proShareCard .compactActions,
  .adminShareRow .compactActions,
  .shareCard .compactActions{grid-template-columns:1fr!important;}
}


/* =========================
   V56 ULTRA CLEAN PROFESSIONAL UI
========================= */
:root{
  --bg:#07111f;
  --surface:#0b1220;
  --surface2:#111827;
  --surface3:#162033;
  --line:rgba(148,163,184,.18);
  --line2:rgba(148,163,184,.28);
  --text:#f8fafc;
  --muted:#94a3b8;
  --brand:#60a5fa;
  --brand2:#2563eb;
  --danger:#ef4444;
  --danger2:#991b1b;
  --ok:#22c55e;
  --shadow:0 22px 60px rgba(0,0,0,.38);
}
body{
  background:
    radial-gradient(circle at 12% 0%, rgba(96,165,250,.18), transparent 30%),
    radial-gradient(circle at 95% 8%, rgba(15,23,42,.9), transparent 34%),
    linear-gradient(135deg,#030712,#0b1220 58%,#111827);
}
.sidebar,.topbar,.adminTopbar,.adminCard,.userBox,.sidebarGroup,.modalBox,.uploadBox,.zipBox{
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.88)) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.brandIcon,button:not(.danger):not(.ghostBtn){
  background:linear-gradient(135deg,#3b82f6,#1d4ed8) !important;
}
button{border-radius:14px; letter-spacing:.01em;}
.danger,.dangerStrong{
  background:linear-gradient(135deg,#ef4444,#7f1d1d) !important;
  box-shadow:0 14px 28px rgba(239,68,68,.20) !important;
}
.dangerStrong{outline:1px solid rgba(252,165,165,.32);}
.cloudDashboard{padding:18px 20px 0;}
.dashHero{
  border-radius:28px;
  padding:24px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(15,23,42,.95),rgba(30,41,59,.74));
  box-shadow:var(--shadow);
}
.dashHero h2{font-size:clamp(24px,3vw,40px);}
.dashCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:14px;}
.dashCard{border:1px solid var(--line);background:rgba(15,23,42,.72);border-radius:22px;padding:18px;transition:.18s ease;}
.dashCard:hover{transform:translateY(-3px);border-color:rgba(96,165,250,.5);}
.sectionHeader{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.72));
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.sectionHeader h2{margin:0;font-size:24px;}
.sectionHeader p{margin:5px 0 0;color:var(--muted);}
.shareHeaderActions,.shareActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.shareCounter{padding:8px 12px;border-radius:999px;background:rgba(96,165,250,.10);border:1px solid rgba(96,165,250,.22);color:#bfdbfe;font-weight:800;}
.shareManagerGrid,.adminShareGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;width:100%;}
.shareGrid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr)) !important;align-content:start;}
.shareCard,.proShareCard,.adminShareRow{
  min-width:0;
  border-radius:24px !important;
  border:1px solid var(--line) !important;
  background:linear-gradient(180deg,rgba(17,24,39,.96),rgba(2,6,23,.92)) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.26);
  padding:16px !important;
  overflow:hidden;
}
.shareCardTop{display:grid;grid-template-columns:auto 46px minmax(0,1fr);gap:12px;align-items:center;}
.shareTypeIcon{width:46px;height:46px;display:grid;place-items:center;border-radius:16px;background:rgba(96,165,250,.10);border:1px solid rgba(96,165,250,.20);}
.shareTitle{min-width:0;display:flex;flex-direction:column;gap:4px;}
.shareTitle b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shareMeta{display:flex;justify-content:space-between;gap:10px;margin:14px 0;color:var(--muted);font-size:13px;}
.shareUrlWrap{min-width:0;}
.shareUrlInput,.shareCard input[readonly],.adminShareRow input[readonly]{width:100%;min-width:0;font-size:12px;background:#020617;border:1px solid var(--line);}
.shareSelect input{display:none;}
.shareSelect span{width:22px;height:22px;display:block;border-radius:8px;border:1px solid var(--line2);background:#020617;}
.shareSelect input:checked + span{background:linear-gradient(135deg,#60a5fa,#2563eb);border-color:#93c5fd;box-shadow:0 0 0 3px rgba(96,165,250,.14);}
.emptyState{grid-column:1/-1;border:1px dashed var(--line2);border-radius:24px;padding:28px;text-align:center;background:rgba(15,23,42,.55);display:flex;flex-direction:column;gap:8px;color:var(--muted);}
.emptyState b{color:var(--text);font-size:20px;}
.grid:not(.listView){grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.card,.listRow,.folderItem{border-color:var(--line) !important;background:linear-gradient(180deg,rgba(17,24,39,.9),rgba(15,23,42,.82)) !important;}
.card:hover,.listRow:hover,.folderItem:hover{border-color:rgba(96,165,250,.55) !important;box-shadow:0 12px 34px rgba(37,99,235,.16);}
.menu{border-color:var(--line2);background:#0b1220;box-shadow:0 24px 70px rgba(0,0,0,.45);}
.adminTabs{position:sticky;top:0;z-index:30;background:rgba(2,6,23,.78);backdrop-filter:blur(18px);border-radius:22px;padding:10px;border:1px solid var(--line);}
.adminTabs button{box-shadow:none !important;background:rgba(30,41,59,.78) !important;border:1px solid var(--line);}
.adminTabs button:hover{background:linear-gradient(135deg,#3b82f6,#1d4ed8) !important;}

@media(max-width:760px){
  html,body{height:auto;min-height:100%;overflow:auto;}
  .app{height:auto;min-height:100vh;display:block;overflow:visible;}
  .sidebar{position:sticky;top:0;z-index:80;width:100%;max-height:none;border-right:0;border-bottom:1px solid var(--line);padding:12px;gap:10px;overflow:visible;}
  .brand{padding:10px;border-radius:18px}.brandIcon{width:44px;height:44px;font-size:23px}.brand h1{font-size:20px}.brand p{font-size:12px}
  .userBox{display:grid;grid-template-columns:1fr auto auto;align-items:center;padding:10px;border-radius:18px;gap:8px}.userBox button{padding:10px;font-size:12px}
  .navGroup{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;border-radius:18px}.navGroup button{min-height:46px;padding:8px;font-size:20px}.navGroup button span{display:none!important;}
  .foldersBlock{padding:10px;border-radius:18px}.folderHeader{margin-bottom:8px}#folderList{display:flex;flex-direction:row;overflow-x:auto;padding-bottom:4px}.folderItem{min-width:150px;padding:10px;border-radius:16px;}
  .main{overflow:visible}.fileView{overflow:visible}.topbar{position:relative;display:grid;grid-template-columns:1fr;gap:10px;padding:12px;min-height:0}.topActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin:0}.topActions input,.topActions select,.topActions button{width:100%;min-width:0;padding:11px 10px;font-size:13px}.bellBtn{grid-column:1/2}.pathBox{min-width:0;width:100%;}
  .cloudDashboard{padding:12px}.dashHero{padding:16px;border-radius:22px}.dashCards{grid-template-columns:1fr 1fr;gap:10px}.dashCard{padding:14px;border-radius:18px}
  .dropzone{margin:12px;min-height:82px;border-radius:20px}.grid{padding:12px;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))!important}.card{min-height:118px;border-radius:18px;padding:10px}.listHeader{display:none}.listRow{grid-template-columns:1fr!important;gap:6px}
  .shareGrid,.shareManagerGrid,.adminShareGrid{grid-template-columns:1fr!important}.sectionHeader{display:grid;grid-template-columns:1fr;gap:12px;padding:14px;border-radius:20px}.shareHeaderActions,.shareActions,.adminButtonRow{display:grid;grid-template-columns:1fr;gap:8px}.shareCardTop{grid-template-columns:auto 40px minmax(0,1fr)}.shareTypeIcon{width:40px;height:40px}.shareMeta{flex-direction:column;gap:3px}.shareCounter{width:max-content}
  .adminFull{padding:12px}.adminTopbar{display:grid;grid-template-columns:1fr;gap:12px;padding:16px}.adminTabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px}.adminCard{padding:16px;border-radius:22px}.formGrid,.permissionGrid{grid-template-columns:1fr!important}.modalBox{width:94vw;padding:18px;border-radius:22px}.uploadBox{left:12px;right:12px;bottom:12px;width:auto}.menu{left:12px!important;right:12px!important;bottom:12px!important;top:auto!important;width:auto;max-height:70vh;overflow:auto;border-radius:24px;}
}
@media(max-width:420px){.grid{grid-template-columns:1fr!important}.dashCards{grid-template-columns:1fr}.topActions{grid-template-columns:1fr}.userBox{grid-template-columns:1fr}.adminTabs{grid-template-columns:1fr}.navGroup{grid-template-columns:repeat(4,1fr)}}


/* =========================
   V57 TOPBAR CENTER + LIVE SYSTEM + CLEAN DASHBOARD
========================= */
.topbar{
  display:grid !important;
  grid-template-columns:auto minmax(160px, 360px) minmax(260px, 1fr) auto !important;
  align-items:center !important;
  gap:14px !important;
}
.topbarCenter{
  min-width:260px;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.topMiniStats,.systemStats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.topMiniStats.hidden,.systemStats.hidden{display:none!important;}
.statPill,.sysPill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.22);
  background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(2,6,23,.78));
  color:#cbd5e1;
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.22);
  white-space:nowrap;
}
.statPill strong,.sysPill strong{color:#f8fafc;font-weight:900;}
.sysPill .meter{
  width:52px;
  height:6px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  overflow:hidden;
}
.sysPill .meter span{
  display:block;
  height:100%;
  width:var(--value,0%);
  border-radius:999px;
  background:linear-gradient(90deg,#38bdf8,#818cf8);
  transition:width .45s ease;
}
.cloudDashboard{
  margin:0 18px 16px;
}
.cloudDashboard .dashHero{display:none!important;}
.dashCards{
  margin-top:16px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(180px,1fr))!important;
  gap:14px!important;
}
.dashCard{
  min-height:72px!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(2,6,23,.74))!important;
  border:1px solid rgba(96,165,250,.18)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.2)!important;
}
.fileView:not(.filesHome) #cloudDashboard{display:none!important;}
body.specialMode #cloudDashboard{display:none!important;}
@media(max-width:1100px){
  .topbar{grid-template-columns:1fr!important; align-items:stretch!important;}
  .topbarCenter{order:2; width:100%; min-width:0; justify-content:flex-start;}
  .topActions{order:3; width:100%; display:grid!important; grid-template-columns:60px 1fr 1fr!important; gap:10px!important;}
  .dashCards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:620px){
  .topbarCenter{gap:8px;}
  .topMiniStats,.systemStats{width:100%; justify-content:space-between;}
  .statPill,.sysPill{flex:1; min-width:calc(50% - 6px); justify-content:center; padding:8px 9px;}
  .sysPill .meter{width:42px;}
  .dashCards{grid-template-columns:1fr!important;}
}

/* =========================
   V58 EIGENE LINKS
========================= */
.linkBlock{order:3}
.foldersBlock{order:4}
.customLinkList{display:flex;flex-direction:column;gap:10px}
.customLinkItem{
  width:100%; min-height:48px; display:grid; grid-template-columns:38px 1fr 34px; align-items:center; gap:10px;
  padding:10px; border-radius:16px; border:1px solid rgba(148,163,184,.16);
  background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(2,6,23,.84)); color:#eaf2ff; text-decoration:none;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.customLinkItem:hover{transform:translateX(2px);border-color:rgba(96,165,250,.55);background:linear-gradient(180deg,rgba(30,41,59,.92),rgba(15,23,42,.88))}
.customLinkIcon{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,.14);border:1px solid rgba(96,165,250,.2);overflow:hidden;font-weight:900}
.customLinkIcon img{width:22px;height:22px;object-fit:contain}
.customLinkText{min-width:0;display:flex;flex-direction:column;gap:2px}
.customLinkText b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customLinkText span{font-size:11px;color:#93a4ba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customLinkDelete{width:32px;height:32px;padding:0!important;border-radius:12px!important;background:rgba(239,68,68,.14)!important;color:#fecaca!important;box-shadow:none!important}
.customLinkModalBox{max-width:560px}
.customLinkModalBox input{width:100%;margin-top:12px}
@media(max-width:760px){
  .linkBlock{padding:14px!important}
  .customLinkList{flex-direction:row;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
  .customLinkItem{min-width:190px;scroll-snap-align:start}
}


/* =========================
   V59 ULTIMATE CLEAN PRO DESIGN
========================= */
body{background:radial-gradient(circle at 18% -10%,rgba(59,130,246,.18),transparent 34%),radial-gradient(circle at 86% 0%,rgba(148,163,184,.16),transparent 30%),linear-gradient(135deg,#050915,#0b1220 48%,#101827)!important;}
.sidebar,.topbar,.adminCard,.userBox,.sidebarGroup,.card,.listRow,.modalBox{border-color:rgba(148,163,184,.16)!important;box-shadow:0 20px 70px rgba(0,0,0,.28)}
.topbar{min-height:76px;background:rgba(7,13,25,.78)!important;backdrop-filter:blur(22px);gap:12px}
#topMiniStats{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:260px}.statPill{height:34px;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.65);border-radius:999px;padding:0 12px;color:#cbd5e1;font-size:12px}.statPill strong{color:#f8fafc}
#systemStats{display:flex;flex-direction:column;gap:6px;min-width:176px}.sysLine{display:grid;grid-template-columns:24px 34px 42px 1fr;align-items:center;gap:7px;height:26px;border:1px solid rgba(148,163,184,.15);background:rgba(2,6,23,.42);border-radius:999px;padding:0 9px;color:#cbd5e1;font-size:11px}.sysIcon{width:20px;height:20px;border-radius:8px;display:grid;place-items:center;background:rgba(59,130,246,.14);font-size:12px}.sysLine strong{font-size:11px;color:#fff}.sysLine .meter{height:5px;background:rgba(148,163,184,.15);border-radius:999px;overflow:hidden}.sysLine .meter span{display:block;width:var(--value);height:100%;border-radius:999px;background:linear-gradient(90deg,#60a5fa,#cbd5e1)}
.proContextMenu{padding:8px!important;gap:4px;min-width:268px;background:rgba(8,13,24,.96)!important;border:1px solid rgba(148,163,184,.18)!important;border-radius:22px!important;box-shadow:0 28px 80px rgba(0,0,0,.58)!important;backdrop-filter:blur(24px)}
.proContextMenu .menuAction{display:grid!important;grid-template-columns:34px 1fr;align-items:center;gap:10px;width:100%;border-radius:14px!important;padding:10px 12px!important;color:#e5edf8!important;background:transparent!important;font-weight:850!important;text-align:left!important;box-shadow:none!important}.proContextMenu .menuAction:hover{background:rgba(96,165,250,.12)!important;transform:none!important}.proContextMenu .menuIcon{width:30px;height:30px;display:grid;place-items:center;border-radius:11px;background:rgba(148,163,184,.12)}.proContextMenu .dangerMenu{color:#fecaca!important}.proContextMenu .dangerMenu .menuIcon{background:rgba(239,68,68,.18)}
.proFileCard{min-height:202px;padding:10px!important;gap:10px}.filePreview{height:116px;width:100%;border-radius:18px;background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(2,6,23,.82));border:1px solid rgba(148,163,184,.13);overflow:hidden;display:grid;place-items:center;position:relative}.filePreview img,.filePreview video{width:100%;height:100%;object-fit:cover}.filePreviewFolder .filePreviewIcon{font-size:52px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.3))}.filePreviewFolder span{position:absolute;bottom:10px;left:10px;right:10px;text-align:center;color:#bfdbfe;font-size:12px;font-weight:900}.docPreview{gap:5px;text-align:center;color:#cbd5e1}.docPreview div{font-size:36px}.docPreview b{font-size:15px}.docPreview span{font-size:11px;color:#94a3b8}.mediaPreview .playBadge{position:absolute;width:46px;height:46px;border-radius:999px;display:grid;place-items:center;background:rgba(2,6,23,.72);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}.mediaPreview span,.audioPreview span{position:absolute;bottom:10px;left:10px;border-radius:999px;background:rgba(2,6,23,.72);border:1px solid rgba(255,255,255,.12);padding:5px 9px;color:#e2e8f0;font-size:11px}.waveBars{display:flex;align-items:end;gap:5px;height:48px}.waveBars i{display:block;width:8px;border-radius:999px;background:linear-gradient(#93c5fd,#64748b);animation:waveV59 1.15s infinite ease-in-out}.waveBars i:nth-child(1){height:20px}.waveBars i:nth-child(2){height:42px;animation-delay:.1s}.waveBars i:nth-child(3){height:28px;animation-delay:.2s}.waveBars i:nth-child(4){height:36px;animation-delay:.3s}@keyframes waveV59{50%{transform:scaleY(.5);opacity:.65}}
.fileCardInfo{width:100%;min-width:0}.fileMeta{display:flex;align-items:center;justify-content:center;gap:8px;color:#93a4ba;font-size:11px;margin-top:7px}.fileMeta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.marqueeName span{display:inline-block;transition:transform .25s}.marqueeName:hover span{animation:marqueeV59 max(5s, calc(var(--len, 1) * .18s)) linear infinite}@keyframes marqueeV59{0%,10%{transform:translateX(0)}90%,100%{transform:translateX(calc(-100% + 110px))}}
.proListRow{grid-template-columns:minmax(0,1fr) 120px 190px!important}.listNameRich{display:flex;align-items:center;gap:12px;min-width:0}.listNameRich b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.listNameRich span{display:block;color:#94a3b8;font-size:12px;margin-top:2px}.listMiniPreview{width:52px;height:42px;flex:0 0 auto}.listMiniPreview .filePreview{height:42px;border-radius:12px}.listMiniPreview .docPreview div{font-size:20px}.listMiniPreview .docPreview span,.listMiniPreview .docPreview b,.listMiniPreview .mediaPreview span,.listMiniPreview .audioPreview span{display:none}.sortDropTarget{outline:2px solid #60a5fa!important;outline-offset:4px;transform:translateY(-2px)}
.customLinkList{display:flex;flex-direction:column;gap:8px}.customLinkItem.proQuickLink{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;padding:10px 11px;border-radius:16px;background:rgba(15,23,42,.58);border:1px solid rgba(148,163,184,.12);cursor:pointer;transition:.16s}.customLinkItem.proQuickLink:hover{background:rgba(30,41,59,.82);border-color:rgba(96,165,250,.38);transform:translateX(2px)}.customLinkIcon{width:36px!important;height:36px!important;border-radius:13px!important;background:rgba(255,255,255,.06)!important}.customLinkIcon img{width:24px!important;height:24px!important;object-fit:contain}.customLinkText b{font-size:13px}.customLinkText span{font-size:11px;color:#93a4ba}.customLinkDelete{display:none!important}.customLinkShareUsers{margin-top:12px;padding:12px;border:1px solid rgba(148,163,184,.14);border-radius:18px;background:rgba(2,6,23,.28)}.customLinkShareUsers h3{margin:0 0 5px}.linkUserGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:10px}.linkUserCheck{display:flex;align-items:center;gap:9px;background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.14);border-radius:14px;padding:10px;color:#dbe5f4}.linkUserCheck input{width:18px;height:18px;accent-color:#60a5fa}.shareOptionCheck{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px;border:1px solid rgba(148,163,184,.14);background:rgba(15,23,42,.55);border-radius:16px;color:#dbe5f4}.shareOptionCheck input{width:18px;height:18px;accent-color:#60a5fa}
button.danger,.danger{background:linear-gradient(135deg,#991b1b,#dc2626)!important;box-shadow:0 16px 40px rgba(220,38,38,.25)!important}.dangerStrong{background:linear-gradient(135deg,#7f1d1d,#ef4444)!important;border:1px solid rgba(254,202,202,.24)!important}.modalActions .danger{order:2}.modalActions button:not(.danger){background:linear-gradient(135deg,#2563eb,#64748b)}
@media(max-width:820px){.topbar{display:grid;grid-template-columns:1fr;align-items:stretch}.pathBox{min-width:0;width:100%}#topMiniStats{order:3;min-width:0;overflow-x:auto;justify-content:flex-start;padding-bottom:2px}#systemStats{order:4;min-width:0;width:100%}.sysLine{grid-template-columns:24px 34px 42px 1fr}.grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))!important;padding:12px!important}.proFileCard{min-height:188px}.filePreview{height:104px}.sidebar{padding:12px!important}.customLinkList{flex-direction:row;overflow-x:auto}.customLinkItem.proQuickLink{min-width:180px}.proContextMenu{left:8px!important;right:8px!important;bottom:8px!important;top:auto!important;width:auto!important;max-height:72vh;overflow:auto}.proListRow{grid-template-columns:1fr!important}.proListRow .listMeta{display:none}.adminTabs{grid-template-columns:1fr 1fr!important}.formGrid{grid-template-columns:1fr!important}}

/* =========================================================
   V60 LOGIN BUTTONS FIX
   JS syntax repair + keep auth controls always clickable
========================================================= */
.loginScreen{
  pointer-events:auto!important;
  z-index:2147483640!important;
}
.loginScreen:not(.hidden){
  display:flex!important;
}
.loginBox{
  pointer-events:auto!important;
  position:relative!important;
  z-index:2147483641!important;
}
.loginBox input,
.loginBox button,
.loginActions,
.loginActions button,
.authModal,
.authModalBox,
.authModalBox input,
.authModalBox select,
.authModalBox button{
  pointer-events:auto!important;
  position:relative!important;
  z-index:2147483642!important;
}
body.authLocked #app,
.loginScreen:not(.hidden) ~ #app{
  pointer-events:none!important;
}
.loginScreen.hidden ~ #app{
  pointer-events:auto!important;
}

/* =========================================================
   V61 TOPBAR CENTER ROW + LINK CONTEXT POLISH
========================================================= */
.topbar{
  grid-template-columns:auto minmax(160px,360px) minmax(460px,1fr) auto !important;
}
.topbarCenter{
  justify-self:center !important;
  align-self:center !important;
  width:auto !important;
  min-width:min(620px, 100%) !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
#topMiniStats,
#systemStats{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
  width:auto !important;
  flex:0 1 auto !important;
}
#topMiniStats.hidden,
#systemStats.hidden{display:none!important;}
.statPill,
#systemStats .sysLine{
  height:32px !important;
  min-height:32px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,.18) !important;
  background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(2,6,23,.62)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.18) !important;
  color:#cbd5e1 !important;
  font-size:12px !important;
  font-weight:850 !important;
  white-space:nowrap !important;
}
#systemStats .sysLine{
  display:inline-flex !important;
  grid-template-columns:none !important;
  min-width:auto !important;
}
#systemStats .sysIcon{
  width:22px !important;
  height:22px !important;
  border-radius:9px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(96,165,250,.13) !important;
  border:1px solid rgba(96,165,250,.14) !important;
  font-size:12px !important;
}
#systemStats .meter{display:none!important;}
.statPill strong,
#systemStats .sysLine strong{color:#f8fafc!important;font-weight:950!important;}
.linkContextMenuV61{min-width:250px!important;}
.linkContextMenuV61 .menuAction{grid-template-columns:34px 1fr!important;}
.customLinkItem.proQuickLink{position:relative;}
.customLinkItem.proQuickLink::after{
  content:'⋯';
  opacity:0;
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color:#94a3b8;
  font-weight:900;
  transition:.15s ease;
}
.customLinkItem.proQuickLink:hover::after{opacity:1;}
@media(max-width:1180px){
  .topbar{grid-template-columns:1fr!important;}
  .topbarCenter{order:2!important;width:100%!important;min-width:0!important;justify-content:flex-start!important;}
  #topMiniStats,#systemStats{justify-content:flex-start!important;overflow-x:auto;flex-wrap:nowrap!important;max-width:100%;padding-bottom:2px;}
}
@media(max-width:620px){
  .statPill,#systemStats .sysLine{flex:0 0 auto!important;min-width:auto!important;}
}


/* =========================
   V63 DARK BLUE CLEANUP + UNIFIED MENUS + ADMIN QUICK LINKS
========================= */
:root{
  --blue:#2563eb;
  --blue2:#1e40af;
  --deepBlue:#0b1730;
  --deepBlue2:#111f3a;
  --softBlue:#1f365f;
}
body{
  background:radial-gradient(circle at top left,rgba(37,99,235,.18),transparent 34%),linear-gradient(135deg,#020617,#07111f 58%,#0b1220)!important;
}
.brandIcon,button:not(.danger):not(.menuAction),.folderPlus,.adminBtn{
  background:linear-gradient(135deg,#1e3a8a,#0f2a5f)!important;
}
.brand:hover,.navGroup button.active,.navGroup button:hover,
.folderItem:hover,.customLinkItem.proQuickLink:hover,.dashCard:hover{
  background:linear-gradient(180deg,rgba(30,58,138,.34),rgba(15,23,42,.9))!important;
  border-color:rgba(96,165,250,.38)!important;
}
.userBox,.sidebarGroup,.card,.listRow,.adminCard,.adminTopbar,.modalBox,.topbar,.pathBox,.permissionItem,.userItem,.backupItem,.storageItem,.logItem{
  background:linear-gradient(180deg,rgba(13,24,48,.96),rgba(8,15,31,.98))!important;
  border-color:rgba(96,165,250,.16)!important;
}
input:focus,select:focus{border-color:#93c5fd!important;box-shadow:0 0 0 3px rgba(37,99,235,.18)!important}
.permissionItem input[type=checkbox],.logItem input[type=checkbox],.linkUserCheck input,.shareOptionCheck input{accent-color:#2563eb!important}

.unifiedContextMenu{
  padding:10px!important;
  gap:8px!important;
  min-width:292px!important;
  background:linear-gradient(180deg,rgba(7,13,28,.99),rgba(3,7,18,.99))!important;
  border:1px solid rgba(96,165,250,.20)!important;
  border-radius:24px!important;
  box-shadow:0 35px 90px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:blur(26px)!important;
}
.unifiedContextMenu .menuGroup{display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:18px;background:rgba(15,23,42,.45);border:1px solid rgba(148,163,184,.08)}
.unifiedContextMenu .menuGroupTitle{padding:3px 8px 5px;color:#8fb4e7;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.unifiedContextMenu .menuAction{display:grid!important;grid-template-columns:36px 1fr;align-items:center;gap:10px;width:100%;border-radius:14px!important;padding:10px 11px!important;color:#edf5ff!important;background:transparent!important;font-weight:850!important;text-align:left!important;box-shadow:none!important}
.unifiedContextMenu .menuAction:hover{background:rgba(37,99,235,.22)!important;transform:none!important;filter:none!important}
.unifiedContextMenu .menuIcon{width:32px;height:32px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(180deg,rgba(30,64,175,.32),rgba(15,23,42,.72));border:1px solid rgba(96,165,250,.12)}
.unifiedContextMenu .dangerMenu{color:#fecaca!important}.unifiedContextMenu .dangerMenu:hover{background:rgba(127,29,29,.30)!important}.unifiedContextMenu .dangerMenu .menuIcon{background:rgba(127,29,29,.45)!important;border-color:rgba(248,113,113,.18)!important}

.customLinkItem.proQuickLink{background:linear-gradient(180deg,rgba(13,24,48,.88),rgba(8,15,31,.96))!important;border-color:rgba(96,165,250,.14)!important}
.customLinkIcon{background:linear-gradient(180deg,rgba(30,58,138,.30),rgba(15,23,42,.85))!important;border-color:rgba(96,165,250,.16)!important}
.customLinkShareUsers,.linkShareBox{background:rgba(8,15,31,.72)!important;border-color:rgba(96,165,250,.16)!important}
.linkShareBox h4{margin:14px 0 8px;color:#cfe2ff}.linkShareBox h3{margin-bottom:4px}.linkUserCheck{background:rgba(13,24,48,.82)!important;border-color:rgba(96,165,250,.13)!important;color:#e8f1ff!important}

.adminCustomLinkGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;margin-top:16px}
.adminCustomLinkCard{background:linear-gradient(180deg,rgba(13,24,48,.94),rgba(8,15,31,.98));border:1px solid rgba(96,165,250,.16);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 55px rgba(0,0,0,.25)}
.adminCustomLinkHead{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center}.adminCustomLinkHead b{display:block;font-size:15px}.adminCustomLinkHead span{display:block;color:#93a4ba;font-size:12px;margin-top:2px}.adminCustomLinkCard input[readonly]{width:100%;font-size:12px}.adminCustomLinkCard details{background:rgba(2,6,23,.30);border:1px solid rgba(148,163,184,.10);border-radius:16px;padding:10px}.adminCustomLinkCard summary{cursor:pointer;font-weight:900;color:#dbeafe}.adminLinkCheckGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:10px}.adminLinkCheckGrid label{display:flex;align-items:center;gap:8px;padding:9px;border-radius:13px;background:rgba(15,23,42,.78);border:1px solid rgba(96,165,250,.12);color:#e5eefb}.adminLinkCheckGrid input{width:18px;height:18px;accent-color:#2563eb}
.sortDropTarget{outline:2px solid #60a5fa!important;outline-offset:2px;background:linear-gradient(180deg,rgba(30,64,175,.38),rgba(15,23,42,.88))!important}
@media(max-width:820px){.adminCustomLinkGrid{grid-template-columns:1fr}.unifiedContextMenu{left:8px!important;right:8px!important;bottom:8px!important;top:auto!important;width:auto!important;max-height:74vh;overflow:auto}.adminLinkCheckGrid,.linkUserGrid{grid-template-columns:1fr!important}}