@layer base, themes, layout, components, responsive;
@layer base {
  :root { color-scheme:light; --bg:#f8f9fb; --surface:#fff; --ink:#20242b; --muted:#666f7b; --line:#e1e5eb; --accent:#315fd8; --on-accent:#fff; --soft:#edf0f5; --danger:#b82c3a; --radius:8px; --card-radius:8px; --border:1px; --control-shadow:none; --panel-shadow:0 10px 32px #151b2a14; --panel-bg:var(--surface); --blur:none; }
  :root[data-theme=dark] { color-scheme:dark; --bg:#111316; --surface:#1b1e23; --ink:#edf0f5; --muted:#a0a9b6; --line:#343941; --accent:#a6beff; --on-accent:#102550; --soft:#272c33; --danger:#ff9a9d; --panel-shadow:0 12px 38px #0006; }
  * { box-sizing:border-box; }
  [hidden] { display:none !important; }
  :root:has(#lightbox[open]) { overflow:hidden; overscroll-behavior:none; }
  body { margin:0; background:var(--bg); color:var(--ink); font:13px/1.5 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
  button,input,summary,a { -webkit-tap-highlight-color:transparent; }
  button,input { font:inherit; }
  button,a,summary { touch-action:manipulation; }
  button,summary { cursor:pointer; }
  button:disabled { cursor:default; opacity:.45; }
  a { color:inherit; text-decoration:none; }
  button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid var(--accent-ink,var(--accent)); outline-offset:3px; }
  h1,h2,p { margin:0; }
  h1 { font-size:22px; font-weight:650; line-height:1.3; letter-spacing:-.6px; overflow-wrap:anywhere; }
  h2 { font-size:17px; font-weight:600; }
  .muted { color:var(--muted); }
  .icon { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
}
@layer themes {
  :root[data-design=glass] { --bg:#eaf0f8; --surface:#ffffffe0; --soft:#e0e9f3ad; --line:#ffffffb8; --panel-bg:#f9fcffeb; --radius:13px; --card-radius:12px; --blur:blur(16px) saturate(130%); --control-shadow:0 2px 8px #4560800a; --panel-shadow:0 12px 38px #3b567322; }
  :root[data-design=glass][data-theme=dark] { --bg:#131c2a; --surface:#202e40df; --soft:#30435db8; --line:#657b9859; --panel-bg:#233044f0; --panel-shadow:0 12px 38px #0005; }
  :root[data-design=glass] body { background:radial-gradient(ellipse at 5% 0%,#8dacf82b,transparent 45%),radial-gradient(ellipse at 100% 15%,#7fe0ce25,transparent 50%),var(--bg); background-attachment:fixed; }
  :root[data-design=brutalism] { --bg:#f4f2e9; --surface:#fffef8; --ink:#171717; --muted:#545454; --line:#202020; --accent:#ffdf55; --on-accent:#111; --soft:#ebe8df; --radius:0px; --card-radius:0px; --border:2px; --control-shadow:2px 2px 0 var(--line); --panel-shadow:5px 5px 0 var(--line); }
  :root[data-design=brutalism][data-theme=dark] { --bg:#151515; --surface:#242424; --ink:#f7f7ee; --muted:#bcbcb4; --line:#bcbcb4; --soft:#353535; }
  :root[data-design=brutalism] .brand,:root[data-design=brutalism] h1 { font-weight:800; }
  :root[data-design=brutalism] { --accent-ink:var(--ink); }
  :root[data-design=brutalism] .card-visual { border:2px solid var(--line); }
  :root[data-design=neumorphism] { --bg:#e9edf2; --surface:#e9edf2; --panel-bg:#e9edf2; --soft:#dfe5ee; --line:#c7cfdc; --radius:14px; --card-radius:13px; --control-shadow:4px 4px 9px #c8ced8,-4px -4px 9px #fff; --panel-shadow:9px 9px 24px #c2c9d4,-9px -9px 24px #ffffffd9; }
  :root[data-design=neumorphism][data-theme=dark] { --bg:#242831; --surface:#242831; --panel-bg:#242831; --soft:#1c2028; --line:#444c5d; --control-shadow:4px 4px 9px #151920,-4px -4px 9px #343b48; --panel-shadow:9px 9px 24px #161920,-9px -9px 24px #343b48; }
  :root[data-design=neumorphism] .search { box-shadow:inset 2px 2px 5px #78879a26,inset -2px -2px 5px #ffffff16; }
  :root[data-design=ios] { --bg:#f2f2f7; --surface:#fff; --soft:#e9e9ef; --line:#d8d8e0; --accent:#0869d6; --radius:18px; --card-radius:14px; --panel-shadow:0 12px 38px #1728401a; }
  :root[data-design=ios][data-theme=dark] { --bg:#000; --surface:#1c1c1e; --soft:#2c2c2e; --line:#3a3a3c; --accent:#75b8ff; --on-accent:#072c53; }
  :root[data-design=ios] body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; }
  :root[data-design=ios] .filters,:root[data-design=ios] .layout-options { border-radius:10px; }
}
@layer layout {
  .topbar { position:relative; z-index:20; min-height:58px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 28px; border-bottom:var(--border) solid var(--line); background:var(--surface); backdrop-filter:var(--blur); }
  .brand { display:flex; gap:9px; align-items:center; font-size:15px; font-weight:650; letter-spacing:-.3px; white-space:nowrap; }
  .brand img { width:26px; height:26px; }
  .top-actions { display:flex; gap:8px; align-items:center; }
  .page { max-width:2000px; margin:auto; padding:18px 28px 24px; }
  .collection-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px; }
  .collection-heading>div { min-width:0; }
  #breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:11px; color:var(--muted); margin-bottom:4px; min-height:17px; }
  #breadcrumbs a { overflow-wrap:anywhere; }
  #breadcrumbs a:hover { color:var(--accent-ink,var(--accent)); text-decoration:underline; }
  #breadcrumbs [aria-current] { color:var(--ink); }
  #pageTitle { scroll-margin-top:18px; }
  .item-count { font-size:11px; color:var(--muted); white-space:nowrap; padding-bottom:3px; font-variant-numeric:tabular-nums; }
  .toolbar { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
  .toolbar-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
  .gallery { --gallery-columns:5; display:grid; grid-template-columns:repeat(var(--gallery-columns),minmax(0,1fr)); gap:16px 12px; position:relative; }
  .gallery.masonry { display:block; }
  .gallery.masonry .card { position:absolute; margin:0; }
  .load-more { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin:24px 0 14px; font-size:12px; }
  .page-footer { display:flex; justify-content:center; padding:8px 0 56px; color:var(--muted); }
  .sync-status { font-size:10px; text-align:center; }
}
@layer components {
  .button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:7px 12px; border:var(--border) solid transparent; border-radius:var(--radius); font-size:12px; font-weight:550; white-space:nowrap; transition:background .15s,color .15s; }
  .button.primary { background:var(--accent); color:var(--on-accent); }
  .button.outline { border-color:var(--line); background:var(--surface); color:var(--ink); box-shadow:var(--control-shadow); }
  .button.quiet { background:transparent; color:var(--muted); }
  .button.quiet:hover { background:var(--soft); color:var(--ink); }
  .button.outline:hover:not(:disabled) { border-color:var(--accent); }
  .button.light { background:#ffffff16; color:#fff; border:1px solid #ffffff22; border-radius:9px; }
  .wide { width:100%; }
  .filters,.layout-options { display:flex; gap:2px; padding:3px; background:var(--soft); border:var(--border) solid var(--line); border-radius:var(--radius); }
  .filter,.layout-options button { display:inline-flex; gap:6px; align-items:center; justify-content:center; min-height:28px; padding:4px 12px; border:0; border-radius:max(0px,calc(var(--radius) - 3px)); background:transparent; color:var(--muted); font-size:11px; font-weight:550; white-space:nowrap; }
  .filters [aria-pressed=true],.layout-options [aria-pressed=true] { color:var(--ink); background:var(--surface); box-shadow:0 1px 3px #00000012; }
  .layout-options .icon { width:13px; height:13px; }
  .search { display:flex; align-items:center; gap:8px; border:var(--border) solid var(--line); border-radius:var(--radius); height:36px; background:var(--surface); padding:0 10px; flex:1; max-width:360px; min-width:150px; color:var(--muted); }
  .search input { background:transparent; border:0; color:var(--ink); width:100%; font-size:12px; min-width:0; }
  .search input:focus-visible { outline-offset:1px; }
  .appearance { position:relative; }
  .appearance>summary { list-style:none; }
  .appearance>summary::-webkit-details-marker { display:none; }
  .appearance[open]>summary { border-color:var(--accent); }
  .appearance-panel { position:absolute; z-index:25; top:calc(100% + 10px); right:0; width:290px; padding:10px; background:var(--panel-bg); border:var(--border) solid var(--line); border-radius:var(--radius); box-shadow:var(--panel-shadow); backdrop-filter:var(--blur); }
  .panel-label { font-size:11px; font-weight:650; color:var(--muted); padding:5px 7px 8px; }
  .design-options { display:grid; gap:3px; }
  .design-options button { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:8px; border:1px solid transparent; background:transparent; color:var(--ink); border-radius:var(--radius); font-size:12px; }
  .design-options button:hover { background:var(--soft); }
  .design-options [aria-pressed=true] { border-color:var(--accent); background:var(--soft); }
  .design-options small { display:block; color:var(--muted); font-size:10px; margin-top:2px; }
  .design-check { margin-left:auto; color:var(--accent-ink,var(--accent)); visibility:hidden; }
  .design-options [aria-pressed=true] .design-check { visibility:visible; }
  .design-swatch { width:32px; height:32px; flex:none; border:1px solid #aeb8c7; border-radius:5px; }
  .design-swatch.minimal { background:linear-gradient(90deg,#fff 48%,#edf0f5 48%); }
  .design-swatch.glass { background:linear-gradient(130deg,#c9d8ff,#e3faf1); border-color:#adc0da; }
  .design-swatch.brutalism { background:#ffdf55; border:2px solid #171717; border-radius:0; box-shadow:2px 2px #171717; }
  .design-swatch.neumorphism { background:#e9edf2; border-color:#dce1e9; box-shadow:inset 3px 3px 5px #bfc6d1,inset -3px -3px 5px #fff; border-radius:8px; }
  .design-swatch.ios { background:#e9f1ff; border:7px solid #fff; outline:1px solid #cad5e5; border-radius:10px; }
  .card { padding:0; border:0; text-align:left; color:var(--ink); background:transparent; width:100%; min-width:0; align-self:start; }
  .card-visual { position:relative; width:100%; aspect-ratio:1; border-radius:var(--card-radius); overflow:hidden; background:var(--soft); }
  .gallery.masonry .card-visual { aspect-ratio:var(--media-ratio,1); }
  .card-visual img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; opacity:0; transition:opacity .15s; }
  .card-visual.loaded img { opacity:1; }
  .card-visual.loaded .card-fallback { visibility:hidden; }
  .card:hover .card-info { color:var(--accent-ink,var(--accent)); }
  .card-fallback { position:absolute; inset:0; display:grid; place-items:center; font-size:32px; color:var(--muted); opacity:.45; }
  .card-info { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:29px; padding:6px 1px 4px; }
  .card-info>span { font-size:11px; font-weight:450; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .card-info small { font-size:9px; color:var(--muted); flex-shrink:0; }
  .album-card .card-info>span { font-weight:600; }
  .video-badge { position:absolute; right:8px; bottom:8px; color:#fff; font-size:9px; font-weight:600; background:#131820ce; border-radius:4px; padding:3px 6px; }
  .selection-check { display:none; position:absolute; left:9px; top:9px; width:23px; height:23px; border:2px solid #fff; border-radius:6px; background:#0003; color:transparent; align-items:center; justify-content:center; }
  .selecting .selection-check { display:flex; }
  .selected .selection-check { background:var(--accent); color:var(--on-accent); }
  .selected .card-visual { outline:3px solid var(--accent); outline-offset:2px; }
  .selection-bar { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); width:min(480px,calc(100% - 24px)); background:var(--panel-bg); box-shadow:var(--panel-shadow); border:var(--border) solid var(--line); border-radius:var(--radius); padding:10px 14px; display:flex; justify-content:space-between; align-items:center; z-index:15; font-size:12px; backdrop-filter:var(--blur); }
  .selection-bar>div { display:flex; gap:5px; }
  .download-progress { position:fixed; right:20px; bottom:92px; width:min(400px,calc(100% - 24px)); background:var(--panel-bg); border:var(--border) solid var(--line); box-shadow:var(--panel-shadow); border-radius:var(--radius); padding:14px; z-index:16; }
  .download-progress>div { display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .download-progress strong { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .download-progress progress { width:100%; height:6px; accent-color:var(--accent); }
  .download-progress small { display:block; color:var(--muted); font-size:10px; margin-top:7px; }
  .empty-state { text-align:center; padding:48px 20px; border:var(--border) dashed var(--line); border-radius:var(--radius); }
  .empty-state .muted { max-width:430px; margin:10px auto 20px; font-size:12px; }
  .empty-symbol { display:block; font-size:32px; color:var(--muted); margin-bottom:8px; }
  .collection-update { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px; margin-bottom:16px; border:var(--border) solid var(--line); border-radius:var(--radius); background:var(--soft); font-size:12px; }
  .collection-update p { flex:1; min-width:min(220px,100%); }
  .toasts { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:7px; z-index:30; width:min(370px,calc(100% - 40px)); pointer-events:none; }
  .toast { padding:12px 16px; background:var(--ink); color:var(--surface); border-radius:var(--radius); box-shadow:var(--panel-shadow); font-size:12px; }
  .lightbox { position:fixed; inset:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; overflow:hidden; border:0; padding:20px 28px; background:#101813f5; color:#fff; }
  .lightbox[open] { display:flex; flex-direction:column; }
  .lightbox-header,.lightbox-controls,.image-quality { flex-shrink:0; }
  .lightbox::backdrop { background:#101813; }
  .lightbox-header { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:50px; }
  #mediaName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
  .media-stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; margin:15px 0; overscroll-behavior:contain; }
  .media-stage video { max-width:100%; max-height:100%; object-fit:contain; }
  .media-stage img { flex:none; max-width:none; max-height:none; object-fit:contain; transform-origin:center; user-select:none; -webkit-user-select:none; }
  .media-stage.image-interactive { touch-action:none; }
  .media-stage.zoomed { cursor:grab; }
  .media-stage.dragging { cursor:grabbing; }
  .media-error { position:absolute; max-width:380px; text-align:center; padding:20px; background:#182820e6; border-radius:12px; font-size:14px; }
  .media-error .button { margin-top:15px; }
  .media-loading { position:absolute; padding:12px 18px; background:#182820e6; border-radius:12px; font-size:13px; }
  .lightbox-controls { display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; padding:5px 0 10px; }
  .image-quality { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:4px 0 12px; font-size:12px; color:#cfdbd2; }
  .image-quality .button { font-size:12px; padding:8px 12px; }
  .gesture-hint { flex-basis:100%; text-align:center; font-size:11px; color:#a6b9ad; }
  .image-zoom-controls { display:flex; gap:6px; align-items:center; }
  #zoomLevel { min-width:42px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
  #mediaCounter { font-size:12px; color:#b8c7bd; }
  .login-page { min-height:100dvh; display:grid; place-items:center; padding:24px; }
  .login-shell { width:100%; max-width:360px; padding:28px; background:var(--surface); border:var(--border) solid var(--line); border-radius:var(--radius); box-shadow:var(--control-shadow); backdrop-filter:var(--blur); }
  .login-shell .brand { margin-bottom:26px; }
  .login-shell h1 { font-size:22px; letter-spacing:-.5px; }
  .login-shell>.muted { font-size:12px; margin:8px 0 24px; }
  #loginForm label { font-size:11px; font-weight:600; }
  .password-field { display:flex; border:var(--border) solid var(--line); border-radius:var(--radius); background:var(--surface); margin-top:7px; }
  .password-field input { min-width:0; width:100%; padding:10px 12px; border:0; background:transparent; border-radius:var(--radius); color:var(--ink); }
  .password-field button { border:0; background:transparent; color:var(--muted); padding:0 10px; font-size:10px; }
  .form-error { min-height:22px; margin:7px 0; color:var(--danger); font-size:11px; }
  #loginButton { min-height:40px; }
}
@layer responsive {
  @media (min-width:1600px) { .gallery { --gallery-columns:6; } }
  @media (max-width:1200px) { .gallery { --gallery-columns:4; } .toolbar { gap:8px; } .toolbar-actions { gap:6px; } }
  @media (max-width:960px) { .gallery { --gallery-columns:3; } .toolbar-actions { width:100%; justify-content:flex-end; } .search { max-width:none; } }
  @media (max-width:620px) {
    .topbar { min-height:56px; padding:9px 12px; gap:8px; }
    .brand { font-size:14px; gap:7px; } .brand img { width:24px; height:24px; }
    .top-actions { gap:3px; } .top-actions .button { padding:7px 9px; font-size:11px; } .theme-label { display:none; }
    .appearance-panel { right:-48px; width:min(290px,calc(100vw - 24px)); }
    .page { padding:14px 12px 20px; } h1 { font-size:19px; letter-spacing:-.4px; }
    .collection-heading { margin-bottom:13px; gap:10px; }
    #breadcrumbs { font-size:10px; gap:5px; } .item-count { font-size:10px; }
    .toolbar { gap:9px; margin-bottom:14px; } .toolbar-actions { gap:7px; }
    .filter { padding:4px 10px; } .search { min-width:130px; }
    .toolbar-actions .button { font-size:11px; padding:7px 10px; }
    .layout-options button { padding:4px 8px; font-size:10px; }
    .gallery { --gallery-columns:2; gap:12px 9px; } .card-info>span { font-size:10px; } .card-info { min-height:27px; gap:5px; }
    .card-info small { font-size:8px; }
    .lightbox { padding:14px; } .lightbox-controls { gap:6px; } .lightbox-controls .button { padding:8px 11px; font-size:11px; } .download-progress { right:12px; }
    .load-more { gap:8px; font-size:11px; } .selection-bar { padding:9px 10px; }
  }
  @media (max-width:360px) { .topbar .brand span { font-size:12px; } .toolbar-actions { gap:4px; } .layout-options .icon { display:none; } .search { min-width:115px; } }
  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
}