/* White liquid glass: screen controls only; document colors remain editable. */
:root {
  color-scheme: light;
  --ink: #252a32;
  --ink-soft: #424a56;
  --muted: #626c79;
  --line: #dce0e6;
  --paper: #fff;
  --paper-alt: #fafbfc;
  --glass-bg: rgba(255,255,255,.74);
  --glass-bg-strong: rgba(255,255,255,.93);
  --glass-bg-subtle: rgba(255,255,255,.50);
  --glass-border: rgba(255,255,255,.94);
  --glass-border-strong: #fff;
  --glass-shadow: rgba(31,42,58,.06);
  --glass-shadow-strong: rgba(31,42,58,.10);
  --glass-shadow-hover: rgba(31,42,58,.13);
  --glass-highlight: #fff;
  --glass-highlight-subtle: rgba(255,255,255,.7);
}
@media screen {
  body { background: #f3f5f7; }
  .bg-atmosphere { background: radial-gradient(ellipse at 12% 10%, #fff 0%, transparent 55%), radial-gradient(ellipse at 90% 90%, #e8ecf1 0%, transparent 60%), #f5f6f8; }
  .bg-orb { opacity: .45; filter: blur(65px); }
  .bg-orb-1, .bg-orb-3 { background: #fff; }
  .bg-orb-2 { background: #dfe5ed; opacity: .35; }
  .topbar, .commandbar, .sidebar, .statusbar, .formatbar {
    background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.56));
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    border-color: #fff;
    box-shadow: 0 5px 24px #202b3b08, inset 0 1px 0 #fff;
  }
  .brand { background: #ffffff70; border: 1px solid #fff; }
  .brand-mark { background: linear-gradient(140deg,#fff,#e9edf2); color: #364253; border: 1px solid #fff; box-shadow: 0 3px 10px #25334712, inset 0 1px 1px white; }
  .btn, .btn-glass, .document-shortcut { color: #354052; }
  .btn-glass, .top-actions > .btn, .top-actions > a, .commandbar .btn {
    background: linear-gradient(145deg,#ffffffed,#ffffff7a);
    border: 1px solid #fff;
    box-shadow: 0 2px 7px #2533470c, inset 0 1px 0 #fff;
  }
  .btn-glass.primary, .btn.primary, .btn-glass.gold, .mode .btn-glass.active, .mode .btn.active {
    background: linear-gradient(150deg,#fff,#edf0f4);
    color: #253246; border: 1px solid #c8d0db;
    box-shadow: 0 4px 12px #23304712, inset 0 2px 0 #fff;
  }
  .btn-glass.primary:hover, .btn.primary:hover, .mode .btn-glass.active:hover { background: #fff; color: #1e293b; box-shadow: 0 6px 18px #2330471a, inset 0 1px 0 #fff; }
  .btn-glass.danger { color: #a52e38; background: #fff; border-color: #e9d1d4; }
  .btn:hover, .btn-glass:hover { border-color: #d9dfe7; }
  .btn:focus-visible, .input-glass:focus-visible, .cloud-upload:focus-visible { outline: 2px solid #566b86; outline-offset: 3px; }
  .thumb.active { border-color: #9baabc; box-shadow: 0 0 0 1px #aeb9c8, 0 6px 24px #26364a0e; }
  .thumb-preview { background: #fff; }
  .input-glass { border-color: #dce2e9; background-color: #ffffffb8; }
  .input-glass:focus { border-color: #98a7bb; box-shadow: 0 0 0 3px #7488a315; }
  .eyebrow { color: #626c79; }
  .statusbar > span:last-child > span[style] { color: #a5afbc !important; }
  .save-status.saved { color: #3b6558; }
  .page-caption { background: #ffffffb8; border: 1px solid #fff; }
  dialog::backdrop { background: #48556926; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
  dialog form { background: linear-gradient(145deg,#fffffff5,#ffffffdf); }
  .cloud-open { gap: 7px; font-weight: 700; }
  .cloud-open > span { font-size: 21px; line-height: 1; }
  .cloud-open[data-cloud-state="saved"]::after { content:''; width:6px; height:6px; border-radius:50%; background:#497660; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.cloud-dialog { width: min(880px,calc(100vw - 32px)); max-width: 880px; max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #fff; border-radius: 26px; color: var(--ink); box-shadow: 0 30px 100px #26344728; overflow-y:auto; background:#ffffffed; backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); }
.cloud-panel { padding: 28px; }
.cloud-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.cloud-eyebrow { color:var(--muted); font-size:10px; letter-spacing:.15em; font-weight:600; }
.cloud-heading h2 { font-size:28px; letter-spacing:-.04em; margin:6px 0 0; }
.cloud-description { color:var(--muted); line-height:1.6; margin:18px 0; max-width:610px; }
.cloud-summary { display:flex; align-items:center; gap:15px; background:linear-gradient(140deg,#fff,#f0f3f880); padding:20px; border:1px solid #fff; border-radius:18px; box-shadow:0 3px 18px #25334708,inset 0 1px 0 #fff; }
.cloud-folder-icon { display:grid; place-items:center; flex-shrink:0; width:52px; height:52px; font-size:42px; border-radius:15px; background:linear-gradient(140deg,#fff,#e9edf4); color:#75859a; border:1px solid #fff; box-shadow:0 4px 14px #2b3a4e0a; }
.cloud-summary strong { font-size:15px; }
.cloud-summary p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.cloud-private { margin-left:auto; color:#526458; font-size:11px; background:#ffffffb0; border:1px solid #e5eae6; border-radius:100px; padding:7px 10px; }
.cloud-tools { display:flex; gap:9px; align-items:center; margin:22px 0 10px; flex-wrap:wrap; }
.cloud-search { flex:1; min-width:160px; }
.cloud-search input { width:100%; }
.cloud-status { font-size:12px; color:var(--muted); min-height:20px; overflow-wrap:anywhere; }
.cloud-list { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.cloud-file { display:flex; align-items:center; gap:13px; padding:14px; background:#ffffffb0; border:1px solid #e7ebf0; border-radius:15px; }
.cloud-file-icon { display:grid; place-items:center; width:38px; height:44px; border:1px solid #e2e7ee; border-radius:10px; background:linear-gradient(140deg,#fff,#f2f5f8); color:#6e819b; font-size:23px; flex-shrink:0; }
.cloud-file-info { flex:1; min-width:0; }
.cloud-file-info strong { font-size:13px; display:block; overflow-wrap:anywhere; }
.cloud-file-info small { display:block; color:var(--muted); font-size:11px; margin-top:6px; line-height:1.5; }
.cloud-file-actions { display:flex; gap:6px; flex-shrink:0; }
.cloud-file-actions a { text-decoration:none; }
.cloud-footer { display:flex; align-items:center; gap:20px; margin-top:22px; padding-top:17px; border-top:1px solid #e2e6ec; }
.cloud-footer p { flex:1; color:var(--muted); font-size:11px; line-height:1.7; }
.cloud-empty { padding:36px 16px; text-align:center; color:var(--muted); line-height:1.7; }
.cloud-empty h3 { color:var(--ink); font-size:18px; margin:15px 0 8px; }
.cloud-empty p { max-width:560px; margin:10px auto; }
.cloud-empty .cloud-folder-icon, .cloud-login .cloud-folder-icon { margin:0 auto 20px; }
.cloud-login { margin:24px auto 0; max-width:460px; padding:24px !important; text-align:center; box-shadow:none !important; border:0 !important; }
.cloud-login h3 { font-size:20px; margin:0 0 12px; }
.cloud-login p { color:var(--muted); line-height:1.7; }
.cloud-login label { display:block; text-align:left; font-size:12px; margin:24px 0 12px; }
.cloud-login input { display:block; width:100%; margin-top:8px; }
.cloud-login button { width:100%; margin-top:10px; }
#cloudLoginError { color:#a52e38; }
.cloud-conflicts { margin-top:12px; padding:16px; border:1px solid #d9bd91; background:#fffaf2; border-radius:12px; line-height:1.6; }
.cloud-conflicts > div { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; }
@media (max-width:720px) {
  .cloud-panel { padding:18px; }
  .cloud-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:20px; }
  .cloud-heading h2 { font-size:24px; }
  .cloud-private { display:none; }
  .cloud-search { flex-basis:100%; }
  .cloud-file { flex-wrap:wrap; gap:10px; }
  .cloud-file-info { flex-basis:calc(100% - 52px); }
  .cloud-file-actions { margin-left:48px; }
  .cloud-footer { flex-direction:column; align-items:stretch; gap:12px; }
  .cloud-conflicts > div { align-items:flex-start; flex-direction:column; }
  .cloud-login { padding:12px 0 !important; }
  .statusbar #storageHint { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; }
}
@media print { #cloudDialog { display:none !important; } }