/* ================================================================
   MAXISNAP STUDIO — DASHBOARD STYLES
   Colour tokens (--app-*) are injected inline per theme (light/dark).
   This file owns the shape/spacing tokens and every component.
   ================================================================ */
:root{
  --app-radius-xs:4px;--app-radius-sm:6px;--app-radius:8px;--app-radius-lg:12px;--app-radius-xl:16px;
  --app-sidebar-width:248px;--app-topbar-height:56px;
  --app-media-bg:#0e1217;
  --app-shadow-1:0 1px 2px rgba(8,20,40,.05);
  --app-shadow-2:0 4px 8px -2px rgba(8,20,40,.08),0 2px 4px -1px rgba(8,20,40,.05);
  --app-shadow-3:0 14px 30px -10px rgba(8,20,40,.22),0 4px 10px -3px rgba(8,20,40,.10);
  --app-shadow-focus:0 0 0 3px var(--app-brand-soft);
}
*,*::before,*::after{box-sizing:border-box}
body.app{background:var(--app-bg);color:var(--app-text);font-family:var(--font-body);font-size:14px;line-height:1.5;min-height:100vh;margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.app a:not([class*="btn"]):not([class*="app-nav-link"]):not([class*="gallery-item"]){color:var(--app-brand);text-decoration:none}
body.app a:not([class*="btn"]):not([class*="app-nav-link"]):not([class*="gallery-item"]):hover{color:var(--app-brand-hover)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--app-text-muted)}
.hide{display:none!important}
[hidden]{display:none!important}
.kbd{display:inline-block;padding:1px 5px;font-family:var(--font-mono);font-size:11px;background:var(--app-surface-alt);border:1px solid var(--app-border-strong);border-bottom-width:2px;border-radius:4px;color:var(--app-text-secondary)}

/* -------- buttons -------- */
.btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--app-radius);font-family:inherit;font-size:14px;font-weight:500;line-height:1.2;cursor:pointer;border:1px solid transparent;transition:all 150ms ease-out;letter-spacing:-.005em;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--app-brand);color:var(--app-text-on-brand)!important;border-color:transparent}
.btn-primary:hover{background:var(--app-brand-hover)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}
.btn-secondary{background:var(--app-surface);border-color:var(--app-border-strong);color:var(--app-text)}
.btn-secondary:hover,.btn-secondary.is-active{background:var(--app-surface);border-color:var(--app-brand);color:var(--app-brand)}
.btn-ghost{background:transparent;color:var(--app-text-secondary)}
.btn-ghost:hover{background:var(--app-surface-hover);color:var(--app-text)}
.btn-danger{background:var(--app-danger);color:#fff!important}
.btn-danger:hover{filter:brightness(.92)}
.btn-icon{padding:8px;background:transparent;color:var(--app-text-muted)}
.btn-icon:hover{background:var(--app-surface-hover);color:var(--app-text)}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-block{width:100%}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--app-surface),0 0 0 4px var(--app-brand)}
:where(a:focus-visible,button:focus-visible,[tabindex]:focus-visible){border-radius:var(--app-radius-sm)}
input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--app-shadow-focus);border-radius:var(--app-radius-sm)}
.app-page-title[tabindex="-1"]:focus{outline:none;box-shadow:none}

/* -------- forms -------- */
.input,.textarea,.select{width:100%;padding:10px 12px;border:1px solid var(--app-border-strong);border-radius:var(--app-radius);background:var(--app-surface);color:var(--app-text);font-family:inherit;font-size:14px;line-height:1.4;transition:border-color 150ms,box-shadow 150ms}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--app-brand);box-shadow:var(--app-shadow-focus)}
.input::placeholder,.textarea::placeholder{color:var(--app-text-muted)}
.textarea{min-height:88px;resize:vertical}
.field-label{font-size:12px;font-weight:600;color:var(--app-text-secondary);letter-spacing:.01em;text-transform:uppercase;font-family:var(--font-mono)}
.checkbox{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--app-text-secondary);cursor:pointer}
/* password / key reveal field — a single flat eye that toggles open/closed.
   No hover shading; hover only deepens the icon colour. The two glyphs are the
   same size and exactly one shows, so nothing overflows or clips. */
.pw-field{position:relative}
.pw-field .input{padding-right:42px}
.pw-eye{position:absolute;top:50%;right:7px;transform:translateY(-50%);width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:7px;color:var(--app-text-muted);cursor:pointer;padding:0;transition:color 120ms}
.pw-eye:hover{color:var(--app-text)}
.pw-eye svg{width:18px;height:18px;display:block}
.pw-eye svg[hidden]{display:none}

/* -------- shell -------- */
.app{display:grid;grid-template-columns:var(--app-sidebar-width) 1fr;min-height:100vh}
.app-sidebar{background:var(--app-surface);border-right:1px solid var(--app-border);display:flex;flex-direction:column;padding:16px 12px;height:100vh;position:sticky;top:0;overflow-y:auto}
.app-sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;margin-bottom:8px;border-bottom:1px solid var(--app-border);color:var(--app-text);text-decoration:none}
.app-sidebar-brand img,.app-sidebar-brand svg{display:block;height:26px;width:auto}
.app-sidebar-brand-word{font-family:var(--font-display);font-size:20px;letter-spacing:-.01em;color:var(--app-text)}
.app-nav{display:flex;flex-direction:column;gap:1px;margin-top:8px}
.app-nav-group-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--app-text-muted);padding:12px 8px 6px}
.app-nav-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--app-radius-sm);color:var(--app-text-secondary);text-decoration:none;font-size:14px;transition:all 100ms;border:1px solid transparent;background:transparent;width:100%;text-align:left;cursor:pointer;font-family:inherit}
.app-nav-link:hover{background:transparent;border-color:var(--app-brand);color:var(--app-brand)}
.app-nav-link.is-active{background:transparent;border-color:var(--app-brand);color:var(--app-brand);font-weight:600}
.app-nav-link:focus-visible{box-shadow:inset 0 0 0 2px var(--app-brand)}
.app-nav-link svg{flex-shrink:0;opacity:.85}
.app-nav-link.is-active svg{opacity:1}
.app-nav-link-count{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--app-text-muted)}
.app-sidebar-spacer{flex:1}
.app-main{display:flex;flex-direction:column;min-width:0}
.app-topbar{display:flex;align-items:center;gap:16px;padding:0 24px;height:var(--app-topbar-height);background:var(--app-surface);border-bottom:1px solid var(--app-border);position:sticky;top:0;z-index:10}
.app-topbar-title{font-family:var(--font-display);font-size:18px;font-weight:400;letter-spacing:-.01em;color:var(--app-text)}
.app-topbar-search{flex:1;max-width:520px;position:relative}
.app-topbar-search input{width:100%;text-overflow:ellipsis;padding:8px 12px 8px 38px;border:1px solid var(--app-border);border-radius:var(--app-radius);background:var(--app-surface-alt);font-size:14px;color:var(--app-text)}
.app-topbar-search input:focus{outline:none;border-color:var(--app-brand);background:var(--app-surface);box-shadow:var(--app-shadow-focus)}
.app-topbar-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--app-text-muted);pointer-events:none}
.app-topbar-kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:11px;color:var(--app-text-muted);background:var(--app-surface);border:1px solid var(--app-border);border-radius:4px;padding:1px 5px;pointer-events:none}
.app-topbar-actions{display:flex;align-items:center;gap:10px}
.app-avatar{width:32px;height:32px;border-radius:50%;background:var(--app-brand);color:var(--app-text-on-brand);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;cursor:pointer;border:none}
.app-content{flex:1;padding:32px;max-width:1400px;width:100%;align-self:flex-start}
.app-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.app-page-title{font-family:var(--font-display);font-size:32px;line-height:1;letter-spacing:-.015em;color:var(--app-text);margin:0 0 6px;font-weight:400}
.app-page-sub{color:var(--app-text-secondary);font-size:14px;margin:0}

/* -------- cards + stats -------- */
.card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:var(--app-radius-lg);padding:20px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:28px}
.stat-card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:var(--app-radius-lg);padding:18px 20px}
.stat-card-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--app-text-muted);margin-bottom:8px}
.stat-card-value{font-family:var(--font-display);font-size:32px;line-height:1;color:var(--app-text);font-variant-numeric:tabular-nums;font-weight:400}
.stat-card-delta{font-family:var(--font-mono);font-size:12px;color:var(--app-text-muted);margin-top:6px}

/* -------- gallery -------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gallery.is-list{grid-template-columns:1fr;gap:2px}
.gallery-item{background:var(--app-surface);border:1px solid var(--app-border);border-radius:var(--app-radius);overflow:hidden;cursor:pointer;transition:all 150ms;position:relative;animation:msRise .32s ease-out both;text-decoration:none;color:inherit;display:block}
body.app a.gallery-item,body.app a.gallery-item:hover{text-decoration:none;color:inherit}
.gallery-item:hover{border-color:var(--app-border-strong);box-shadow:var(--app-shadow-2);transform:translateY(-1px)}
.gallery-item.is-selected{outline:2px solid var(--app-brand);outline-offset:-2px;border-color:transparent}
.gallery-item-mediawrap{position:relative;width:100%;aspect-ratio:16/10;background:var(--app-surface-alt);border-bottom:1px solid var(--app-border);overflow:hidden}
.gallery-item-media{width:100%;height:100%;object-fit:cover;display:block;background:var(--app-surface-alt)}
.gallery-item-media.is-video{background:var(--app-surface-alt)}
.gallery-item-badge{position:absolute;bottom:8px;left:8px;display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;background:rgba(6,10,20,.72);color:#fff;border-radius:999px;font-family:var(--font-mono);font-size:11px;line-height:1;backdrop-filter:blur(6px);pointer-events:none;z-index:2}
.gallery-item-badge svg{width:11px;height:11px;flex-shrink:0}
.gallery-item-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;transition:opacity 160ms}
.gallery-item-play span{width:42px;height:42px;border-radius:50%;background:rgba(6,10,20,.5);backdrop-filter:blur(6px);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:transform 160ms,background 160ms}
.gallery-item:hover .gallery-item-play span{background:rgba(6,10,20,.68);transform:scale(1.06)}
.gallery-item.is-playing .gallery-item-play{opacity:0}
.gallery-item-meta{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.gallery-item-title{font-size:13px;font-weight:500;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.gallery-item-time{font-family:var(--font-mono);font-size:11px;color:var(--app-text-muted);flex-shrink:0;display:inline-flex;align-items:center;gap:4px}
.gallery-item-vis{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:rgba(6,10,20,.6);color:#fff;backdrop-filter:blur(6px);z-index:2}
.gallery-item-vis svg{width:12px;height:12px}
.gallery-item.is-selected .gallery-item-vis{opacity:0}
.gallery-item-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity 150ms}
.gallery-item:hover .gallery-item-actions,.gallery-item:focus-within .gallery-item-actions{opacity:1}
.gallery-item-action{width:28px;height:28px;background:rgba(6,10,20,.6);color:#fff;border-radius:6px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:background 100ms}
.gallery-item-action:hover{background:rgba(6,10,20,.82)}
.gallery-item-select{position:absolute;bottom:44px;right:8px;width:24px;height:24px;background:rgba(255,255,255,.92);border-radius:50%;border:2px solid rgba(0,0,0,.28);cursor:pointer;opacity:0;transition:opacity 150ms;display:inline-flex;align-items:center;justify-content:center;color:var(--app-brand);z-index:3}
.gallery-item:hover .gallery-item-select,.gallery-item:focus-within .gallery-item-select,.gallery-item.is-selected .gallery-item-select{opacity:1}
.gallery-item.is-selected .gallery-item-select{background:var(--app-brand);border-color:var(--app-brand);color:#fff}
.gallery-item-favorite{position:absolute;bottom:44px;right:8px;color:var(--app-accent);font-size:16px;line-height:1;text-shadow:0 0 8px rgba(0,0,0,.5);opacity:0;transition:opacity 150ms;pointer-events:none}
.gallery-item.is-favorite .gallery-item-favorite{opacity:1}
.gallery-item.is-favorite:hover .gallery-item-favorite,.gallery-item.is-favorite:focus-within .gallery-item-favorite,.gallery-item.is-selected .gallery-item-favorite{opacity:0}
@keyframes msRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* list view */
.gallery.is-list .gallery-item{display:grid;grid-template-columns:56px 1fr auto auto;align-items:center;gap:16px;padding:8px 16px;border-radius:0;border-left:none;border-right:none;border-top:none;animation:none}
.gallery.is-list .gallery-item:first-child{border-top:1px solid var(--app-border)}
.gallery.is-list .gallery-item:hover{transform:none}
.gallery.is-list .gallery-item-mediawrap{aspect-ratio:auto;height:40px;width:56px;border-radius:4px;border:1px solid var(--app-border)}
.gallery.is-list .gallery-item-badge,.gallery.is-list .gallery-item-play{display:none}
.gallery.is-list .gallery-item-meta{padding:0}
.gallery.is-list .gallery-item-actions{position:static;opacity:1}
.gallery.is-list .gallery-item-select{position:static;opacity:1}
.gallery.is-list .gallery-item-favorite{top:12px;bottom:auto;left:52px;right:auto}
.gallery.is-list .gallery-item-vis{top:4px;left:4px}

/* -------- toolbar -------- */
.gallery-toolbar{display:flex;align-items:center;gap:12px;padding:4px 0 16px;flex-wrap:wrap}
.gallery-toolbar-search{flex:1;min-width:220px;position:relative}
.gallery-toolbar-search input{width:100%;padding:8px 12px 8px 36px;border:1px solid var(--app-border-strong);border-radius:var(--app-radius);background:var(--app-surface);font-size:14px;color:var(--app-text)}
.gallery-toolbar-search input:focus{outline:none;border-color:var(--app-brand);box-shadow:var(--app-shadow-focus)}
.gallery-toolbar-search .icon-search{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--app-text-muted);pointer-events:none}
.gallery-view-toggle{display:inline-flex;background:var(--app-surface-alt);border-radius:var(--app-radius);padding:2px;border:1px solid var(--app-border)}
.gallery-view-toggle button{background:transparent;border:none;padding:6px 10px;border-radius:calc(var(--app-radius) - 2px);cursor:pointer;color:var(--app-text-muted);transition:all 100ms;display:inline-flex;align-items:center}
.gallery-view-toggle button.is-active{background:var(--app-surface);color:var(--app-text);box-shadow:var(--app-shadow-1)}

/* -------- bulk bar -------- */
.bulk-bar{position:sticky;top:calc(var(--app-topbar-height) + 8px);z-index:9;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 16px;background:var(--app-text);color:var(--app-bg);border-radius:var(--app-radius);box-shadow:var(--app-shadow-3);margin-bottom:16px}
.bulk-bar-count{font-weight:600;font-size:14px}
.bulk-bar-spacer{flex:1}
.bulk-bar button{background:transparent;border:none;color:var(--app-bg);padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.bulk-bar button:hover{background:rgba(127,127,127,.28)}
.bulk-bar button.is-danger{background:var(--app-danger);color:var(--app-bg)}

/* -------- uploader filter banner -------- */
.uploader-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 15px;margin:0 0 14px;background:var(--app-brand-soft);border:1px solid var(--app-brand);border-radius:var(--app-radius);color:var(--app-brand);font-size:13.5px}
.uploader-banner svg{width:15px;height:15px;vertical-align:-3px;margin-right:3px}
.uploader-banner strong{font-weight:700}
.uploader-banner a{color:var(--app-brand);font-weight:600;text-decoration:none;white-space:nowrap}
.uploader-banner a:hover{text-decoration:underline}
.app-alert{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;margin:0 0 24px;background:var(--app-surface-alt);border:1px solid var(--app-border);border-radius:var(--app-radius-lg);color:var(--app-text);font-size:13.5px;line-height:1.55}
.app-alert>svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--app-text-secondary)}
.app-alert>div{max-width:640px}
.app-alert strong{display:block;font-size:14px;font-weight:700;color:var(--app-text);margin:0 0 3px}
.app-alert p{margin:0;color:var(--app-text-secondary);text-wrap:pretty}
.app-alert-dismiss,.app-alert-dismiss:hover{margin-top:12px;background:transparent}
.app-content:has(>.settings-wrap)>.app-alert{max-width:1060px}
.app-content:has(>.admin-wrap)>.app-alert{max-width:1120px}

/* -------- empty + skeleton -------- */
.gallery-empty{padding:72px 40px;text-align:center;border:1px dashed var(--app-border-strong);border-radius:var(--app-radius-lg);background:var(--app-surface)}
.gallery-empty-icon{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:var(--app-brand-soft);color:var(--app-brand);display:inline-flex;align-items:center;justify-content:center}
.gallery-empty-title{font-family:var(--font-display);font-size:20px;color:var(--app-text);margin:0 0 6px;font-weight:400}
.gallery-empty-sub{color:var(--app-text-secondary);font-size:14px;max-width:360px;margin:0 auto 20px}
.gallery-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.skel-tile{aspect-ratio:16/10;background:linear-gradient(90deg,var(--app-surface-alt) 0%,var(--app-surface-hover) 50%,var(--app-surface-alt) 100%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--app-radius)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* -------- detail modal -------- */
.detail-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,16,32,.62);backdrop-filter:blur(8px)}
.detail-modal-panel{background:var(--app-surface);border-radius:var(--app-radius-xl);max-width:1200px;width:100%;max-height:calc(100vh - 48px);display:grid;grid-template-columns:1fr 340px;box-shadow:var(--app-shadow-3);overflow:hidden;animation:msRise .2s ease-out both}
.detail-modal-image{background:var(--app-media-bg);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.detail-modal-image img,.detail-modal-image video{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--app-radius)}
.detail-modal-image video{width:auto;background:#000}
.detail-modal-info{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;border-left:1px solid var(--app-border)}
.detail-modal-meta-row{display:flex;justify-content:space-between;font-size:13px;color:var(--app-text-secondary)}
.detail-modal-meta-row strong{color:var(--app-text);font-weight:500}
.detail-title-input{font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:-.005em;border:1px solid transparent;padding:5px 7px;margin:-5px -7px;background:transparent;color:var(--app-text);width:100%;border-radius:7px;text-overflow:ellipsis}
.detail-title-input:hover:not([readonly]){border-color:var(--app-border)}
.detail-title-input:focus{outline:none;border-color:var(--app-brand);background:var(--app-surface);box-shadow:var(--app-shadow-focus)}
.detail-title-input[readonly]{cursor:default}
.detail-title-static{font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--app-text);width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 0}
.detail-uploader{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--app-text-secondary)}
.detail-uploader-av{width:22px;height:22px;border-radius:50%;background:var(--app-brand);color:var(--app-text-on-brand);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.detail-ext-chip{flex-shrink:0;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--app-text-secondary);background:var(--app-surface-alt);border:1px solid var(--app-border);border-radius:5px;padding:2px 6px}
.detail-toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--app-text-secondary);cursor:pointer}
.detail-toggle input{flex-shrink:0;margin:0}
.linkbtn{background:none;border:none;color:var(--app-brand);font:600 12.5px var(--font-body);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px}
.linkbtn:hover{color:var(--app-brand-hover);text-decoration:underline}
.slug-row{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px}
.slug-row .slug-prefix{color:var(--app-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.slug-row .input{padding:6px 8px;font-family:var(--font-mono);font-size:12px}

/* segmented visibility control */
.seg{display:inline-flex;background:var(--app-surface-alt);border:1px solid var(--app-border);border-radius:var(--app-radius);padding:2px;width:100%}
.seg button{flex:1;background:transparent;border:none;padding:7px 8px;border-radius:calc(var(--app-radius) - 2px);cursor:pointer;color:var(--app-text-muted);font-size:12px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:all 120ms;font-family:inherit}
.seg button svg{width:13px;height:13px}
.seg button.is-active{background:var(--app-surface);color:var(--app-brand);box-shadow:var(--app-shadow-1)}

/* tags */
.tagline{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;background:var(--app-brand-soft);color:var(--app-brand);border-radius:999px;font-size:12px;font-weight:500}
.tag-chip button{background:none;border:none;color:inherit;cursor:pointer;padding:0;line-height:1;opacity:.7;font-size:13px}
.tag-chip button:hover{opacity:1}

/* info dot + tooltip escaping the scroll box */
.info-dot{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--app-border-strong);color:var(--app-text-muted);font-size:10px;font-weight:700;line-height:1;cursor:help;flex-shrink:0}
.info-dot:hover{color:var(--app-brand);border-color:var(--app-brand)}
.ms-tip{position:fixed;width:230px;max-width:calc(100vw - 16px);background:var(--app-text);color:var(--app-bg);font-size:12px;line-height:1.45;padding:8px 10px;border-radius:8px;box-shadow:var(--app-shadow-3);z-index:300;pointer-events:none}

/* -------- toast -------- */
.toast-host{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{background:var(--app-text);color:var(--app-bg);padding:10px 16px;border-radius:var(--app-radius);box-shadow:var(--app-shadow-3);font-size:14px;max-width:320px;animation:toast-in 200ms ease-out;transition:opacity .3s,transform .3s}
.toast-error{background:var(--app-danger);color:#fff}
@keyframes toast-in{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* -------- pagination -------- */
.pager{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:32px}
.pager .muted{align-self:center;font-size:13px}

/* -------- powered-by (sidebar footer) -------- */
.app-powered{padding:12px 10px 4px;border-top:1px solid var(--app-border);margin-top:8px;font-size:11px;color:var(--app-text-muted);text-align:center}
.app-powered a{color:var(--app-text-secondary);text-decoration:none}.app-powered a:hover{text-decoration:underline}
.app-powered b{font-weight:700;color:var(--app-text)}.app-powered .s{color:var(--app-brand)}

/* -------- login -------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(120% 90% at 50% -10%,var(--app-brand-soft),transparent 60%)}
.login-card{width:100%;max-width:380px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:var(--app-radius-xl);padding:34px 30px;box-shadow:var(--app-shadow-3)}
.login-brand{display:flex;justify-content:center;margin-bottom:18px}
.login-brand svg,.login-brand img{height:34px}
.login-title{font-family:var(--font-display);font-size:26px;font-weight:400;text-align:center;margin:0 0 6px;color:var(--app-text)}
.login-sub{text-align:center;color:var(--app-text-secondary);font-size:14px;margin:0 0 22px}
.login-err{background:color-mix(in srgb,var(--app-danger) 12%,transparent);color:var(--app-danger);border-radius:var(--app-radius-sm);padding:10px 12px;font-size:13px;margin-bottom:14px}
.login-foot{margin-top:18px;text-align:center;font-size:12px;color:var(--app-text-muted)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--app-surface) inset;-webkit-text-fill-color:var(--app-text);caret-color:var(--app-text)}

/* -------- responsive -------- */
#sidebar-toggle{display:none}
.app-scrim{position:fixed;inset:0;z-index:40;background:rgba(6,10,20,.44);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  #sidebar-toggle{display:inline-flex}
  .app-sidebar{position:fixed;inset:0 auto 0 0;width:280px;transform:translateX(-100%);transition:transform 250ms;z-index:50;box-shadow:var(--app-shadow-3)}
  .app-sidebar.is-open{transform:translateX(0)}
  .app-content{padding:20px}
  .app-topbar-kbd{display:none}
  .app-page-title{font-size:26px}
  .detail-modal-panel{grid-template-columns:1fr}
  .detail-modal-info{border-left:none;border-top:1px solid var(--app-border)}
  .detail-modal-image img,.detail-modal-image video{max-height:50vh}
}
@media(max-width:600px){
  .app-topbar-title{display:none}
  .app-alert-dismiss{min-height:40px;padding:10px 16px}
}

/* -------- Roboto display weights (headings carried at 400 under the old serif) -------- */
.app-topbar-title{font-weight:600}
.app-page-title{font-weight:800;letter-spacing:-.02em}
.stat-card-value{font-weight:800;letter-spacing:-.01em;font-family:var(--font-display)}
.gallery-empty-title{font-weight:700}
.login-title{font-weight:800;letter-spacing:-.015em}
.app-sidebar-brand-word{font-weight:800}
.ms-brand-identity{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;max-width:100%}
.ms-brand-tagline{font-family:var(--font-body);font-size:11px;font-weight:400;line-height:1.3;color:var(--app-text-secondary);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-sidebar-brand-word{min-width:0;overflow-wrap:anywhere}
.app-sidebar-brand img{max-width:100%;object-fit:contain}
.ms-h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}

/* -------- brand logo (built-in Maxisnap default) + studio footer, theme-swapped -------- */
.ms-brandlogo{display:inline-flex;align-items:center}
.ms-brandlogo img{width:auto;display:block}
.ms-brandlogo img.ms-l-light{display:block}
.ms-brandlogo img.ms-l-dark{display:none}
.app-sidebar-brand .ms-brandlogo img{height:22px;max-width:200px}
.login-brand .ms-brandlogo img{height:28px;max-width:100%}
/* light/dark logo variant is chosen by the luminance-aware inline swap in the
   page <head> (ms_logo_swap_css) — it wins the cascade and covers every state. */
.app-powered{display:flex;align-items:center;justify-content:center;gap:7px}
.ms-studio-link{display:inline-flex;align-items:center;line-height:0}
.ms-studio{height:15px;width:auto;display:inline-block}
.ms-studio.ms-s-dark{display:none}