:root{color-scheme:dark;--bg:#090b10;--panel:#151923;--raised:#1d2330;--line:#ffffff19;--line2:#ffffff38;--text:#f5f7fb;--muted:#a1aaba;--faint:#687386;--red:#e0525d;--redsoft:#e0525d22;--teal:#42c5b4;--green:#70d39c;--danger:#ff7b84;--focus:#f7c96a;--radius:16px}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;color:var(--text);font:14px Inter,ui-sans-serif,system-ui,sans-serif;background:radial-gradient(circle at 5% 0%,#e0525d20,transparent 28rem),radial-gradient(circle at 95% 15%,#42c5b412,transparent 25rem),var(--bg)}button,input,select{font:inherit}button{border:0;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,label:focus-within{outline:2px solid var(--focus);outline-offset:3px}.cloud-shell{width:min(1420px,calc(100% - 44px));margin:auto;padding:25px 0 55px}.cloud-login{min-height:84vh;display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:10vw;align-items:center}.brand-mark{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--red),#a52f4a);font-size:1.25rem;font-weight:900;box-shadow:0 10px 30px #e0525d44}.eyebrow{margin:0 0 8px;color:var(--teal);font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.login-brand h1,.heading h1{margin:0;font-size:clamp(2.3rem,5vw,4.8rem);line-height:.98;letter-spacing:-.06em}.login-brand>p:not(.eyebrow){max-width:520px;color:var(--muted);font-size:1.1rem;line-height:1.6}.login-form{display:grid;gap:15px;padding:28px;border:1px solid var(--line2);border-radius:22px;background:#151923e8;box-shadow:0 25px 75px #0008}.login-form h2{margin:0;font-size:1.5rem}.form-kicker{margin:0;color:var(--muted);font-size:.8rem}.login-form label{display:grid;gap:7px;color:var(--muted);font-size:.82rem;font-weight:700}.login-form input{min-height:46px;padding:0 12px;border:1px solid var(--line2);border-radius:10px;background:#0b0e14;color:var(--text)}.message{min-height:20px;margin:0;color:var(--muted);font-size:.82rem}.message.error{color:var(--danger)}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:38px}.brand-lockup{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}.brand-lockup strong,.brand-lockup small{display:block}.brand-lockup small{color:var(--faint);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase}.topbar-actions,.heading-actions,.toolbar{display:flex;align-items:center;gap:9px}.icon-button,.profile-button,.secondary,.primary{min-height:40px;padding:0 13px;border:1px solid var(--line2);border-radius:10px;background:#1b202cbb;color:var(--text);font-weight:800;transition:.18s ease}.icon-button{min-width:40px;padding:0;font-size:1.1rem}.icon-button:hover,.profile-button:hover,.secondary:hover{border-color:var(--teal);background:var(--raised);transform:translateY(-1px)}.primary{display:inline-flex;align-items:center;justify-content:center;border-color:var(--red);background:var(--red);cursor:pointer}.primary:hover{background:#ef626d;transform:translateY(-1px)}.profile-button{display:flex;align-items:center;gap:8px}.profile-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #70d39c22}.workspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:30px;align-items:start}.sidebar{position:sticky;top:18px;display:grid;gap:13px}.sidebar-intro,.storage-card,.sidebar-tip{padding:15px;border:1px solid var(--line);border-radius:var(--radius);background:#151923b3}.sidebar-intro{display:flex;gap:10px}.sidebar-intro strong,.sidebar-intro span{display:block}.sidebar-intro span{margin-top:3px;color:var(--faint);font-size:.72rem}.sidebar-icon{color:var(--teal);font-size:1.2rem}.storage-card>div:first-child{display:flex;justify-content:space-between;font-size:.76rem}.storage-card>div:first-child span{color:var(--teal)}.storage-bar{height:6px;margin:15px 0 10px;border-radius:9px;background:#ffffff16}.storage-bar span{display:block;width:0;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--red),var(--teal))}.storage-card p,.sidebar-tip{margin:0;color:var(--faint);font-size:.72rem;line-height:1.5}.sidebar-tip{color:var(--muted)}.main-panel{min-width:0}.heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.heading h1{font-size:clamp(2rem,4vw,3.4rem)}.heading p:not(.eyebrow){margin:10px 0 0;color:var(--muted)}.drop-hint{display:flex;align-items:center;gap:12px;min-height:62px;margin-bottom:12px;padding:12px 15px;border:1px dashed #42c5b459;border-radius:var(--radius);background:#42c5b409;transition:.18s ease}.drop-hint.drag{border-color:var(--teal);background:#42c5b41e;transform:scale(1.01)}.drop-hint>b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#42c5b41e;color:var(--teal);font-size:1.2rem}.drop-hint strong,.drop-hint small{display:block}.drop-hint small{margin-top:3px;color:var(--muted);font-size:.72rem}.breadcrumb,.mobile-path{display:flex;align-items:center;gap:5px;min-height:32px;flex-wrap:wrap;color:var(--muted)}.breadcrumb button,.mobile-path button{padding:5px 7px;border-radius:7px;background:transparent;color:var(--muted);font-size:.78rem}.breadcrumb button:hover,.mobile-path button:hover{background:var(--redsoft);color:var(--text)}.toolbar{margin-top:13px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:#151923bd}.search{display:flex;align-items:center;flex:1;gap:8px;color:var(--muted)}.search input{width:100%;border:0;outline:0;background:transparent;color:var(--text)}kbd{padding:2px 5px;border:1px solid var(--line2);border-radius:5px;color:var(--faint);font-size:.65rem}.sort{display:flex;align-items:center;gap:6px;color:var(--faint);font-size:.7rem;white-space:nowrap}.sort select{padding:7px;border:1px solid var(--line);border-radius:7px;background:var(--raised);color:var(--text);font-size:.75rem}.views{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:8px}.view{width:30px;height:28px;border-radius:6px;background:transparent;color:var(--faint)}.view.active,.view:hover{background:var(--redsoft);color:var(--text)}.meta{display:flex;justify-content:space-between;align-items:center;min-height:35px}.meta>span{color:var(--faint);font-size:.72rem}.mobile-path{display:none}.explorer{min-height:300px}.loading,.empty{display:grid;place-items:center;min-height:300px;color:var(--muted);text-align:center}.empty>b{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--line2);border-radius:18px;color:var(--teal);font-size:2rem}.empty h2{margin:10px 0 4px;color:var(--text);font-size:1rem}.empty p{margin:0;font-size:.8rem}.loading i,.preview-body>i{display:inline-block;width:18px;height:18px;border:2px solid #fff4;border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.card{min-height:145px}.file-card{min-height:145px;padding:15px;border:1px solid var(--line);border-radius:var(--small);background:linear-gradient(145deg,#181d28f2,#12151dcc);cursor:pointer;transition:.18s ease}.file-card:hover{border-color:#42c5b48c;background:var(--raised);transform:translateY(-2px)}.file-card-top,.file-card-foot,.list-name{display:flex;align-items:center;gap:9px}.file-card-top{justify-content:space-between}.file-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#42c5b41a;color:var(--teal);font-size:1.15rem}.file-icon.folder{background:#e0525d1f;color:#ff8b91}.file-icon.media{background:#b77dff21;color:#c9a5ff}.file-icon.document{background:#f6c35b21;color:#f6c35b}.file-name{margin:15px 0 0;overflow:hidden;font-size:.82rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.file-card-foot{justify-content:space-between;margin-top:12px;color:var(--faint);font-size:.67rem}.card-menu,.row-menu{display:flex;gap:3px;opacity:0}.file-card:hover .card-menu,.file-card:focus-within .card-menu,.list-row:hover .row-menu{opacity:1}.mini{min-width:27px;height:27px;border:1px solid transparent;border-radius:7px;background:#090b1094;color:var(--muted)}.mini:hover{border-color:var(--line2);color:var(--text)}.mini.danger:hover{color:var(--danger)}.list{overflow:auto;border:1px solid var(--line);border-radius:var(--small);background:#151923a8}.list table{width:100%;min-width:650px;border-collapse:collapse}.list th,.list td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}.list th{color:var(--faint);font-size:.67rem;text-transform:uppercase}.list td{color:var(--muted);font-size:.78rem}.list tr:last-child td{border:0}.list-name{color:var(--text);font-weight:800}.uploads{margin-top:15px;padding:13px;border:1px solid var(--line);border-radius:var(--small);background:#151923cc}.uploads header{display:flex;justify-content:space-between;margin-bottom:7px;font-size:.77rem}.uploads header button{background:transparent;color:var(--muted);font-size:.7rem}.upload-item{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 0;border-top:1px solid var(--line)}.upload-item:first-child{border:0}.upload-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem}.upload-item-status{color:var(--muted);font-size:.67rem}.progress{grid-column:1/-1;height:4px;border-radius:9px;background:#ffffff16}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--teal))}.preview-dialog{width:min(850px,calc(100% - 26px));padding:0;border:1px solid var(--line2);border-radius:20px;background:var(--panel);color:var(--text)}.preview-dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.preview-dialog header,.preview-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px}.preview-dialog header{border-bottom:1px solid var(--line)}.preview-dialog h2{margin:0;overflow:hidden;font-size:1rem;text-overflow:ellipsis;white-space:nowrap}.preview-body{display:grid;place-items:center;min-height:260px;max-height:530px;overflow:auto;padding:20px;background:#090b10}.preview-body img,.preview-body video{max-width:100%;max-height:480px;border-radius:9px}.preview-body audio{width:min(520px,100%)}.preview-body iframe{width:100%;min-height:480px;border:0;background:#fff}.preview-body pre{width:100%;white-space:pre-wrap;color:#d6deeb;font:.78rem/1.6 monospace}.preview-dialog footer{border-top:1px solid var(--line);color:var(--faint);font-size:.72rem}@media(max-width:980px){.workspace{grid-template-columns:1fr}.sidebar{position:static;grid-template-columns:1fr 1fr}.sidebar-tip{display:none}}@media(max-width:720px){.cloud-shell{width:calc(100% - 22px);padding-top:15px}.cloud-login{grid-template-columns:1fr;min-height:80vh;gap:25px}.topbar{margin-bottom:26px}.heading{display:block}.heading-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:18px}.heading-actions>*{width:100%}.toolbar{display:grid;grid-template-columns:1fr;padding:9px}.toolbar .search{min-height:36px}.toolbar .sort,.toolbar .icon-button,.toolbar .views{grid-row:2;margin-top:8px}.toolbar .sort{justify-content:space-between}.toolbar .sort span{display:none}.mobile-path{display:flex}.breadcrumb{display:none}.meta{align-items:flex-start;flex-wrap:wrap}.meta .message{flex-basis:100%}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.file-card{min-height:130px;padding:12px}.card-menu{opacity:1}.sidebar{grid-template-columns:1fr}.storage-card{display:none}.preview-dialog footer{align-items:stretch;flex-direction:column}}@media(max-width:390px){.grid{grid-template-columns:1fr}.heading-actions{grid-template-columns:1fr}}
/* cloud-icon-tune */
.ph{display:inline-block;line-height:1;vertical-align:-.12em}.file-icon .ph{font-size:1.35rem}.icon-button .ph,.view .ph,.mini .ph{font-size:1.05rem}.upload-control .ph,.secondary .ph{margin-right:.35rem}.drop-hint>b.ph{font-size:1.35rem}


/* cloud-responsive-v2 */
html {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.cloud-shell {
  max-width: 100%;
}

.preview-dialog {
  width: min(850px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  overflow: hidden;
}

.preview-dialog header,
.preview-dialog footer {
  flex-shrink: 0;
}

.preview-dialog h2 {
  min-width: 0;
}

.preview-body {
  width: 100%;
  min-width: 0;
  min-height: 240px;
  max-height: min(530px, calc(100dvh - 170px));
}

.preview-body img,
.preview-body video {
  display: block;
  width: auto;
  height: auto;
}

.preview-body audio {
  display: block;
  width: 100%;
  max-width: 640px;
  min-width: 0;
  height: 54px;
}

@media (max-width: 720px) {
  .cloud-shell {
    width: calc(100% - 20px);
    max-width: 100%;
    padding: 12px 0 32px;
  }

  .topbar {
    gap: 10px;
    margin-bottom: 20px;
  }

  .brand-lockup {
    min-width: 0;
  }

  .brand-lockup .brand-mark {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .brand-lockup span:last-child {
    min-width: 0;
  }

  .brand-lockup strong {
    overflow: hidden;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions {
    flex-shrink: 0;
  }

  .profile-button {
    padding-inline: 10px;
  }

  .heading h1 {
    font-size: clamp(1.9rem, 9vw, 2.6rem);
  }

  .heading p:not(.eyebrow) {
    font-size: .82rem;
  }

  .heading-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .heading-actions > * {
    min-width: 0;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .toolbar {
    gap: 8px;
  }

  .toolbar .sort select {
    max-width: 120px;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .file-card {
    display: grid;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / .82;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 11px;
    overflow: hidden;
  }

  .file-icon {
    width: 34px;
    height: 34px;
  }

  .file-name {
    align-self: center;
    display: -webkit-box;
    margin: 10px 0 0;
    overflow: hidden;
    line-height: 1.25;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .file-card-foot {
    min-width: 0;
    margin-top: 8px;
  }

  .file-card-foot span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-menu {
    gap: 2px;
  }

  .mini {
    width: 25px;
    min-width: 25px;
    height: 25px;
  }

  .preview-dialog {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 16px;
  }

  .preview-dialog header,
  .preview-dialog footer {
    padding: 12px 14px;
  }

  .preview-dialog h2 {
    font-size: .9rem;
  }

  .preview-body {
    min-height: 180px;
    max-height: calc(100dvh - 150px);
    padding: 16px 12px;
  }

  .preview-body audio {
    width: 100%;
    max-width: none;
    height: 56px;
  }

  .preview-body video {
    max-height: calc(100dvh - 220px);
  }

  .preview-dialog footer {
    flex-direction: row;
    align-items: center;
  }

  .preview-dialog footer span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  input,
  select {
    font-size: 16px;
  }

  .toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .toolbar .search {
    grid-column: 1 / -1;
  }

  .toolbar .sort,
  .toolbar .icon-button,
  .toolbar .views {
    grid-row: auto;
    margin-top: 0;
  }

  .toolbar .sort {
    min-width: 0;
  }

  .toolbar .sort select {
    max-width: 100%;
  }

  .toolbar .views {
    margin-left: auto;
  }

  .mobile-path {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .mobile-path strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .cloud-shell {
    width: calc(100% - 14px);
  }

  .heading-actions {
    grid-template-columns: 1fr;
  }

  .file-card {
    padding: 9px;
  }

  .file-name {
    font-size: .75rem;
  }

  .file-card-foot {
    font-size: .6rem;
  }

  .preview-dialog footer {
    flex-direction: column;
    align-items: stretch;
  }

  .preview-dialog footer .secondary {
    width: 100%;
  }
}

.cloud-logo { display: block; width: min(190px, 48vw); height: auto; max-height: 52px; object-fit: contain; object-position: left center; }
.cloud-logo-login { margin-bottom: 18px; }
.cloud-logo-header { width: min(176px, 42vw); max-height: 42px; }
.brand-lockup { align-items: center; }

/* cloud-rebrand-v1: visual-only layer; interaction and data selectors remain unchanged. */
:root {
  --bg: #0b0e16;
  --panel: #171c29;
  --raised: #1d2433;
  --line: #293144;
  --line-soft: rgba(137, 152, 190, .18);
  --line-strong: rgba(166, 165, 255, .42);
  --text: #f5f6fc;
  --muted: #9aa5bb;
  --faint: #69758c;
  --accent: #8898ff;
  --accent-2: #a6a5ff;
  --accent-gradient: linear-gradient(135deg, #a6a5ff 0%, #8898ff 100%);
  --red: #ed6c78;
  --redsoft: rgba(237, 108, 120, .14);
  --danger: #ff8791;
  --focus: #c2c7ff;
  --teal: #92a2ff;
  --green: #91d8bd;
  --radius: 16px;
  --small: 12px;
}

html,
body {
  background: var(--bg);
}

body {
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 8% -8%, rgba(136, 152, 255, .14), transparent 32rem),
    radial-gradient(circle at 100% 16%, rgba(166, 165, 255, .08), transparent 28rem),
    var(--bg);
}

button,
input,
select {
  font-family: inherit;
}

button,
.file-card,
.list-row,
.cloud-menu,
.cloud-action-menu,
.preview-dialog,
.drop-hint,
.primary,
.secondary,
.icon-button,
.profile-button {
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
.file-card:focus-visible,
.list-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.cloud-shell {
  width: min(1420px, calc(100% - 44px));
  padding: 22px 0 58px;
}

.cloud-logo-header {
  width: min(146px, 42vw);
  max-height: 38px;
}

.brand-lockup {
  gap: 12px;
}

.brand-lockup > span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-lockup > span::before {
  content: "";
  width: 1px;
  height: 22px;
  background: var(--line-strong);
}

.brand-lockup strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.brand-lockup small {
  display: none;
}

.topbar {
  margin-bottom: 34px;
}

.topbar-actions,
.heading-actions,
.toolbar {
  gap: 8px;
}

.icon-button,
.profile-button,
.secondary,
.primary {
  min-height: 42px;
  border-radius: 12px;
  border-color: var(--line);
  background: rgba(23, 28, 41, .9);
  color: var(--text);
  box-shadow: none;
}

.icon-button:hover,
.profile-button:hover,
.secondary:hover {
  border-color: var(--line-strong);
  background: var(--raised);
  color: #fff;
  transform: translateY(-1px);
}

.primary {
  border-color: transparent;
  background: var(--accent-gradient);
  color: #090c18;
  box-shadow: 0 8px 24px rgba(136, 152, 255, .18);
}

.primary:hover {
  background: linear-gradient(135deg, #b7b4ff 0%, #9aa8ff 100%);
  box-shadow: 0 10px 28px rgba(136, 152, 255, .28);
  transform: translateY(-1px);
}

.eyebrow {
  color: var(--accent-2);
  letter-spacing: .14em;
}

.login-brand h1,
.heading h1 {
  letter-spacing: -.045em;
  font-weight: 650;
}

.login-brand > p:not(.eyebrow),
.heading p:not(.eyebrow) {
  color: var(--muted);
}

.login-form,
.sidebar-intro,
.storage-card,
.sidebar-tip,
.toolbar,
.uploads {
  border-color: var(--line);
  background: rgba(23, 28, 41, .86);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .16);
}

.login-form {
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.login-form input,
.sort select {
  border-color: var(--line);
  background: #0e121c;
}

.sidebar {
  gap: 12px;
}

.sidebar-intro {
  align-items: center;
  border-color: var(--line-strong);
  background: linear-gradient(135deg, rgba(136, 152, 255, .13), rgba(23, 28, 41, .9) 62%);
}

.sidebar-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(136, 152, 255, .14);
  color: var(--accent-2);
}

.sidebar-intro strong {
  font-size: .92rem;
  font-weight: 650;
}

.sidebar-intro span {
  color: var(--muted);
}

.storage-card > div:first-child span {
  color: var(--accent-2);
}

.storage-bar {
  background: rgba(136, 152, 255, .12);
}

.storage-bar span,
.progress span {
  background: var(--accent-gradient);
}

.sidebar-tip {
  color: var(--muted);
}

.drop-hint {
  border-color: rgba(136, 152, 255, .4);
  background: rgba(136, 152, 255, .05);
}

.drop-hint.drag {
  border-color: var(--accent);
  background: rgba(136, 152, 255, .12);
}

.drop-hint > b.ph {
  background: rgba(136, 152, 255, .14);
  color: var(--accent-2);
}

.breadcrumb,
.mobile-path {
  color: var(--muted);
}

.breadcrumb button:hover,
.mobile-path button:hover {
  background: rgba(136, 152, 255, .1);
  color: var(--text);
}

.toolbar {
  border-radius: 14px;
}

.search {
  color: var(--muted);
}

.search input::placeholder {
  color: var(--faint);
}

kbd {
  border-color: var(--line);
  color: var(--faint);
}

.view.active,
.view:hover,
.selection-mode-button.active {
  background: rgba(136, 152, 255, .14);
  color: var(--accent-2);
}

.grid {
  gap: 12px;
}

.file-card {
  min-height: 142px;
  border-color: var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(29, 36, 51, .9), rgba(23, 28, 41, .9));
}

.file-card:hover,
.file-card:focus-visible,
.file-card.is-selected {
  border-color: var(--line-strong);
  background: linear-gradient(145deg, rgba(37, 45, 66, .96), rgba(23, 28, 41, .96));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
  transform: translateY(-1px);
}

.file-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(136, 152, 255, .28), rgba(136, 152, 255, .12));
  color: #aeb6ff;
}

.file-icon.folder {
  background: linear-gradient(145deg, rgba(136, 152, 255, .38), rgba(136, 152, 255, .16));
  color: #bac0ff;
}

.file-icon.media {
  background: linear-gradient(145deg, rgba(166, 165, 255, .34), rgba(136, 152, 255, .13));
  color: #d1cfff;
}

.file-icon.document {
  background: rgba(145, 216, 189, .14);
  color: #a5e3cc;
}

.file-name,
.list-name {
  color: var(--text);
  font-weight: 650;
}

.file-card-foot,
.list td,
.list th,
.meta > span {
  color: var(--muted);
}

.mini {
  background: rgba(11, 14, 22, .72);
  color: var(--muted);
}

.mini:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.mini.danger:hover,
.cloud-action-item.danger:hover {
  color: var(--danger);
}

.list {
  border-color: var(--line);
  background: rgba(23, 28, 41, .72);
}

.list th,
.list td {
  border-color: var(--line);
}

.list th {
  color: var(--faint);
}

.loading,
.empty {
  color: var(--muted);
}

.empty > b {
  border-color: var(--line-strong);
  color: var(--accent-2);
}

.loading i,
.preview-body > i {
  border-top-color: var(--accent);
}

.preview-dialog {
  width: min(880px, calc(100% - 28px));
  max-width: calc(100% - 28px);
  max-height: calc(100dvh - 28px);
  border-color: var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .46);
}

.preview-dialog::backdrop {
  background: rgba(3, 5, 10, .78);
  backdrop-filter: blur(7px);
}

.preview-dialog header {
  position: relative;
  align-items: flex-start;
  padding: 20px 22px 18px 86px;
  border-color: var(--line);
}

.preview-dialog header > div {
  min-width: 0;
}

.preview-dialog header > div::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 22px;
  width: 48px;
  height: 30px;
  background: url("https://hiddenroom.mx/assets/img/mysauth-logo.webp") left center / contain no-repeat;
}

.preview-dialog header > div::after {
  content: "CLOUD";
  position: absolute;
  top: 52px;
  left: 86px;
  color: var(--faint);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .2em;
}

.preview-dialog .eyebrow {
  margin-bottom: 5px;
  color: var(--accent-2);
}

.preview-dialog h2 {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -.02em;
}

.preview-dialog .icon-button {
  border-radius: 50%;
}

.preview-body {
  min-height: 300px;
  max-height: min(560px, calc(100dvh - 176px));
  padding: 24px;
  background: #0b0e16;
}

.preview-body img,
.preview-body video {
  max-width: 100%;
  max-height: min(500px, calc(100dvh - 250px));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.preview-body audio {
  width: min(560px, 100%);
}

.preview-body iframe {
  min-height: min(520px, calc(100dvh - 250px));
  border-radius: 12px;
}

.preview-body pre {
  color: #dbe0f1;
}

.preview-dialog footer {
  gap: 16px;
  padding: 16px 22px 20px;
  border-color: var(--line);
}

.preview-dialog footer span {
  color: var(--muted);
}

.preview-dialog #preview-download {
  min-width: 132px;
  border-color: transparent;
  background: var(--accent-gradient);
  color: #090c18;
}

.cloud-menu,
.cloud-action-menu {
  z-index: 20;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(23, 28, 41, .98);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .35);
}

.cloud-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  padding: 7px;
}

.topbar-actions {
  position: relative;
}

.cloud-menu-item,
.cloud-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: .82rem;
  font-weight: 550;
}

.cloud-menu-item:hover,
.cloud-menu-item.active,
.cloud-action-item:hover {
  background: rgba(136, 152, 255, .12);
  color: var(--text);
}

.cloud-menu-item.danger:hover {
  color: var(--danger);
}

.cloud-menu-divider {
  display: block;
  height: 1px;
  margin: 6px 4px;
  background: var(--line);
}

.cloud-action-menu {
  position: fixed;
  min-width: 190px;
  padding: 7px;
}

.search-actions-trigger {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(29, 36, 51, .8);
  color: var(--muted);
}

.search-actions-trigger:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.message.error,
.error {
  color: var(--danger);
}

@media (max-width: 720px) {
  .cloud-shell {
    width: calc(100% - 22px);
    padding-top: 12px;
  }

  .topbar {
    margin-bottom: 22px;
  }

  .cloud-logo-header {
    width: min(137px, 42vw);
    max-height: 34px;
  }

  .brand-lockup {
    gap: 9px;
  }

  .brand-lockup > span {
    gap: 8px;
  }

  .brand-lockup strong {
    font-size: .92rem;
  }

  .brand-lockup > span::before {
    height: 19px;
  }

  .topbar-actions {
    gap: 6px;
  }

  .topbar-actions .icon-button {
    min-width: 40px;
    padding: 0;
  }

  .heading h1 {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .heading-actions > * {
    min-height: 44px;
  }

  .file-card {
    min-height: 132px;
    border-radius: 13px;
  }

  .preview-dialog {
    width: calc(100% - 18px);
    max-width: calc(100% - 18px);
    max-height: calc(100dvh - 18px);
    border-radius: 18px;
  }

  .preview-dialog header {
    padding: 16px 14px 14px 76px;
  }

  .preview-dialog header > div::before {
    top: 16px;
    left: 14px;
    width: 46px;
  }

  .preview-dialog header > div::after {
    top: 47px;
    left: 76px;
  }

  .preview-body {
    min-height: 190px;
    max-height: calc(100dvh - 172px);
    padding: 14px 10px;
  }

  .preview-body img,
  .preview-body video {
    max-height: calc(100dvh - 245px);
    border-radius: 11px;
  }

  .preview-dialog footer {
    padding: 12px 14px 14px;
  }
}

@media (max-width: 390px) {
  .cloud-logo-header {
    width: 124px;
  }

  .brand-lockup strong {
    font-size: .86rem;
  }

  .preview-dialog header {
    padding-left: 68px;
  }

  .preview-dialog header > div::after {
    left: 68px;
  }
}

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

/* cloud-refinement-v2: compact preview, sharing and file explorer polish.
   Presentation-only overrides; data, actions and selectors remain unchanged. */

.topbar {
  margin-bottom: 18px;
}

.sidebar-intro {
  min-height: 88px;
  padding: 16px 18px;
}

.sidebar-intro > .sidebar-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  line-height: 1;
}

.heading {
  margin-bottom: 14px;
}

.heading h1 {
  font-size: clamp(1.85rem, 4vw, 2.7rem);
  letter-spacing: -.035em;
}

.heading p {
  margin-top: 6px;
  font-size: .9rem;
}

.drop-hint {
  min-height: 52px;
  padding: 10px 14px;
}

.toolbar {
  padding: 8px;
}

.grid {
  gap: 10px;
}

.file-card .card-menu {
  opacity: 0;
  transition: opacity .18s ease;
}

.file-card:hover .card-menu,
.file-card:focus-within .card-menu,
.file-card:focus-visible .card-menu {
  opacity: 1;
}

@media (hover: none), (max-width: 720px) {
  .file-card .card-menu {
    opacity: 1;
  }
}

/* Preview: adapt the surface to its content instead of forcing a giant black box. */
dialog.preview-dialog {
  width: min(760px, calc(100% - 24px));
  max-width: 760px;
  max-height: calc(100dvh - 20px);
  border: 1px solid var(--line) !important;
  border-radius: 20px;
  background: var(--panel) !important;
  overflow: hidden;
}

.preview-dialog header {
  gap: 12px;
  padding: 16px 18px 13px 76px;
}

.preview-dialog header h2,
.preview-dialog header strong,
.preview-dialog #preview-title {
  max-width: min(100%, 560px);
  font-size: clamp(.98rem, 2vw, 1.16rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.preview-dialog .preview-body {
  min-height: 0;
  max-height: min(460px, calc(100dvh - 190px));
  padding: 16px;
  background: #111726;
  border-top: 1px solid rgba(41, 49, 68, .7);
  border-bottom: 1px solid rgba(41, 49, 68, .7);
  overflow: auto;
}

.preview-dialog .preview-body img,
.preview-dialog .preview-body video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(420px, calc(100dvh - 230px));
  object-fit: contain;
  border-radius: 12px;
}

.preview-dialog .preview-body iframe {
  width: 100%;
  min-height: min(420px, calc(100dvh - 230px));
  border-radius: 12px;
}

.preview-dialog .preview-body audio {
  display: block;
  width: min(100%, 560px);
  height: 54px;
  margin: 12px auto;
  accent-color: var(--accent);
}

.preview-dialog .preview-body:has(audio) {
  min-height: 116px;
  padding: 20px 16px;
  background: linear-gradient(135deg, rgba(136, 152, 255, .12), rgba(29, 36, 51, .82));
}

.preview-dialog footer {
  gap: 8px;
  padding: 12px 18px 14px;
}

.preview-dialog footer button,
.preview-dialog footer a {
  min-height: 44px;
  border-radius: 11px;
}

/* Share dialog: override the legacy inline style injected by cloud.js. */
.share-dialog.share-dialog {
  width: min(560px, calc(100% - 20px));
  max-width: 560px;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}

.share-dialog .share-dialog-card {
  gap: 16px;
  padding: 20px;
}

.share-dialog .share-dialog-header {
  gap: 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}

.share-dialog .share-dialog-header h2 {
  max-width: 100%;
  font-size: 1.1rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.share-dialog .share-dialog-lead {
  color: var(--muted) !important;
  font-size: .82rem;
  line-height: 1.4;
}

.share-dialog .dialog-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--raised) !important;
  color: var(--muted) !important;
}

.share-dialog .share-options {
  gap: 8px;
}

.share-dialog .share-option {
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--raised) !important;
  color: var(--text) !important;
}

.share-dialog .share-option:has(input:checked) {
  border-color: var(--accent) !important;
  background: rgba(136, 152, 255, .12) !important;
  box-shadow: 0 0 0 1px rgba(136, 152, 255, .24);
}

.share-dialog .share-option input {
  accent-color: var(--accent);
}

.share-dialog .share-option small {
  color: var(--muted) !important;
}

.share-dialog .share-link-panel {
  padding: 12px;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: rgba(29, 36, 51, .56) !important;
}

.share-dialog .share-link-row {
  align-items: stretch;
  gap: 8px;
}

.share-dialog .share-link-row input {
  min-height: 44px;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

.share-dialog .share-link-row button,
.share-dialog .share-dialog-footer button {
  min-height: 44px;
  border-radius: 11px !important;
}

.share-dialog .share-dialog-footer {
  gap: 8px;
  padding-top: 2px;
}

.share-dialog .share-dialog-footer button:not(.primary) {
  border: 1px solid var(--line) !important;
  background: var(--raised) !important;
  color: var(--text) !important;
}

.share-dialog .share-dialog-footer .primary,
.share-dialog .share-dialog-footer button[data-share-save] {
  border-color: transparent !important;
  background: var(--accent-gradient) !important;
  color: #090c18 !important;
}

@media (max-width: 720px) {
  .topbar {
    margin-bottom: 12px;
  }

  .sidebar-intro {
    min-height: 76px;
    padding: 13px 14px;
  }

  .drop-hint {
    min-height: 46px;
    font-size: .82rem;
  }

  .preview-dialog .preview-body {
    max-height: calc(100dvh - 170px);
    padding: 12px;
  }

  .preview-dialog .preview-body img,
  .preview-dialog .preview-body video {
    max-height: calc(100dvh - 240px);
  }

  .share-dialog .share-dialog-card {
    padding: 16px;
  }

  .share-dialog .share-link-row {
    flex-direction: column;
  }
}

/* The preview dialog is presentationally identified by id in the existing HTML. */
#preview-dialog {
  width: min(760px, calc(100% - 24px));
  max-width: 760px;
  max-height: calc(100dvh - 20px);
  border: 1px solid var(--line) !important;
  border-radius: 20px;
  background: var(--panel) !important;
  color: var(--text);
  overflow: hidden;
}

#preview-dialog header {
  position: relative;
  gap: 12px;
  padding: 16px 18px 13px 76px;
}

#preview-dialog header > div {
  min-width: 0;
}

#preview-dialog header > div::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 18px;
  width: 44px;
  height: 28px;
  background: url("https://hiddenroom.mx/assets/img/mysauth-logo.webp") left center / contain no-repeat;
}

#preview-dialog header > div::after {
  content: "CLOUD";
  position: absolute;
  top: 44px;
  left: 76px;
  color: var(--faint);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .18em;
}

#preview-dialog h2,
#preview-dialog #preview-title {
  max-width: min(100%, 560px);
  font-size: clamp(.98rem, 2vw, 1.16rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

#preview-dialog .preview-body {
  min-height: 0;
  max-height: min(460px, calc(100dvh - 190px));
  padding: 16px;
  background: #111726;
  border-top: 1px solid rgba(41, 49, 68, .7);
  border-bottom: 1px solid rgba(41, 49, 68, .7);
  overflow: auto;
}

#preview-dialog .preview-body img,
#preview-dialog .preview-body video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(420px, calc(100dvh - 230px));
  object-fit: contain;
  border-radius: 12px;
}

#preview-dialog .preview-body iframe {
  width: 100%;
  min-height: min(420px, calc(100dvh - 230px));
  border-radius: 12px;
}

#preview-dialog .preview-body audio {
  display: block;
  width: min(100%, 560px);
  height: 54px;
  margin: 12px auto;
  accent-color: var(--accent);
}

#preview-dialog .preview-body:has(audio) {
  min-height: 116px;
  padding: 20px 16px;
  background: linear-gradient(135deg, rgba(136, 152, 255, .12), rgba(29, 36, 51, .82));
}

#preview-dialog footer {
  gap: 8px;
  padding: 12px 18px 14px;
}

#preview-dialog footer button,
#preview-dialog footer a {
  min-height: 44px;
  border-radius: 11px;
}

@media (max-width: 720px) {
  #preview-dialog .preview-body {
    max-height: calc(100dvh - 170px);
    padding: 12px;
  }

  #preview-dialog .preview-body img,
  #preview-dialog .preview-body video {
    max-height: calc(100dvh - 240px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .file-card .card-menu {
    transition: none !important;
  }
}

/* cloud-login-refinement-v1: visual-only login composition. */
.cloud-login {
  position: relative;
  isolation: isolate;
  width: min(1180px, 100%);
  min-height: calc(100svh - 80px);
  grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
  gap: clamp(42px, 7vw, 104px);
  padding: clamp(28px, 5vw, 72px) clamp(20px, 4vw, 64px);
  overflow: hidden;
}

.cloud-login::before,
.login-brand::before {
  position: absolute;
  z-index: -1;
  width: clamp(360px, 42vw, 620px);
  height: clamp(360px, 42vw, 620px);
  border: 1px solid rgba(136, 152, 255, .22);
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

.cloud-login::before {
  top: clamp(-390px, -25vw, -220px);
  left: clamp(-360px, -24vw, -180px);
  box-shadow: 0 0 0 28px rgba(136, 152, 255, .035), 0 0 0 56px rgba(166, 165, 255, .025);
}

.login-brand {
  position: relative;
  min-width: 0;
  max-width: 570px;
  padding-right: clamp(18px, 4vw, 64px);
}

.login-brand::before {
  right: clamp(-340px, -25vw, -180px);
  bottom: clamp(-430px, -28vw, -250px);
  border-color: rgba(166, 165, 255, .16);
  box-shadow: 0 0 0 26px rgba(166, 165, 255, .025), 0 0 0 52px rgba(136, 152, 255, .018);
}

.login-brand::after {
  position: absolute;
  top: 8%;
  right: 0;
  width: 1px;
  height: 84%;
  background: linear-gradient(180deg, transparent, rgba(166, 165, 255, .3), transparent);
  pointer-events: none;
  content: "";
}

.cloud-login .login-brand,
.cloud-login .login-form {
  z-index: 1;
}

.cloud-login .cloud-logo-login {
  width: min(224px, 48vw);
  max-height: 56px;
  margin-bottom: 24px;
}

.cloud-login .login-brand h1 {
  max-width: 520px;
  margin-bottom: 14px;
  font-size: clamp(2.45rem, 5vw, 4.25rem);
  line-height: 1;
}

.cloud-login .login-brand > p:not(.eyebrow) {
  max-width: 490px;
  margin: 0;
  font-size: clamp(.98rem, 1.3vw, 1.08rem);
  line-height: 1.6;
}

.cloud-login .login-form {
  width: 100%;
  gap: 15px;
  padding: clamp(24px, 3vw, 34px);
  border-color: rgba(166, 165, 255, .25);
  border-radius: 20px;
  background: rgba(23, 28, 41, .88);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3), 0 0 0 1px rgba(136, 152, 255, .035);
  backdrop-filter: blur(14px);
}

.cloud-login .login-form h2 {
  font-size: 1.35rem;
  letter-spacing: -.02em;
}

.cloud-login .login-form input {
  min-height: 48px;
  border-color: rgba(166, 165, 255, .22);
  border-radius: 11px;
  background: rgba(11, 14, 22, .78);
}

.cloud-login .login-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(136, 152, 255, .12);
}

.cloud-login .login-form .primary {
  min-height: 48px;
  margin-top: 2px;
}

@media (max-width: 720px) {
  .cloud-shell {
    width: 100%;
    padding: max(12px, env(safe-area-inset-top)) 0 calc(30px + env(safe-area-inset-bottom));
  }

  .cloud-login {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    padding: 24px 20px 30px;
    overflow: hidden;
  }

  .cloud-login::before {
    top: -290px;
    left: -250px;
    width: 470px;
    height: 470px;
  }

  .login-brand {
    max-width: none;
    padding-right: 0;
  }

  .login-brand::after {
    display: none;
  }

  .login-brand::before {
    right: -270px;
    bottom: -360px;
    width: 460px;
    height: 460px;
  }

  .cloud-login .cloud-logo-login {
    width: min(210px, 68vw);
    max-height: 50px;
    margin-bottom: 18px;
  }

  .cloud-login .login-brand h1 {
    max-width: none;
    margin-bottom: 10px;
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }

  .cloud-login .login-brand > p:not(.eyebrow) {
    max-width: none;
    font-size: .98rem;
    line-height: 1.5;
  }

  .cloud-login .login-form {
    gap: 14px;
    padding: 24px;
    border-radius: 18px;
  }

  .cloud-login .login-form input {
    min-height: 50px;
    font-size: 16px;
  }

  .cloud-login .login-form .primary {
    width: 100%;
    min-height: 50px;
  }
}

@media (max-width: 390px) {
  .cloud-login {
    gap: 16px;
    padding-inline: 18px;
  }

  .cloud-login .login-form {
    padding: 20px;
  }
}

/* cloud-preview-refinement-v1: internal file preview only. */
#preview-dialog.preview-dialog {
  width: min(480px, calc(100% - 40px));
  max-width: 480px;
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}

#preview-dialog.preview-dialog::backdrop {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
}

#preview-dialog .preview-modal {
  width: 100%;
  max-height: calc(100dvh - 40px);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  background: var(--panel);
  box-shadow: 0 25px 90px color-mix(in srgb, var(--bg) 86%, transparent);
  overflow: auto;
}

#preview-dialog .preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

#preview-dialog .preview-header > div::before,
#preview-dialog .preview-header > div::after {
  content: none;
}

#preview-dialog .preview-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--accent-2);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#preview-dialog .preview-label i {
  color: var(--accent);
  font-size: 1rem;
}

#preview-dialog .close-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
  color: var(--text);
}

#preview-dialog .close-btn:hover {
  border-color: var(--line-strong);
  background: var(--line-strong);
}

#preview-dialog .file-info {
  min-width: 0;
  margin: 0 0 20px;
}

#preview-dialog .file-info h2 {
  margin: 0 0 8px;
  font-size: clamp(1.06rem, 4.5vw, 1.32rem);
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#preview-dialog .file-info p {
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
}

#preview-dialog .preview-body {
  display: grid;
  place-items: center;
  min-height: 120px;
  max-height: min(460px, calc(100dvh - 250px));
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised);
  overflow: auto;
}

#preview-dialog .preview-body:has(audio) {
  min-height: 104px;
  padding: 20px 16px;
}

#preview-dialog .preview-body audio {
  display: block;
  width: 100%;
  height: 42px;
  margin: 0;
  accent-color: var(--accent);
  color-scheme: dark;
}

#preview-dialog .preview-body img,
#preview-dialog .preview-body video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(420px, calc(100dvh - 290px));
  border: 0;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: none;
}

#preview-dialog .preview-body iframe {
  width: 100%;
  min-height: min(420px, calc(100dvh - 290px));
  border: 0;
  border-radius: 10px;
  background: var(--text);
}

#preview-dialog .preview-body pre {
  width: 100%;
  color: var(--text);
}

#preview-dialog .preview-footer {
  display: block;
  padding: 0;
  border: 0;
}

#preview-dialog .download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--accent-gradient);
  color: var(--bg);
  font: inherit;
  font-weight: 800;
}

#preview-dialog .preview-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

#preview-dialog .download-btn {
  display: grid;
  place-items: center;
}

#preview-dialog .download-btn-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: inherit;
}

#preview-dialog .download-btn-content > span {
  color: inherit;
}

#preview-dialog .download-icon {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
}

#preview-dialog .download-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  #preview-dialog.preview-dialog {
    width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
  }

  #preview-dialog .preview-modal {
    max-height: calc(100dvh - 24px);
    padding: 16px;
    border-radius: 20px;
  }

  #preview-dialog .preview-header {
    margin-bottom: 20px;
  }

  #preview-dialog .preview-body {
    margin-bottom: 20px;
    padding: 12px;
  }
}

/* cloud-admin-v1: admin-only user access and quota editor. */
#menu-admin {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 12px;
}

.admin-page {
  width: 100%;
  min-width: 0;
  margin-top: 8px;
}

.admin-page-shell {
  min-height: calc(100dvh - 150px);
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .24);
}

.admin-page .admin-header {
  align-items: flex-start;
}

.admin-page .admin-header > div {
  min-width: 0;
}

.admin-subnav {
  display: flex;
  gap: 4px;
  margin: 2px 0 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(29, 36, 51, .48);
}

.admin-subnav-item {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
}

.admin-subnav-item:hover,
.admin-subnav-item.is-active {
  border-color: var(--line-strong);
  background: rgba(136, 152, 255, .12);
  color: var(--text);
}

.admin-tab-panel {
  display: grid;
  gap: 16px;
}

.admin-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-panel-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.admin-panel-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .78rem;
}

.admin-panel-heading .secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.admin-page .admin-user-results {
  min-height: 300px;
  max-height: none;
}

.admin-share-status {
  min-height: 0;
  margin: -6px 0 0;
  color: var(--accent-2);
  font-size: .75rem;
}

.admin-user-row-wrap {
  position: relative;
  min-width: 0;
}

.admin-user-row-wrap .admin-user-row {
  padding-right: 58px;
}

.admin-share-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--raised);
  color: var(--muted);
  font-size: 1rem;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.admin-share-button:hover,
.admin-share-button:focus-visible {
  border-color: var(--accent);
  background: rgba(136, 152, 255, .16);
  color: var(--accent-2);
  transform: translateY(-1px);
}

.admin-page .admin-footer {
  margin-top: auto;
}

.admin-dialog {
  width: min(920px, calc(100% - 24px));
  max-width: 920px;
  max-height: min(760px, calc(100dvh - 24px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}

.admin-dialog::backdrop {
  background: rgba(5, 7, 14, .78);
  backdrop-filter: blur(6px);
}

.admin-modal {
  display: grid;
  gap: 18px;
  padding: 22px;
  overflow: auto;
}

.admin-header,
.admin-search,
.admin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-header {
  align-items: flex-start;
}

.admin-header .close-btn {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: -4px -4px 0 auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--raised);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.admin-header .close-btn:hover {
  border-color: var(--accent);
  background: rgba(136, 152, 255, .16);
  transform: translateY(-1px);
}

.admin-header h2 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.admin-lead {
  max-width: 620px;
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.admin-search .search {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--raised);
}

.admin-search .search input {
  min-width: 0;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 14px;
  min-height: 300px;
}

.admin-user-results,
.admin-editor {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(29, 36, 51, .42);
}

.admin-user-results {
  display: grid;
  align-content: start;
  gap: 7px;
}

.admin-user-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.admin-user-row:hover,
.admin-user-row:focus-visible,
.admin-user-row.is-selected {
  border-color: var(--line-strong);
  background: rgba(136, 152, 255, .1);
}

.admin-user-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(136, 152, 255, .14);
  color: var(--accent-2);
  font-size: 1rem;
}

.admin-user-copy,
.admin-user-state {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-user-copy strong,
.admin-user-copy small,
.admin-user-state b,
.admin-user-state small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-copy small,
.admin-user-state small,
.admin-editor small {
  color: var(--muted);
  font-size: .72rem;
}

.admin-user-state {
  justify-items: end;
  text-align: right;
}

.admin-user-state b {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 750;
}

.admin-user-state b.is-enabled {
  color: var(--accent-2);
}

.admin-empty {
  display: grid;
  min-height: 170px;
  place-items: center;
  margin: 0;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.admin-editor {
  display: grid;
  align-content: start;
  gap: 16px;
}

.admin-selected-user {
  display: grid;
  gap: 5px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.admin-selected-user small {
  color: var(--muted);
}

.admin-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(136, 152, 255, .06);
  cursor: pointer;
}

.admin-toggle input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.admin-toggle span,
.admin-field {
  display: grid;
  gap: 5px;
}

.admin-field > span {
  color: var(--text);
  font-weight: 750;
}

.admin-quota-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raised);
}

.admin-quota-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.admin-quota-input span {
  color: var(--muted);
  font-weight: 750;
}

.admin-editor .primary {
  width: 100%;
}

.admin-footer {
  justify-content: flex-end;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

@media (max-width: 680px) {
  .admin-modal {
    padding: 16px;
  }

  .admin-header,
  .admin-search {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-search .secondary {
    width: 100%;
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-user-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-user-state {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 680px) {
  .admin-page-shell {
    min-height: calc(100dvh - 118px);
    padding: 16px;
  }

  .admin-page .admin-header {
    align-items: flex-start;
    flex-direction: row;
  }

  .admin-page .admin-header .close-btn {
    flex: 0 0 40px;
    margin-top: -4px;
  }

  .admin-subnav-item {
    flex: 1;
  }

  .admin-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-panel-heading .secondary {
    width: 100%;
    justify-content: center;
  }
}