/* ALBERTOENGO Liquid Glass — original web implementation.
   Transparent layers, moving light and depth, while retaining readable contrast. */
:root { --glass:rgba(255,255,255,.56); --glass-strong:rgba(255,255,255,.74); --glass-edge:rgba(255,255,255,.78); --glass-shadow:0 18px 48px rgba(69,61,85,.12),inset 0 1px 0 rgba(255,255,255,.92); --glass-x:50%; --glass-y:12%; }
html[data-theme="dark"] { --glass:rgba(28,30,43,.22); --glass-strong:rgba(35,37,52,.34); --glass-edge:rgba(239,244,255,.28); --glass-shadow:0 20px 56px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.17); }
body.is-authenticated { background:
  radial-gradient(ellipse 54% 45% at var(--glass-x) var(--glass-y),rgba(151,183,255,.27),transparent 72%),
  radial-gradient(ellipse 42% 48% at 92% 74%,rgba(255,166,209,.20),transparent 70%),
  radial-gradient(ellipse 45% 50% at 16% 86%,rgba(254,218,146,.23),transparent 74%),var(--bg); background-attachment:fixed; }
body.is-authenticated::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.46; background-image:linear-gradient(rgba(255,255,255,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.38) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 80%); }
.sidebar,.topbar { border-color:var(--glass-edge); background:color-mix(in srgb,var(--glass-strong) 62%,transparent); box-shadow:var(--glass-shadow); backdrop-filter:blur(30px) saturate(150%); -webkit-backdrop-filter:blur(30px) saturate(150%); }
.sidebar { border-right:1px solid var(--glass-edge); }.topbar { border-bottom:1px solid var(--glass-edge); }
.global-search,.icon-button,.mobile-menu,.language-switcher,.user-chip { border:1px solid color-mix(in srgb,var(--glass-edge) 82%,transparent); background:color-mix(in srgb,var(--glass) 78%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.66),0 8px 22px rgba(72,65,91,.06); backdrop-filter:blur(20px) saturate(145%); }
.global-search { position:relative; overflow:hidden; transition:transform .38s cubic-bezier(.18,.9,.25,1),box-shadow .38s,background .38s,border-radius .38s; }
.global-search::after { content:""; position:absolute; inset:-70% 58% -70% -45%; transform:rotate(22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); opacity:0; transition:opacity .35s,transform .7s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.global-search:hover,.global-search:focus-visible,.global-search.is-opening { transform:translateY(-2px) scale(1.018); border-radius:18px; background:var(--glass-strong); box-shadow:0 15px 35px rgba(72,65,91,.15),inset 0 1px 0 #fff; }
.global-search:hover::after,.global-search:focus-visible::after,.global-search.is-opening::after { opacity:.78; transform:translateX(240%) rotate(22deg); }
.nav-item { margin:2px 0; border:1px solid transparent; transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s,border-color .28s,box-shadow .28s; }.nav-item:hover { transform:translateX(3px); border-color:color-mix(in srgb,var(--glass-edge) 68%,transparent); background:var(--glass); }.nav-item.active { border-color:color-mix(in srgb,#fff 72%,transparent); background:linear-gradient(110deg,rgba(255,255,255,.63),rgba(246,223,237,.48)); box-shadow:inset 0 1px 0 #fff,0 6px 18px rgba(84,73,104,.1); }
html[data-theme="dark"] .nav-item.active { background:linear-gradient(110deg,rgba(100,132,205,.35),rgba(179,115,164,.24)); }
.metric-card,.section-card,.file-card,.empty-state,.welcome-card,.account-panel,.share-management-card { position:relative; border-color:var(--glass-edge); background:linear-gradient(135deg,color-mix(in srgb,var(--glass-strong) 67%,transparent),color-mix(in srgb,var(--glass) 38%,transparent)); box-shadow:var(--glass-shadow); backdrop-filter:blur(24px) saturate(138%); -webkit-backdrop-filter:blur(24px) saturate(138%); overflow:hidden; }
.metric-card::before,.section-card::before,.file-card::before,.account-panel::before,.share-management-card::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(128deg,rgba(255,255,255,.72),transparent 28%,transparent 70%,rgba(255,255,255,.22)); opacity:.72; }
.metric-card,.section-card,.file-card,.account-panel,.share-management-card { transition:transform .42s cubic-bezier(.18,.82,.25,1),box-shadow .42s,border-color .42s; }
.metric-card:hover,.section-card:hover,.file-card:hover,.account-panel:hover,.share-management-card:hover { transform:translateY(-5px) scale(1.006); border-color:rgba(255,255,255,.92); box-shadow:0 27px 58px rgba(67,58,88,.16),inset 0 1px 0 #fff; }
.welcome-card { background:linear-gradient(125deg,rgba(255,255,255,.72),rgba(252,242,248,.43) 55%,rgba(218,233,255,.48)); }.welcome-card::before { content:""; position:absolute; inset:-20%; background:radial-gradient(circle at 30% 35%,rgba(255,255,255,.9),transparent 17%),radial-gradient(circle at 72% 68%,rgba(145,192,255,.33),transparent 28%); animation:liquid-drift 18s ease-in-out infinite alternate; }
.primary,.secondary,.toolbar button,.account-link { position:relative; overflow:hidden; border:1px solid color-mix(in srgb,var(--glass-edge) 80%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 7px 16px rgba(53,80,145,.12); transition:transform .25s cubic-bezier(.2,.9,.25,1),filter .25s,box-shadow .25s; }.primary::after,.secondary::after,.toolbar button::after,.account-link::after { content:""; position:absolute; inset:0; transform:translateX(-120%); background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.58),transparent 64%); transition:transform .62s cubic-bezier(.2,.75,.2,1); }.primary:hover,.secondary:hover,.toolbar button:hover,.account-link:hover { transform:translateY(-2px) scale(1.018); filter:saturate(1.08); }.primary:hover::after,.secondary:hover::after,.toolbar button:hover::after,.account-link:hover::after { transform:translateX(120%); }
.command-dialog { border:1px solid var(--glass-edge); background:color-mix(in srgb,var(--glass-strong) 90%,transparent); box-shadow:0 30px 80px rgba(35,31,51,.28),inset 0 1px 0 #fff; backdrop-filter:blur(32px) saturate(155%); -webkit-backdrop-filter:blur(32px) saturate(155%); transform-origin:top center; animation:glass-command-in .42s cubic-bezier(.18,.9,.28,1) both; }.command-dialog::backdrop { background:rgba(42,39,54,.14); backdrop-filter:blur(8px); }
@keyframes glass-command-in { from { opacity:0; transform:translateY(-18px) scale(.94); filter:blur(5px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes liquid-drift { from { transform:translate3d(-2%,-1%,0) rotate(-4deg); } to { transform:translate3d(3%,2%,0) rotate(5deg); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
@media (max-width:700px) { body.is-authenticated::before { background-size:38px 38px; }.sidebar,.topbar { backdrop-filter:blur(22px) saturate(130%); }.metric-card:hover,.section-card:hover,.file-card:hover,.account-panel:hover { transform:none; }.global-search:active { transform:scale(.985); } }

/* Sharing has its own dialog surface. Never force white form fields into the
   dark theme: controls inherit the same tinted glass and retain contrast. */
.share-dialog { background:color-mix(in srgb,var(--glass-strong) 64%,transparent); border-color:var(--glass-edge); color:var(--text); box-shadow:0 30px 84px rgba(20,18,28,.34),inset 0 1px 0 rgba(255,255,255,.74); backdrop-filter:blur(34px) saturate(155%); -webkit-backdrop-filter:blur(34px) saturate(155%); }
.share-dialog form { scrollbar-color:color-mix(in srgb,var(--accent) 46%,transparent) transparent; }.share-dialog h2,.share-dialog label,.share-dialog .permission-choice b { color:var(--text); }.share-dialog .muted,.share-dialog .permission-choice small,.share-dialog .security-hint,.share-dialog .share-style-grid small { color:var(--muted); }
.share-dialog select,.share-dialog input { border-color:color-mix(in srgb,var(--glass-edge) 70%,var(--line)); background:color-mix(in srgb,var(--glass-strong) 52%,transparent); color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }.share-dialog select:focus,.share-dialog input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 23%,transparent),inset 0 1px 0 rgba(255,255,255,.6); }
.share-dialog .share-link-options,.share-dialog fieldset,.share-dialog .security-hint { border-color:color-mix(in srgb,var(--glass-edge) 64%,var(--line)); background:color-mix(in srgb,var(--glass) 74%,transparent); }.share-dialog .share-style-grid span { border-color:color-mix(in srgb,var(--glass-edge) 65%,var(--line)); background:color-mix(in srgb,var(--glass-strong) 72%,transparent); color:var(--text); }.share-dialog .share-style-grid input:checked + span { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,var(--glass-strong)); }
.share-dialog .yes-no { border-color:color-mix(in srgb,var(--glass-edge) 60%,var(--line)); background:color-mix(in srgb,var(--glass) 62%,transparent); }.share-dialog .yes-no input:checked + span { background:color-mix(in srgb,var(--accent) 19%,var(--glass-strong)); color:var(--accent); }
html[data-theme="dark"] .share-dialog { box-shadow:0 32px 92px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.14); }.share-dialog .dialog-actions .secondary { background:color-mix(in srgb,var(--glass-strong) 84%,transparent); color:var(--accent); border-color:var(--glass-edge); }