/* Design tokens: update values here to keep the UI consistent. */
:root {
  /* Core palette */
  --black: #000000;
  --surface-1: #0d0d0d;
  --surface-2: #1a1a1a;
  --surface-3: #2b2b2b;
  --surface-hover: #1f1f1f;
  --surface-raised: #171717;
  --surface-input-focus: #151515;
  --surface-action-hover: #3a3a3a;
  --surface-skeleton: #202020;
  --surface-scrollbar: #2b2b2b;
  --surface-account-hover: #222222;
  --text-1: #ffffff;
  --text-2: #999999;
  --text-3: #8a8a8a;
  --text-hover: #d4d4d4;
  --text-hover-strong: #dddddd;
  --border-1: rgba(255, 255, 255, .10);
  --border-2: rgba(255, 255, 255, .20);
  --border-hover: #555555;
  --overlay-shadow: rgba(0, 0, 0, .5);
  --overlay-scrim: rgba(0, 0, 0, .75);
  --overlay-scrim-soft: rgba(0, 0, 0, .6);
  --overlay-thumb: rgba(0, 0, 0, .7);
  --overlay-header: rgba(0, 0, 0, .92);
  --overlay-lightbox: rgba(0, 0, 0, .94);
  --media-dot-muted: rgba(255, 255, 255, .35);
  --control-hover-translucent: rgba(255, 255, 255, .22);
  --surface-glass-1: rgba(255, 255, 255, .08);
  --surface-glass-2: rgba(255, 255, 255, .10);
  --surface-glass-3: rgba(255, 255, 255, .14);
  --surface-glass-4: rgba(255, 255, 255, .32);
  --heart-soft: rgba(253, 0, 84, .08);
  --accent: #0088ff;
  --accent-hover: #0077e0;
  --accent-soft: rgba(0, 136, 255, .08);
  --accent-softer: rgba(0, 136, 255, .06);
  --danger: #fb2c36;
  --danger-border: rgba(251, 44, 54, .45);
  --danger-surface: #1a0a0c;
  --toast-success: #22c55e;
  --toast-warning: #f5b301;
  --toast-info: #a3a3a3;
  --heart: #fd0054;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-sm: 11px;
  --text-md: 13px;
  --text-lg: 14px;
  --text-xl: 16px;
  --text-2xl: 17px;
  --text-3xl: 22px;
  --text-display: 44px;

  /* Spacing scale */
  --space-0: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  /* Shape */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* Icon Sizes */
  --icon-xs: 8px;
  --icon-sm: 16px;
  --icon-md: 24px;
  --icon-lg: 32px;

  /* Motion and layout */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shell: 440px;
  --modal-w: 460px;
  --toast-w: 360px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
button,a,select,input,summary,.tab,.sort-option,.sort-trigger,.card-media,.card-title,.meta-item,.meta-toggle,.mirror-row,.chip{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
button:focus,a:focus,select:focus{outline:none;}
.icon-btn:focus,.icon-btn:focus-visible{outline:none;}
.search-field input:focus,.search-field input:focus-visible{outline:none;}
html{color-scheme:dark;}
body{background:var(--black);color:var(--text-1);font-family:var(--font-family);-webkit-font-smoothing:antialiased;min-height:100vh;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}
input,select{font-family:inherit;color:inherit;background:none;border:none;outline:none;}
::selection{background:var(--accent);color:var(--text-1);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--surface-scrollbar);border-radius:var(--r-md);}
::-webkit-scrollbar-track{background:transparent;}

/* Loading splash */
#loadingScreen{position:fixed;inset:0;z-index:100;background:var(--black);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);transition:opacity .25s var(--ease);}
#loadingScreen.hide{opacity:0;pointer-events:none;}
.dotload{width:6px;height:6px;border-radius:var(--r-circle);background:var(--text-1);opacity:.3;animation:dotBounce 1s ease-in-out infinite;}
.dotload:nth-child(2){animation-delay:.15s;}
.dotload:nth-child(3){animation-delay:.3s;}
@keyframes dotBounce{0%,80%,100%{opacity:.3;transform:translateY(0);}40%{opacity:1;transform:translateY(-5px);}}

/* Header */
.header{position:sticky;top:0;z-index:40;background:var(--overlay-header);border-bottom:1px solid var(--border-1);animation:headerIn .5s var(--ease) both;will-change:transform;transform:translateZ(0);backface-visibility:hidden;}
html{scrollbar-gutter:stable;}
@keyframes headerIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
.header-row{max-width:var(--shell);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);}
.logo{font-family:var(--font-family);font-weight:900;font-size:var(--text-3xl);letter-spacing:-.5px;cursor:pointer;}
#logoHome{font-family:'Unbounded',var(--font-family);font-weight:300;font-size:20px;letter-spacing:0;text-transform:uppercase;}
.header-actions{display:flex;align-items:center;gap:var(--space-1);}
.icon-btn{position:relative;width:40px;height:40px;border-radius:var(--r-pill);background:var(--surface-1);border:1px solid var(--border-1);display:flex;align-items:center;justify-content:center;color:var(--text-1);transition:background .2s var(--ease),transform .15s var(--ease),border-color .2s var(--ease);}
.icon-btn:hover{background:var(--surface-2);border-color:var(--border-2);transform:translateY(-1px);}
.header-actions .icon-btn,.header-actions .icon-btn:hover{background:transparent;border-color:transparent;} /* header search / account: icon only, no outline or fill */
.icon-btn:active{transform:translateY(0) scale(.95);}
.icon-btn svg{width:var(--icon-md);height:var(--icon-md);stroke-width:1.5;}
.search-bar{max-width:var(--shell);margin:0 auto;display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.32,.72,0,1);pointer-events:none;}
.search-bar.open{grid-template-rows:1fr;pointer-events:auto;}
/* Opening: the row grows to its real height (no guessed max-height), while the field itself fades and settles in a beat later */
#searchBar .search-field{margin-bottom:var(--space-2);opacity:0;transform:translateY(-6px) scale(.985);transition:opacity .22s ease-out,transform .42s cubic-bezier(.32,.72,0,1);will-change:opacity,transform;}
#searchBar.open .search-field{opacity:1;transform:none;transition-delay:.06s;}
@media(prefers-reduced-motion:reduce){.search-bar,#searchBar .search-field{transition-duration:.01ms;transition-delay:0s;}}
.search-field{pointer-events:auto;}
.search-inner{min-height:0;overflow:hidden;padding:0 var(--space-3);}
.search-field{display:flex;align-items:center;gap:var(--space-1);border:1px solid var(--border-2);border-radius:var(--r-pill);height:40px;padding:0 var(--space-2);background:var(--surface-1);}
.search-field > svg{width:var(--icon-sm);height:var(--icon-sm);color:var(--text-2);flex-shrink:0;stroke-width:1.5;}
.search-field input{flex:1;font-size:var(--text-md);letter-spacing:-.08px;}
.search-field input::placeholder{color:var(--text-2);}
/* Header search box: fixed height. Pills and the input share one row that scrolls sideways. */
.search-pills{display:contents;}
/* With pills, the left inset matches the vertical inset (7px) so the first pill sits evenly in the box */
.search-field.has-pills{padding-left:7px;}
.search-scroll{flex:1;min-width:0;height:100%;display:flex;align-items:center;gap:var(--space-0);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
.search-scroll::-webkit-scrollbar{display:none;}
.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px);mask-image:linear-gradient(90deg,transparent 0,#000 22px);}
.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%);}
.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);}
#searchBar .search-field input{flex:1 0 96px;min-width:96px;height:100%;}
#searchBar .chip{flex:0 0 auto;max-width:none;cursor:default;touch-action:manipulation;}
#searchBar .chip .chip-label{max-width:180px;}

/* Search suggestions (/no keywords, @cast, #tag) */
.search-suggest{position:absolute;top:100%;left:0;right:0;z-index:45;pointer-events:none;}
.search-suggest[hidden]{display:none;}
.search-suggest-inner{max-width:var(--shell);margin:0 auto;padding:var(--space-0) var(--space-3) 0;}
.search-suggest-list{pointer-events:auto;background:var(--surface-2);border:1px solid var(--border-1);border-radius:var(--r-md);padding:var(--space-1);box-shadow:0 20px 40px var(--overlay-shadow);max-height:min(400px,60dvh);overflow-y:auto;scrollbar-width:none;animation:suggestIn .18s var(--ease);}
.search-suggest-list::-webkit-scrollbar{display:none;}
.suggest-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:10px var(--space-2);border-radius:var(--r-sm);font-size:var(--text-md);text-align:left;color:var(--text-1);transition:background .15s var(--ease);}
.suggest-item:hover,.suggest-item.active{background:var(--surface-3);}
.search-suggest-list{display:flex;flex-direction:column;gap:2px;}
.suggest-label{min-width:0;display:flex;align-items:center;gap:var(--space-1);}
.suggest-label .chip-icon{display:flex;flex-shrink:0;color:var(--text-3);}
.suggest-label .chip-icon svg{width:var(--icon-sm);height:var(--icon-sm);stroke-width:1.75;}
.suggest-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.suggest-meta{flex-shrink:0;font-size:var(--text-sm);color:var(--text-3);}
@keyframes suggestIn{from{opacity:0;transform:translateY(-4px) scale(.98);}to{opacity:1;transform:none;}}
@media(max-width:899px){.search-suggest-inner{padding-inline:var(--space-2);}}

/* Layout / shell */
main{max-width:var(--shell);margin:0 auto;padding:var(--space-3) var(--space-3) 176px;transition:max-width .3s var(--ease);}
@media(max-width:899px){
  .header-row,.search-inner,main{padding-inline:var(--space-2);}
}
.top-block{display:flex;flex-direction:column;gap:var(--space-2);}
.greeting{font-size:var(--text-md);color:var(--text-2);letter-spacing:-.08px;}
.big-title{font-size:var(--text-display);font-weight:800;letter-spacing:-1.5px;line-height:1;}

/* Tabs */
.tabs{display:flex;align-items:center;gap:var(--space-2);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{flex:0 0 auto;white-space:nowrap;font-size:var(--text-xl);font-weight:600;letter-spacing:-.4px;color:var(--text-2);padding:2px 0;position:relative;transition:color .25s var(--ease);}
.tab:hover{color:var(--text-hover);}
.tab.active{color:var(--text-1);}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--text-1);border-radius:2px;animation:underlineIn .3s var(--ease);}
@keyframes underlineIn{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes chipIn{from{opacity:0;transform:translateY(-4px) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}}
.sorter{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);padding-bottom:var(--space-2);font-size:var(--text-md);color:var(--text-2);letter-spacing:-.08px;}
.sort-wrap{position:relative;}
.sort-trigger{position:relative;z-index:31;display:flex;align-items:center;justify-content:space-between;min-width:150px;height:36px;gap:var(--space-1);border:none;border-radius:var(--r-pill);background:var(--surface-2);padding:0 var(--space-2);font-size:var(--text-md);color:var(--text-1);transition:background .3s var(--ease);}
.sort-wrap.open .sort-trigger{background:transparent;}
.explore-shuffle{min-width:0;}
.sort-trigger svg{width:var(--icon-sm);height:var(--icon-sm);transition:transform .3s var(--ease);}
.sort-wrap.open .sort-trigger svg{transform:rotate(180deg);}
/* Morphing dropdown: the menu is the trigger itself growing downward (clip-path morph) */
.sort-menu{position:absolute;top:0;left:0;right:0;z-index:30;padding:40px var(--space-1) var(--space-1);background:var(--surface-2);border-radius:20px;visibility:hidden;pointer-events:none;clip-path:inset(0 0 calc(100% - 36px) 0 round 20px);transition:clip-path .45s cubic-bezier(.32,1.25,.4,1),visibility 0s .45s;}
.sort-wrap.open .sort-menu{visibility:visible;pointer-events:auto;clip-path:inset(0 0 0 0 round 20px);transition:clip-path .45s cubic-bezier(.32,1.25,.4,1),visibility 0s;}
.sort-option{display:block;width:100%;padding:var(--space-1) var(--space-1);border-radius:var(--r-sm);font-size:var(--text-md);text-align:left;opacity:0;transform:translateY(-8px);transition:opacity .15s var(--ease),transform .15s var(--ease),background .15s var(--ease);}
.sort-wrap.open .sort-option{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .4s var(--ease),background .15s var(--ease);}
.sort-option[hidden]{display:none;}
/* Stagger is driven by --i (position in the menu) so it works for any number of options. */
.sort-option:nth-child(1){--i:0;}.sort-option:nth-child(2){--i:1;}.sort-option:nth-child(3){--i:2;}.sort-option:nth-child(4){--i:3;}
.sort-option:nth-child(5){--i:4;}.sort-option:nth-child(6){--i:5;}.sort-option:nth-child(7){--i:6;}.sort-option:nth-child(8){--i:7;}
.sort-option:nth-child(9){--i:8;}.sort-option:nth-child(10){--i:9;}.sort-option:nth-child(11){--i:10;}.sort-option:nth-child(12){--i:11;}
.sort-wrap.open .sort-option{transition-delay:calc(.06s + var(--i,0) * .035s),calc(.06s + var(--i,0) * .035s),0s;}
.sort-option:hover{background:var(--surface-3);}
.sort-option.selected{color:var(--accent);}

/* List / grid */
.list{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-3);}
/* content-visibility: cards far outside the screen skip layout and paint (long lists stay smooth); 243px is a typical card height until the real one is known. */
.card{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;opacity:0;transform:translateY(14px);animation:cardIn .5s var(--ease) forwards;animation-delay:min(calc(var(--i,0) * 60ms), 300ms);content-visibility:auto;contain-intrinsic-size:auto 243px;}
@keyframes cardIn{to{opacity:1;transform:translateY(0);}}
.card-media{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:relative;aspect-ratio:338/190;border-radius:var(--r-md);overflow:hidden;background:var(--surface-1);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.card-media:active{transform:scale(.98);}
.slide-track{display:flex;width:100%;height:100%;transition:transform .34s cubic-bezier(.22,1,.36,1);}
.slide-track.no-anim{transition:none;}
.slide{flex:0 0 100%;width:100%;height:100%;position:relative;background:var(--surface-1);}
.slide img,.slide video{width:100%;height:100%;object-fit:cover;display:block;background:var(--black);}
.slide.loading::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-skeleton) 37%,var(--surface-1) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;}

/* Loader 3 dots (sama dengan preloader) */
.slide-loader{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:2;pointer-events:none;}
.lightbox-slide:not(.loading) .slide-loader{display:none;}
.poster-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:0 24px;box-sizing:border-box;background:radial-gradient(120% 120% at 30% 20%,var(--poster-bg) 0%,var(--surface-1) 65%);}
.poster-fallback .poster-word{max-width:100%;text-align:center;font-size:var(--text-2xl);font-weight:500;letter-spacing:-.2px;color:var(--text-1);opacity:.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;}
.media-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%);pointer-events:none;}
.preview-badges{position:absolute;right:var(--space-1);bottom:var(--space-1);display:flex;gap:6px;z-index:2;pointer-events:none;user-select:none;}
.preview-badge{height:var(--space-4);padding:0 10px 0 8px;border-radius:var(--r-pill);background:var(--surface-glass-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:inline-flex;align-items:center;gap:5px;color:var(--text-1);}
.preview-badge svg{width:var(--icon-sm);height:var(--icon-sm);flex:none;}
.preview-badge b{font-size:var(--text-md);font-weight:600;letter-spacing:.2px;line-height:1;}
.card-title{font-size:var(--text-lg);font-weight:500;letter-spacing:-.2px;color:var(--text-1);cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}

/* Card meta */
.card-reason{font-size:var(--text-sm);color:var(--text-2);margin-bottom:-6px;}
.card-meta{display:block;font-size:var(--text-md);color:var(--text-2);line-height:1.4;letter-spacing:-.08px;max-height:2.8em;overflow:hidden;margin-top:-4px;}
.card-meta.is-expanded{max-height:none;overflow:visible;}
.card-meta .meta-group{display:inline;}
.card-meta .meta-group[data-expanded="0"] .meta-item{display:inline-block;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;cursor:pointer;}
.card-meta .meta-group[data-expanded="1"] .meta-item{display:inline;white-space:normal;overflow-wrap:anywhere;cursor:pointer;}
.card-meta .meta-item:hover{color:var(--text-1);}
.card-meta .meta-group[data-expanded="1"] .meta-item:not(:last-of-type)::after{content:', ';}
.card-meta .meta-sep{color:var(--text-3);display:inline;}
.card-meta .meta-sep::before,.card-meta .meta-sep::after{content:' ';}
.card-meta .meta-toggle{background:none;border:none;padding:0;font:inherit;color:var(--text-3);cursor:pointer;transition:color .15s var(--ease);display:inline-block;vertical-align:bottom;}
.card-meta .meta-toggle::before{content:'\00a0';}
.card-meta .meta-toggle:hover{color:var(--text-1);}
.list-end{text-align:center;padding:var(--space-4) 0 var(--space-1);font-size:15px;font-weight:600;letter-spacing:-.3px;color:var(--text-1);}

/* Desktop bleed */
@media(min-width:900px){
  :root{--shell:1240px;}
  .list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;}
  html{overflow-x:clip;}
}

/* Empty / loading */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:80px var(--space-1);text-align:center;color:var(--text-2);animation:cardIn .4s var(--ease) both;grid-column:1/-1;}
.empty-state svg{width:var(--icon-lg);height:var(--icon-lg);color:var(--text-3);}
.empty-state h3{color:var(--text-1);font-size:var(--text-2xl);font-weight:600;}
.empty-state p{font-size:var(--text-md);max-width:280px;line-height:1.6;}
.empty-state button{margin-top:var(--space-1);background:var(--accent);color:var(--text-1);padding:var(--space-1) var(--space-3);border-radius:var(--r-pill);font-size:var(--text-md);font-weight:600;transition:transform .15s var(--ease),background .2s var(--ease);}
.empty-state button:hover{background:var(--accent-hover);transform:translateY(-1px);}
.skeleton-list{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-3);}
.skeleton-card{display:flex;flex-direction:column;gap:var(--space-1);}
.skeleton-media{aspect-ratio:338/190;border-radius:var(--r-md);background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-skeleton) 37%,var(--surface-1) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;}
.skeleton-line{height:12px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-skeleton) 37%,var(--surface-1) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;}
.skeleton-line.w1{width:40%;}.skeleton-line.w2{width:65%;}
/* Skeleton untuk judul, tab, dan sorter saat pertama buka (body.is-booting dipasang oleh skeleton() di js/22-init-auth.js) */
.skeleton-tab{flex:0 0 auto;height:20px;width:64px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-skeleton) 37%,var(--surface-1) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;}
.skeleton-tab:nth-child(2){width:88px;}.skeleton-tab:nth-child(3){width:72px;}.skeleton-tab:nth-child(4){width:56px;}
body.is-booting #pageHome .greeting,body.is-booting #pageHome .big-title,body.is-booting #pageHome #countLabel,body.is-booting #pageHome .sort-trigger{color:transparent;pointer-events:none;user-select:none;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-skeleton) 37%,var(--surface-1) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;}
body.is-booting #pageHome .greeting{width:fit-content;}
body.is-booting #pageHome .big-title{width:fit-content;min-width:60%;}
body.is-booting #pageHome #countLabel{display:inline-block;min-width:64px;}
body.is-booting #pageHome .sort-trigger{border-color:transparent;}
body.is-booting #pageHome .sort-trigger svg{opacity:0;}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}

/* Bottom nav */
.bottom-nav{position:fixed;left:50%;bottom:var(--space-3);translate:-50% 0;z-index:35;display:flex;align-items:center;gap:var(--space-3);background:var(--surface-glass-1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border-2);border-radius:var(--r-pill);padding:var(--space-1) var(--space-3);box-shadow:0 12px 32px var(--overlay-shadow);transition:transform .35s var(--ease),opacity .35s var(--ease);will-change:transform,opacity;}
.bottom-nav.nav-hidden,body:has(#searchBar.open) .bottom-nav{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;} /* the nav also slides away while the search box is open, so the suggestions get the whole viewport */
.nav-btn{width:var(--space-4);height:var(--space-4);display:flex;align-items:center;justify-content:center;color:var(--text-1);opacity:.75;transition:opacity .2s var(--ease),transform .15s var(--ease);}
.nav-btn:hover{opacity:1;transform:translateY(-1px);}
.nav-btn svg{width:var(--icon-md);height:var(--icon-md);stroke-width:1.5;}
.nav-btn.active-page{opacity:1;color:var(--text-1);}
.nav-btn.fave-nav.active{color:var(--text-1);opacity:1;}
.nav-btn.add-nav{width:56px;height:56px;background:var(--text-1);border-radius:var(--r-circle);color:var(--black);opacity:1;transition:transform .18s var(--ease);}
.nav-btn.add-nav:hover{transform:scale(1.06);}
.nav-btn.add-nav:active{transform:scale(.95);}
.nav-btn.add-nav svg{width:var(--icon-md);height:var(--icon-md);}

/* Toast */
.toaster{position:fixed;top:var(--space-2);right:var(--space-2);width:var(--toast-w);max-width:calc(100vw - var(--space-2) * 2);z-index:80;pointer-events:none;}
@media(max-width:899px){.toaster{left:var(--space-2);width:auto;max-width:none;}}
.toast{position:absolute;top:0;left:0;right:0;box-sizing:border-box;height:var(--toast-h,auto);overflow:hidden;display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2);background:var(--surface-raised);border:1px solid var(--border-2);border-radius:var(--r-md);font-size:var(--text-md);box-shadow:0 10px 30px var(--overlay-shadow);cursor:pointer;pointer-events:auto;transform-origin:top center;transform:translateY(calc(var(--i, 0) * var(--space-1))) scale(calc(1 - var(--i, 0) * .05));z-index:calc(10 - var(--i, 0));transition:transform .45s var(--ease),opacity .3s var(--ease),height .3s var(--ease);}
.toast.entering{opacity:0;transform:translateY(calc(-100% - var(--space-1))) scale(.96);}
.toast.leaving{opacity:0;pointer-events:none;}
.toast.leaving[data-front]{transform:translateY(-12px) scale(.96);}
/* Swipe to dismiss */
.toast{translate:var(--dx,0px) 0;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:transform .45s var(--ease),opacity .3s var(--ease),height .3s var(--ease),translate .3s var(--ease);}
.toast.dragging{cursor:grabbing;transition:transform .45s var(--ease),opacity .3s var(--ease),height .3s var(--ease);}
.toast-icon,.toast-text{transition:opacity .3s var(--ease);}
.toast:not([data-front]) .toast-icon,.toast:not([data-front]) .toast-text{opacity:0;}
.toast-icon{display:flex;flex-shrink:0;}
.toast-icon svg{width:var(--icon-sm);height:var(--icon-sm);}
.toast[data-type="success"] .toast-icon{color:var(--toast-success);}
.toast[data-type="warning"] .toast-icon{color:var(--toast-warning);}
.toast[data-type="info"] .toast-icon{color:var(--toast-info);}
.toast[data-type="success"]{border-color:rgba(34,197,94,.45);}
.toast[data-type="error"]{border-color:var(--danger-border);}
.toast[data-type="warning"]{border-color:rgba(245,179,1,.5);}
.toast[data-type="error"] .toast-icon{color:var(--danger);}
.toast[data-type="loading"] .toast-icon{color:var(--text-2);}
.toast-icon.pop{animation:toastPop .35s var(--ease);}
.loading-dots.toast-dots{gap:3px;align-items:center;height:var(--icon-sm);}
.toast-dots .dotload{width:4px;height:4px;}
.toast-text{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;}
@keyframes toastPop{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}

/* Modal */
#modalOverlay{z-index:57;}
#manageConfirmOverlay{z-index:56;}
#pickerOverlay{z-index:58;}
#collectionModalOverlay{z-index:59;}
#deleteConfirmOverlay{z-index:60;}
.field{position:relative;}
.field label{display:block;font-size:var(--text-md);color:var(--text-2);letter-spacing:-.08px;margin-bottom:var(--space-1);}
.field .req{color:var(--heart);}
.field input[type=text],.field input[type=url],.field input[type=email],.field input[type=password]{width:100%;background:var(--surface-2);border-radius:var(--r-pill);padding:var(--space-2) var(--space-2);font-size:var(--text-md);transition:box-shadow .2s var(--ease),background .2s var(--ease);}
.field input::placeholder{color:var(--text-3);}
.field input:focus{box-shadow:0 0 0 2px var(--accent);background:var(--surface-input-focus);outline:none;}
.field textarea{display:block;width:100%;min-height:96px;resize:none;scrollbar-width:none;-ms-overflow-style:none;border:none;background:var(--surface-2);border-radius:var(--r-md);padding:var(--space-2);font-size:var(--text-md);line-height:1.6;color:var(--text-1);font-family:inherit;transition:box-shadow .2s var(--ease),background .2s var(--ease);}
.field textarea::-webkit-scrollbar{display:none;width:0;height:0;}
.field textarea::placeholder{color:var(--text-3);}
.field textarea:focus{box-shadow:0 0 0 2px var(--accent);background:var(--surface-input-focus);outline:none;}

/* chip-input */
.chip-input{position:relative;display:flex;align-items:center;background:var(--surface-2);border-radius:var(--r-pill);padding:0 var(--space-2);transition:box-shadow .2s var(--ease);}
.chip-input:focus-within{box-shadow:0 0 0 2px var(--accent);}
.field .chip-input input[type="text"],.field .chip-input input:not([type]){flex:1;min-width:0;font-size:var(--text-md);padding:var(--space-2) 0;width:auto;background:transparent;border-radius:0;}
.chip-input input:focus{box-shadow:none;outline:none;background:transparent;}
.chip-input input::placeholder{color:var(--text-3);}

/* chip-list */
.chip-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-0);align-items:flex-start;}
.chip-list:empty{display:none;}
.chip-input + .chip-list{margin-top:var(--space-1);}

.chip{display:flex;align-items:center;gap:var(--space-0);flex:0 0 auto;width:fit-content;background:var(--surface-3);border:0;color:var(--text-1);padding:var(--space-0) var(--space-0) var(--space-0) var(--space-1);border-radius:var(--r-pill);font-size:var(--text-sm);animation:chipIn .18s var(--ease);}
.chip{min-width:0;max-width:100%;}
.chip .chip-icon{display:flex;align-items:center;flex-shrink:0;color:var(--text-2);}
.chip .chip-icon svg{width:14px;height:14px;stroke-width:1.75;}
.chip .chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chip button{width:18px;height:18px;margin-left:-2px;display:flex;align-items:center;justify-content:center;color:var(--text-2);background:none;border:none;}
.chip button{position:relative;}
.chip button::after{content:"";position:absolute;inset:-9px;}   /* area sentuh 36px di sekitar tombol hapus yang kecil */
.chip button:hover{color:var(--text-1);}
.chip button svg{width:12px;height:12px;}
.chip{cursor:grab;touch-action:none;user-select:none;}
.chip.dragging{opacity:.5;cursor:grabbing;transform:scale(1.05);}
.chip.drag-over{box-shadow:0 0 0 1px var(--accent);}

/* Autocomplete */
.autocomplete-list{position:absolute;top:calc(100% + var(--space-1));left:0;right:0;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-md);max-height:180px;overflow-y:auto;z-index:20;box-shadow:0 12px 30px var(--overlay-shadow);opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);transform-origin:top center;transition:opacity .15s var(--ease),transform .15s var(--ease),visibility .15s;}
.autocomplete-list.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.autocomplete-list.drop-up{top:auto;bottom:calc(100% + var(--space-1));transform-origin:bottom center;transform:translateY(4px) scale(.98);}
.autocomplete-list.drop-up.open{transform:translateY(0) scale(1);}
.autocomplete-option{padding:var(--space-1) var(--space-2);font-size:var(--text-md);cursor:pointer;transition:background .15s var(--ease);}
.autocomplete-option:hover{background:var(--surface-3);}
.autocomplete-option.new{color:var(--accent);font-weight:600;border-top:1px solid var(--border-1);}

/* Category dropdown */
.cat-wrap{position:relative;}
.cat-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);background:var(--surface-2);border-radius:var(--r-pill);padding:var(--space-2) var(--space-2);font-size:var(--text-md);color:var(--text-1);text-align:left;cursor:pointer;transition:box-shadow .2s var(--ease),background .2s var(--ease);border:none;}
.cat-trigger:hover{background:var(--surface-hover);}
.cat-trigger:focus{box-shadow:0 0 0 2px var(--accent);outline:none;}
.cat-trigger .cat-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.cat-trigger .cat-arrow{width:var(--icon-sm);height:var(--icon-sm);color:var(--text-2);flex-shrink:0;transition:transform .3s var(--ease);}
.cat-wrap.open .cat-trigger .cat-arrow{transform:rotate(180deg);}
.cat-menu{position:absolute;top:calc(100% + var(--space-1));left:0;right:0;background:var(--surface-2);border:1px solid var(--border-1);border-radius:var(--r-md);padding:var(--space-1);box-shadow:0 20px 40px var(--overlay-shadow);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:top center;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:30;max-height:240px;overflow-y:auto;}
.cat-wrap.open .cat-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.cat-option{width:100%;padding:var(--space-1) var(--space-1);border-radius:var(--r-sm);font-size:var(--text-md);text-align:left;transition:background .15s var(--ease);color:var(--text-1);display:flex;align-items:center;gap:var(--space-1);cursor:pointer;background:none;border:none;font-family:inherit;}
.cat-option:hover{background:var(--surface-3);}
.cat-option.selected{color:var(--accent);}
.cat-option.add-new{color:var(--accent);font-weight:600;border-top:1px solid var(--border-1);margin-top:var(--space-1);padding-top:var(--space-2);}

.dropzone{border:1.5px dashed var(--border-2);border-radius:var(--r-md);background:var(--surface-2);min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);text-align:center;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),opacity .2s var(--ease);}
.dropzone.uploading{opacity:.6;pointer-events:none;}
.dropzone.drag{border-color:var(--accent);background:var(--accent-soft);}
.dropzone svg{width:var(--icon-lg);height:var(--icon-lg);color:var(--text-2);}
.dropzone p{font-size:var(--text-sm);color:var(--text-2);letter-spacing:.06px;line-height:1.5;}
.dropzone b{color:var(--text-1);font-weight:600;}
.thumb-sections{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2);}
.thumb-section[hidden]{display:none;}
.thumb-section-head{display:flex;align-items:center;gap:6px;margin-bottom:var(--space-1);font-size:var(--text-sm);font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-2);}
.thumb-section-head b{font-weight:600;color:var(--text-3);}
.thumb-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-1);}
.thumb{position:relative;width:100%;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border-1);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .15s var(--ease),opacity .15s var(--ease),border-color .15s var(--ease);}
.thumb.dragging{opacity:.4;cursor:grabbing;}
.thumb.holding{transform:scale(.93);transition:transform 1s cubic-bezier(.2,.7,.3,1);}
.thumb.drag-over{border-color:var(--accent);transform:scale(1.06);}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.thumb-remove{position:absolute;top:3px;right:3px;width:var(--icon-sm);height:var(--icon-sm);border-radius:var(--r-circle);background:var(--overlay-thumb);display:flex;align-items:center;justify-content:center;z-index:2;}
.thumb-remove svg{width:var(--icon-xs);height:var(--icon-xs);}
.thumb-vid{position:absolute;left:4px;bottom:4px;width:var(--icon-sm);height:var(--icon-sm);border-radius:var(--r-circle);background:var(--overlay-thumb);display:flex;align-items:center;justify-content:center;color:var(--text-1);pointer-events:none;}
.thumb-vid svg{width:8px;height:8px;}
.mirror-add-row{display:flex;gap:var(--space-1);}
.mirror-add-row input{flex:1;background:var(--surface-2);border-radius:var(--r-sm);padding:var(--space-1) var(--space-2);font-size:var(--text-md);}
.mirror-add-row input::placeholder{color:var(--text-3);}
.mirror-add-row button{background:var(--surface-3);color:var(--text-1);border-radius:var(--r-pill);padding:0 var(--space-3);font-size:var(--text-md);font-weight:600;transition:background .2s var(--ease);}
.mirror-add-row button:hover:not(:disabled){background:var(--surface-action-hover);}
.mirror-add-row button:disabled{opacity:.4;cursor:not-allowed;}
.mirror-list{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-1);}
.mirror-list-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);background:var(--surface-2);border-radius:var(--r-sm);padding:var(--space-1) var(--space-2);font-size:var(--text-md);}
.mirror-list-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);}
.mirror-list-row span b{color:var(--text-1);}
.mirror-list-row button{width:var(--icon-sm);height:var(--icon-sm);display:flex;align-items:center;justify-content:center;color:var(--text-3);flex-shrink:0;}
.mirror-list-row button:hover{color:var(--danger);}
.info-tip-wrap{position:relative;display:inline-flex;align-items:center;margin-left:var(--space-1);vertical-align:middle;}
.info-tip-btn{width:var(--icon-sm);height:var(--icon-sm);border-radius:var(--r-circle);border:1px solid var(--text-3);color:var(--text-3);display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;font-style:italic;font-family:Georgia,serif;line-height:1;transition:border-color .2s var(--ease),color .2s var(--ease);cursor:pointer;user-select:none;}
.info-tip-btn:hover,.info-tip-wrap.open .info-tip-btn{border-color:var(--accent);color:var(--accent);}
.info-tip-bubble{position:absolute;right:-4px;bottom:calc(100% + var(--space-1));background:var(--surface-hover);border:1px solid var(--border-2);color:var(--text-2);font-size:var(--text-sm);line-height:1.55;padding:var(--space-1) var(--space-2);border-radius:var(--r-sm);width:230px;box-shadow:0 12px 30px rgba(0,0,0,.55);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:40;letter-spacing:.1px;text-align:left;font-weight:400;}
.info-tip-bubble::after{content:"";position:absolute;top:100%;right:12px;border:6px solid transparent;border-top-color:var(--surface-hover);}
.info-tip-wrap:hover .info-tip-bubble,.info-tip-wrap.open .info-tip-bubble{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.pill-btn{height:48px;min-width:128px;padding:0 var(--space-3);border-radius:var(--r-pill);font-size:var(--text-xl);font-weight:600;letter-spacing:-.43px;display:flex;align-items:center;justify-content:center;transition:transform .15s var(--ease),background .2s var(--ease),opacity .2s var(--ease);}
.pill-btn:hover{transform:translateY(-1px);}
.pill-btn.save{background:var(--accent);color:var(--text-1);}
.pill-btn.save:hover{background:var(--accent-hover);}
.pill-btn.danger{background:var(--danger);color:var(--text-1);}
.pill-btn.neutral{background:var(--surface-3);color:var(--text-1);}
.pill-btn.neutral:hover{background:var(--surface-action-hover);}
.pill-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.pill-btn.save:disabled:hover{background:var(--accent);}
.pill-btn.neutral:disabled:hover{background:var(--surface-3);}
.confirm-inline{display:flex;flex-direction:column;gap:var(--space-2);align-items:center;text-align:center;padding:var(--space-1) var(--space-0) var(--space-0);}
.confirm-inline p{font-size:var(--text-md);color:var(--text-2);}
.confirm-inline svg{width:var(--icon-lg);height:var(--icon-lg);color:var(--danger);}

/* ── Sheet system: one look and one behavior for every sheet and dialog ──
   Anatomy: .sheet-overlay > .sheet > .sheet-top (handle + .sheet-head) / .sheet-toolbar? / .sheet-body / .sheet-foot?
   Variants: .sheet--tall (fixed height) · .sheet--dialog + .sheet-overlay--center (centered confirm) */
:root{
  --sheet-radius:32px;
  --sheet-pad:var(--space-3);
  --sheet-h:min(92vh, calc(var(--vvh, 100vh) - 20px));
  --sheet-h-mid:min(70vh, calc(var(--vvh, 100vh) - 20px));
}
@supports(height:1dvh){:root{--sheet-h:min(92dvh, calc(var(--vvh, 100dvh) - 20px));--sheet-h-mid:min(70dvh, calc(var(--vvh, 100dvh) - 20px));}}
/* Motion: a critically damped spring (no bounce), sampled as a CSS linear() easing. Falls back to --ease where linear() is unsupported.
   The backdrop is its own layer (::before) so the sheet itself never fades; it only slides, and the dim follows it. */
:root{--sheet-spring:var(--ease);--sheet-dur:.3s;}
@supports(transition-timing-function:linear(0,1)){:root{--sheet-spring:linear(0, 0.0303, 0.102, 0.1938, 0.2923, 0.3892, 0.4797, 0.5616, 0.6337, 0.6963, 0.7497, 0.7948, 0.8325, 0.8639, 0.8898, 0.911, 0.9284, 0.9425, 0.954, 0.9632, 0.9706, 0.9766, 0.9814, 0.9852, 0.9883, 0.9907, 1);--sheet-dur:.33s;}}
.sheet-overlay{position:fixed;inset:0;z-index:55;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;pointer-events:none;transition:visibility 0s linear var(--sheet-dur);overscroll-behavior:contain;}
.sheet-overlay::before{content:'';position:absolute;inset:0;background:var(--overlay-lightbox);opacity:0;transition:opacity .18s var(--ease) .1s;}
.sheet-overlay.open{visibility:visible;pointer-events:auto;transition:visibility 0s;}
.sheet-overlay.open::before{opacity:var(--bd,1);transition:opacity var(--sheet-dur) var(--sheet-spring);}
.sheet-overlay.sheet-dragging::before{transition:none;}
.sheet-overlay--center{align-items:center;padding:var(--space-3);}
.sheet{position:relative;display:flex;flex-direction:column;width:100%;max-width:var(--modal-w);max-height:var(--sheet-h);background:var(--black);border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;overflow:hidden;transform:translate3d(0,100%,0);transition:transform var(--sheet-dur) var(--sheet-spring);will-change:transform;backface-visibility:hidden;}
.sheet-overlay.open .sheet{transform:translate3d(0,0,0);}
.sheet--tall{height:var(--sheet-h-mid);transition:transform var(--sheet-dur) var(--sheet-spring),height .26s var(--sheet-spring);}
.sheet--tall.is-expanded{height:var(--sheet-h);}
.sheet--dialog{max-width:340px;border-radius:var(--sheet-radius);transform:translate3d(0,calc(50vh + 100%),0);}
.sheet-overlay.open .sheet--dialog{transform:translate3d(0,0,0);}
.sheet > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.sheet-top{flex-shrink:0;padding-top:12px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;}
.sheet-handle{width:36px;height:var(--space-0);border-radius:var(--space-0);background:var(--control-hover-translucent);margin:0 auto 12px;}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:0 var(--sheet-pad) var(--space-2);border-bottom:1px solid var(--border-1);}
.sheet-title-wrap{display:flex;align-items:baseline;gap:var(--space-1);min-width:0;}
.sheet-title{font-size:var(--text-3xl);font-weight:700;letter-spacing:-.4px;}
.sheet-sub{font-size:var(--text-sm);color:var(--text-2);letter-spacing:.06px;}
.sheet-close{flex-shrink:0;width:var(--space-4);height:var(--space-4);border-radius:var(--r-circle);display:flex;align-items:center;justify-content:center;color:var(--text-2);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);}
.sheet-close:hover{background:var(--surface-2);color:var(--text-1);}
.sheet-close svg{width:var(--icon-sm);height:var(--icon-sm);}
.sheet-toolbar{flex-shrink:0;padding:var(--space-2) var(--sheet-pad) 0;}
.sheet-toolbar .manage-tabs{padding:0;margin-bottom:var(--space-2);}
.sheet-toolbar .manage-search-wrap{padding:0 0 var(--space-2);}
.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--space-3) var(--sheet-pad);display:flex;flex-direction:column;gap:var(--space-2);scrollbar-width:none;-ms-overflow-style:none;}
.sheet-body::-webkit-scrollbar{display:none;width:0;height:0;}
.sheet-toolbar + .sheet-body{padding-top:0;}
.sheet > .sheet-body:last-child{padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom, 0px));}
.sheet-body--confirm{padding:var(--space-4) var(--sheet-pad) var(--space-2);}
.sheet-foot{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1);padding:var(--space-2) var(--sheet-pad) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--border-1);background:var(--black);}
.sheet-foot .pill-btn{flex:1;min-width:0;}
.sheet-foot[hidden]{display:none;}
.sheet--dialog .sheet-foot{border-top:0;padding-top:var(--space-2);padding-bottom:var(--sheet-pad);}
.bookmark-modal-body{gap:var(--space-3);}
.sheet-body > .manage-list{flex:none;overflow:visible;}
.sheet-body > .sheet-action-row,.sheet-body > .sheet-block,.sheet-body > .account-row{margin-bottom:0;}

/* Action row */
.sheet-action-row{display:flex;gap:var(--space-2);padding:var(--space-2);background:var(--surface-2);border-radius:var(--r-lg);margin-bottom:var(--space-2);}
.sheet-action-btn{flex:1 1 0;min-width:0;aspect-ratio:1 / 1;border-radius:var(--r-md);background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--text-1);padding:0;cursor:pointer;border:none;transition:background .2s var(--ease),transform .15s var(--ease),color .2s var(--ease);}
.sheet-action-btn:hover{background:var(--surface-action-hover);}
.sheet-action-btn:active{transform:scale(.94);}
.sheet-action-btn svg{width:var(--icon-md);height:var(--icon-md);pointer-events:none;display:block;stroke-width:1.5;}
.sheet-action-btn[data-liked="true"]{color:var(--heart);}
.sheet-action-btn[data-liked="true"] svg path{fill:currentColor;}
.sheet-action-danger{color:var(--danger);}

/* Blocks */
.sheet-block{background:var(--surface-2);border-radius:var(--r-lg);padding:var(--space-2);margin-bottom:var(--space-2);}
.sheet-block:last-child{margin-bottom:0;}
.sheet-block-label{font-size:var(--text-md);color:var(--text-2);letter-spacing:-.08px;margin-bottom:var(--space-1);padding:0 var(--space-0);}
.sheet-link-list{display:flex;flex-direction:column;gap:var(--space-1);}
.sheet-link-btn{background:var(--surface-3);border-radius:var(--r-pill);min-height:52px;padding:var(--space-2) var(--space-2);display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);color:var(--text-1);text-align:center;cursor:pointer;border:none;font-family:inherit;transition:background .2s var(--ease),transform .12s var(--ease);}
.sheet-link-btn:hover{background:var(--surface-action-hover);}
.sheet-link-btn:active{transform:scale(.98);}
.sheet-link-btn b{font-weight:700;margin-left:var(--space-0);}
.sheet-empty{font-size:var(--text-md);color:var(--text-3);text-align:center;padding:var(--space-2) 0;}

/* Notes */
.sheet-block[hidden]{display:none;}
/* Edit / Cancel / Save sit beside the title, like the "0 Selected" count in Filters */
.sheet-head-actions{display:flex;align-items:baseline;gap:var(--space-1);}
.sheet-head-actions .sheet-text-btn{padding:var(--space-1) var(--space-0);margin:calc(var(--space-1) * -1) 0;}
.sheet-text-btn{padding:var(--space-0) var(--space-1);font-size:var(--text-md);font-weight:400;color:var(--text-3);transition:color .15s var(--ease);}
.sheet-text-btn:hover{color:var(--text-1);}
.sheet-text-btn.primary{color:var(--accent);}
.sheet-text-btn.primary:hover{color:var(--accent-hover);}
.sheet-text-btn:disabled{opacity:.5;cursor:default;}
.sheet-text-btn[hidden]{display:none;}
.sheet-notes-view{min-height:52px;padding:var(--space-2);background:var(--surface-3);border-radius:var(--r-md);font-size:var(--text-lg);line-height:1.6;color:var(--text-1);overflow-wrap:anywhere;}
.sheet-notes-hint{font-size:var(--text-sm);color:var(--text-3);line-height:1.5;margin-top:var(--space-1);padding:0 var(--space-0);}
.sheet-notes-hint[hidden]{display:none;}
.sheet-notes-view[hidden],.sheet-notes-input[hidden]{display:none;}
.notes-placeholder{color:var(--text-3);}
.sheet-notes-input{width:100%;min-height:96px;resize:none;padding:var(--space-2);background:var(--surface-3);border:none;border-radius:var(--r-md);font-size:16px;line-height:1.6;color:var(--text-1);font-family:inherit;scrollbar-width:none;-ms-overflow-style:none;}
.sheet-notes-input::-webkit-scrollbar{display:none;width:0;height:0;}
.sheet-notes-input:focus{box-shadow:0 0 0 2px var(--accent);outline:none;}
.sheet-notes-input::placeholder{color:var(--text-3);}
.sheet-notes-input--line{min-height:0;height:52px;resize:none;border-radius:var(--r-pill);padding:0 var(--space-2);}
.sheet-link-list[hidden]{display:none;}
.sheet-field-error{font-size:var(--text-sm);color:var(--heart);line-height:1.5;margin-top:var(--space-1);padding:0 var(--space-0);}
.sheet-field-error[hidden]{display:none;}
.note-link{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums;}
.note-link:hover{text-decoration:underline;}

/* Lightbox */
.lightbox-overlay{--lb-bar-h:calc(60px + env(safe-area-inset-bottom,0px));position:fixed;inset:0;z-index:70;background-color:transparent;display:flex;align-items:flex-start;justify-content:center;visibility:hidden;transition:background-color .38s var(--ease),visibility 0s linear .42s;}
.lightbox-overlay.open{background-color:var(--overlay-lightbox);visibility:visible;transition:background-color .38s var(--ease),visibility 0s;}
/* Height of the stage, used to size the video wrap from its aspect ratio alone (not from the <video>'s intrinsic size) */
.lightbox-overlay{--lb-h:100dvh;}
.lightbox-overlay.has-bar{--lb-h:calc(100dvh - var(--lb-bar-h));}
.lightbox-overlay.lb-dragging{transition:none;}
.lightbox-stage{position:relative;width:100%;height:100%;overflow:hidden;}
.lightbox-overlay.has-bar .lightbox-stage{height:calc(100% - var(--lb-bar-h));}
/* open/close choreography: stage is hidden while the morph ghost flies, then revealed in place */
.lightbox-overlay.lb-morph .lightbox-stage{opacity:0;}
.lightbox-overlay.lb-pop .lightbox-stage{animation:lbPop .34s var(--ease) both;}
.lightbox-overlay.lb-leaving .lightbox-stage{opacity:0;transform:scale(.96);transition:opacity .26s var(--ease),transform .26s var(--ease);}
@keyframes lbPop{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}
.lightbox-track.tab-in{animation:lbTab .28s var(--ease) both;}
@keyframes lbTab{from{opacity:0;}to{opacity:1;}}
.lb-ghost{position:fixed;z-index:4;margin:0;overflow:hidden;pointer-events:none;transform-origin:50% 50%;will-change:transform,clip-path;}
.lb-ghost img,.lb-ghost canvas{display:block;width:100%;height:100%;}
.lightbox-slide img,.lightbox-slide .video-wrap{will-change:auto;}
.lightbox-slide .lb-snap{transition:transform .32s var(--ease);}
.lightbox-track{display:flex;width:100%;height:100%;transition:transform .34s cubic-bezier(.22,1,.36,1);will-change:transform;}
.lightbox-track.no-anim{transition:none;}
.lightbox-slide{position:relative;flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0;}
 @media (orientation: landscape) {
   #lightboxStage .video-wrap {
     width: 100%;
     height: 100%;
     max-width: 100%;
     max-height: 100%;
   }
 }
.lightbox-slide img{max-width:100%;max-height:100%;object-fit:contain;border-radius:0;}

/* The wrap's box depends only on --vr (video width / height) and the stage, never on the <video>'s intrinsic size.
   Before this, it was 300px wide until metadata arrived, then jumped to full width, and the controls piled up in the middle. */
.video-wrap{--vr:1.7778;--vc-h:36px;--vc-pad:12px;container-type:inline-size;position:relative;aspect-ratio:var(--vr);width:min(100%,calc(var(--lb-h,100dvh) * var(--vr)));max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;margin:auto;}
.video-wrap video{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;border-radius:0;display:block;}
.video-scrub-zone{position:absolute;left:0;right:0;bottom:0;height:min(20%, 120px);z-index:2;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}

/* Player controls: every action lives in ONE glass pill (a single backdrop blur instead of seven, and no dead gaps between targets).
   --vc-h is the tap target (36px); --vc-pad is the distance from the video edge. */
.video-bottom-actions{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--vc-pad);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
.video-wrap.timestamp-visible .video-bottom-actions {
  opacity: 1;
}
.video-actions-pill{
  display: flex;
  align-items: center;
  height: var(--vc-h);
  padding: 0 2px;
  border-radius: var(--r-pill);
  background: var(--surface-glass-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}
.video-corner-btn{
  flex: 0 0 auto;
  width: var(--vc-h);
  height: var(--vc-h);
  padding: 0;
  border: none;
  border-radius: var(--r-circle);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-1);
  pointer-events: auto;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.video-corner-btn[hidden]{display:none;}
.video-corner-btn svg{ width: var(--icon-sm); height: var(--icon-sm); }

.video-wrap.menu-open .video-bottom-actions,.video-wrap.note-open .video-bottom-actions{opacity:1;}
.video-corner-btn:hover{background:var(--control-hover-translucent);}
/* Hidden controls must not keep a live backdrop-filter over the playing video (flickers in fullscreen) */
.video-wrap:not(.timestamp-visible):not(.menu-open) .video-actions-pill,
.video-wrap:not(.timestamp-visible) .video-timestamp{backdrop-filter:none;-webkit-backdrop-filter:none;}
.video-corner-btn.is-active{color:var(--accent);}

/* Subtitle overlay (inside .video-wrap so it also works in fullscreen) */
.video-subtitle{
  position:absolute;left:50%;bottom:var(--space-3);transform:translateX(-50%);
  max-width:90%;padding:var(--space-0) var(--space-1);
  background:none;color:var(--text-1);text-align:center;white-space:pre-line;
  font-size:clamp(14px,2.8vmin,32px);line-height:1.35;font-weight:500;
  /* 1px black outline + very faint black shadow at 135deg (down-right) */
  text-shadow:
    -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
    -1px 0 0 #000, 1px 0 0 #000,
    -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000,
    2px 2px 3px rgba(0,0,0,.25);
  z-index:3;pointer-events:none;transition:bottom .2s var(--ease);
}
.video-subtitle[hidden]{display:none;}
.video-wrap.timestamp-visible .video-subtitle,
.video-wrap.menu-open .video-subtitle{bottom:calc(var(--vc-pad) + var(--vc-h) + var(--space-1));}

/* Subtitle menu: anchored to the left edge of the pill, i.e. right above the subtitle icon, and opens upwards */
.video-actions-anchor{position:relative;display:flex;}
.video-wrap.menu-open .video-bottom-actions{z-index:5;}
.video-cc-menu{
  position:absolute;left:0;bottom:calc(100% + var(--space-1));pointer-events:auto;
  z-index:5;min-width:190px;max-width:100%;padding:var(--space-0);border-radius:var(--r-md);
  background:var(--overlay-scrim-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
}
.video-cc-menu[hidden]{display:none;}
.video-cc-menu button{
  background:none;border:none;font:inherit;text-align:left;cursor:pointer;
  padding:var(--space-1) var(--space-2);border-radius:var(--r-sm);color:var(--text-1);font-size:var(--text-md);
}
.video-cc-menu button:hover{background:var(--surface-glass-3);}
.video-cc-name{padding:var(--space-0) var(--space-2);font-size:var(--text-sm);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Fullscreen */
.video-wrap.is-fullscreen,.video-wrap:fullscreen,.video-wrap:-webkit-full-screen{aspect-ratio:auto !important;background:#000;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;margin:0;}
.lightbox-overlay.fs-active .lightbox-track{will-change:auto;transition:none;}
.video-wrap.pseudo-fs{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;z-index:100;}
.lightbox-overlay.pseudo-fs-active .lightbox-track{transform:none !important;transition:none;will-change:auto;}
.lightbox-overlay.pseudo-fs-active .lightbox-arrow,
.lightbox-overlay.pseudo-fs-active .lightbox-bar,
.lightbox-overlay.pseudo-fs-active .lightbox-close,
.lightbox-overlay.fs-active .lightbox-bar,
.lightbox-overlay.fs-active .lightbox-close{display:none;}

/* Shutter flash when a frame is saved */
.video-wrap.shutter::after{content:'';position:absolute;inset:0;background:#fff;pointer-events:none;z-index:6;animation:videoShutter .3s ease-out forwards;}
@keyframes videoShutter{from{opacity:.55;}to{opacity:0;}}

/* Timestamp (Kiri Bawah) */
.video-timestamp{
  position: absolute;
  left: var(--vc-pad);
  bottom: var(--vc-pad);
  height: var(--vc-h);
  display: flex;
  align-items: center;
  padding: 0 var(--space-1);
  border-radius: var(--r-pill);
  background: var(--surface-glass-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-1);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.video-wrap.timestamp-visible .video-timestamp{opacity:1;}
.video-timestamp .ts-dur{white-space:pre;}

/* Adaptive layout, driven by the player's own width (see widths in the commit message):
   < 410px  the pill + full "00:00 / 00:00" would collide -> keep only the current time
   < 352px  even the short time collides -> it sits just above the pill instead */
@container (max-width: 409px){
  .video-timestamp .ts-dur{display:none;}
}
@container (max-width: 351px){
  .video-timestamp{bottom:calc(var(--vc-pad) + var(--vc-h) + var(--space-0));}
  .video-wrap.timestamp-visible .video-subtitle,
  .video-wrap.menu-open .video-subtitle{bottom:calc(var(--vc-pad) + 2 * var(--vc-h) + var(--space-0) + var(--space-1));}
  .video-wrap.note-open .video-timestamp,
  .video-wrap.menu-open .video-timestamp{opacity:0;}
}

.video-error{position:absolute;inset:0;background:var(--overlay-scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);text-align:center;z-index:4;}
.video-error[hidden]{display:none;}
.video-error-msg{font-size:var(--text-lg);color:var(--text-1);max-width:320px;line-height:1.5;}
.video-error-link{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--r-pill);background:var(--accent);color:var(--text-1);font-size:var(--text-md);font-weight:600;text-decoration:none;transition:background .2s var(--ease),transform .15s var(--ease);}
.video-error-link:hover{background:var(--accent-hover);transform:translateY(-1px);}
.video-error-retry{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);border-radius:var(--r-pill);background:var(--surface-glass-2);color:var(--text-1);font-size:var(--text-md);font-weight:600;cursor:pointer;transition:background .2s var(--ease);}
.video-error-retry:hover{background:var(--control-hover-translucent);}
.video-error-actions{display:flex;flex-wrap:wrap;gap:var(--space-1);justify-content:center;}

/* Lightbox chrome (arrows, close, bar) stays invisible until the open animation reveals it */
.lightbox-arrow,.lightbox-close,.lightbox-bar{opacity:0;pointer-events:none;transition:opacity .25s var(--ease),background .2s var(--ease);}
.lightbox-overlay.lb-ui:not(.lb-dragging) .lightbox-bar{opacity:1;}
.lightbox-overlay.lb-ui:not(.lb-dragging) .lightbox-close{opacity:1;pointer-events:auto;}
@media(hover:hover) and (pointer:fine){
  #imagePreviewOverlay.lb-ui:not(.lb-dragging):hover .lightbox-arrow{opacity:1;pointer-events:auto;}
}
@media(hover:none){
  .lightbox-arrow{display:none;}
}
.lightbox-arrow{position:fixed;top:50%;translate:0 -50%;z-index:2;width:44px;height:44px;border-radius:var(--r-circle);background:var(--surface-glass-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--text-1);display:flex;align-items:center;justify-content:center;}
.lightbox-arrow:hover{background:var(--control-hover-translucent);}
.lightbox-arrow svg{width:var(--icon-sm);height:var(--icon-sm);}
.lightbox-arrow.prev{left:var(--space-2);}
.lightbox-arrow.next{right:var(--space-2);}

/* Close (X): desktop only; touch users swipe down */
.lightbox-close{display:none;position:fixed;top:var(--space-2);right:var(--space-2);z-index:3;width:44px;height:44px;padding:0;border:none;border-radius:var(--r-circle);background:var(--surface-glass-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--text-1);align-items:center;justify-content:center;cursor:pointer;}
.lightbox-close:hover{background:var(--control-hover-translucent);}
.lightbox-close svg{width:18px;height:18px;}
@media(hover:hover) and (pointer:fine){ .lightbox-close{display:flex;} }

/* Bottom bar: counter on the left, Image/Video sliding tabs on the right */
.lightbox-bar{position:fixed;left:0;right:0;bottom:0;z-index:2;height:var(--lb-bar-h);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-2);padding:0 var(--space-2) calc(14px + env(safe-area-inset-bottom,0px));}
.lightbox-bar[hidden],.lightbox-count[hidden],.lightbox-tabs[hidden]{display:none;}
.lightbox-count{height:32px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-pill);background:var(--surface-glass-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--text-1);font-size:var(--text-md);font-weight:500;letter-spacing:.3px;pointer-events:auto;user-select:none;}
.lightbox-tabs{position:relative;isolation:isolate;margin-left:auto;display:grid;grid-template-columns:1fr 1fr;height:32px;padding:3px;border-radius:var(--r-pill);background:var(--surface-glass-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:auto;}
.lb-tab-pill{position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:var(--r-pill);background:rgba(255,255,255,.22);transition:transform .34s var(--ease);}
.lightbox-tabs[data-active="video"] .lb-tab-pill{transform:translateX(100%);}
.lightbox-tabs button{min-width:60px;padding:0 12px;border:none;background:none;border-radius:var(--r-pill);font:inherit;font-size:var(--text-md);font-weight:500;color:var(--text-2);cursor:pointer;transition:color .2s var(--ease);-webkit-tap-highlight-color:transparent;}
.lightbox-tabs button.active{color:var(--text-1);}

/* Collection page */
.collection-tabs-wrap{display:flex;align-items:center;gap:var(--space-1);min-width:0;}
.collection-tabs-wrap .tabs{flex:1;min-width:0;}
.tab.collection-tab{max-width:180px;overflow:hidden;text-overflow:ellipsis;}
#collectionListWrap .list{padding-top:var(--space-3);}
.collection-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:80px var(--space-3);text-align:center;color:var(--text-2);animation:cardIn .4s var(--ease) both;}
.collection-empty-state svg{width:var(--icon-lg);height:var(--icon-lg);color:var(--text-3);}
.collection-empty-state h3{color:var(--text-1);font-size:var(--text-2xl);font-weight:600;letter-spacing:-.3px;}
.collection-empty-state p{font-size:var(--text-md);max-width:280px;line-height:1.6;}
.collection-empty-state button{margin-top:var(--space-1);background:var(--accent);color:var(--text-1);padding:var(--space-1) var(--space-3);border-radius:var(--r-pill);font-size:var(--text-md);font-weight:600;transition:transform .15s var(--ease),background .2s var(--ease);}
.collection-empty-state button:hover{background:var(--accent-hover);transform:translateY(-1px);}
.picker-new-btn{display:flex;align-items:center;gap:var(--space-1);width:100%;padding:var(--space-2) var(--space-2);border-radius:var(--r-md);background:transparent;border:1px dashed var(--border-2);color:var(--accent);font-size:var(--text-lg);font-weight:600;font-family:inherit;cursor:pointer;text-align:left;transition:background .15s var(--ease),border-color .15s var(--ease);}
.picker-new-btn:hover{background:var(--accent-softer);border-color:var(--accent);}
.picker-new-btn svg{width:var(--icon-sm);height:var(--icon-sm);flex-shrink:0;}
.picker-list{display:flex;flex-direction:column;gap:var(--space-1);margin-top:2px;}
.picker-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2);border-radius:var(--r-md);background:var(--surface-2);cursor:pointer;transition:background .15s var(--ease);}
.picker-row:hover{background:var(--surface-hover);}
.picker-row .picker-check{width:var(--icon-md);height:var(--icon-md);border-radius:var(--r-sm);border:1.5px solid var(--border-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s var(--ease),border-color .15s var(--ease);}
.picker-row .picker-check svg{width:var(--icon-sm);height:var(--icon-sm);color:var(--text-1);opacity:0;transform:scale(.6);transition:opacity .12s var(--ease),transform .12s var(--ease);}
.picker-row.checked .picker-check{background:var(--accent);border-color:var(--accent);}
.picker-row.checked .picker-check svg{opacity:1;transform:scale(1);}
.picker-row .picker-name{flex:1;min-width:0;font-size:var(--text-lg);color:var(--text-1);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.picker-row .picker-count{font-size:var(--text-sm);color:var(--text-3);flex-shrink:0;}
.picker-empty{font-size:var(--text-md);color:var(--text-3);text-align:center;padding:var(--space-3) 0;}
.account-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2);background:var(--surface-2);border-radius:var(--r-md);margin-bottom:var(--space-1);}
.account-info{flex:1;min-width:0;}
.account-label{font-size:var(--text-sm);color:var(--text-2);letter-spacing:-.08px;margin-bottom:2px;}
.account-email{font-size:15px;color:var(--text-1);font-weight:600;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.account-logout{width:var(--icon-lg);height:var(--icon-lg);border-radius:var(--r-circle);display:flex;align-items:center;justify-content:center;color:var(--text-1);background:transparent;border:none;cursor:pointer;transition:background .2s var(--ease);flex-shrink:0;}
.account-logout:hover{background:var(--surface-glass-2);}
.account-logout svg{width:var(--icon-sm);height:var(--icon-sm);}
.account-manage{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2);background:var(--surface-2);border-radius:var(--r-lg);color:var(--text-1);font-size:15px;font-weight:500;font-family:inherit;text-align:left;transition:background .2s var(--ease);border:none;cursor:pointer;}
.account-manage:hover{background:var(--surface-account-hover);}
.account-badge{margin-left:auto;min-width:22px;height:22px;padding:0 var(--space-1);border-radius:var(--r-pill);background:var(--danger);color:var(--text-1);font-size:var(--text-sm);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.account-badge[hidden]{display:none;}
.avatar-badge{position:absolute;top:0;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--danger);color:var(--text-1);font-size:var(--text-sm);font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--black);pointer-events:none;opacity:0;transform:scale(.5);transition:opacity .2s var(--ease),transform .2s var(--ease);}
.avatar-badge.show{opacity:1;transform:scale(1);}
.account-manage svg{width:var(--icon-sm);height:var(--icon-sm);color:var(--text-2);flex-shrink:0;}

/* Manage sheet */
.manage-tabs{display:flex;gap:var(--space-2);padding:var(--space-2) 0 var(--space-2);overflow-x:auto;scrollbar-width:none;flex-shrink:0;margin-bottom:var(--space-2);}
.manage-tabs::-webkit-scrollbar{display:none;}
.manage-tab{flex:0 0 auto;white-space:nowrap;font-size:var(--text-xl);font-weight:600;letter-spacing:-.4px;color:var(--text-2);padding:2px 0;position:relative;background:transparent;border:none;font-family:inherit;cursor:pointer;transition:color .25s var(--ease);}
.manage-tab:hover{color:var(--text-hover);}
.manage-tab.active{color:var(--text-1);}
.manage-search-wrap{padding:0 0 var(--space-2);flex-shrink:0;}
.manage-search-wrap .search-field{width:100%;box-sizing:border-box;}
.manage-list{flex:1;min-height:0;overflow-y:auto;padding:0;margin:0;scrollbar-width:none;-ms-overflow-style:none;}
.manage-list::-webkit-scrollbar{display:none;width:0;height:0;}

/* Manage Row */
.manage-row {display: flex;align-items: center;gap: var(--space-1);padding: var(--space-1);background: var(--surface-2);border-radius: var(--r-md);margin-bottom: var(--space-1);transition: background .15s var(--ease), opacity .15s var(--ease);}
.manage-row.dragging{opacity:.4;}
.manage-row .drag-handle{width:var(--space-3);height:var(--space-3);flex-shrink:0;color:var(--text-3);cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center;}
.manage-row .drag-handle:active{cursor:grabbing;}
.manage-row .drag-handle svg{width:var(--icon-sm);height:var(--icon-sm);}
.manage-row .row-name,.manage-row .name{flex:1;min-width:0;font-size:var(--text-lg);color:var(--text-1);font-weight:500;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.manage-row .row-name input{width:100%;background:transparent;border:none;font-size:var(--text-lg);color:var(--text-1);font-weight:500;font-family:inherit;letter-spacing:-.2px;padding:0;outline:none;}
.manage-row .row-count,.manage-row .count{font-size:var(--text-sm);color:var(--text-3);padding:var(--space-0) var(--space-1);border-radius:var(--r-pill);background:var(--surface-2);flex-shrink:0;font-weight:600;}
.manage-row .row-btn{width:var(--space-4);height:var(--space-4);border-radius:var(--r-circle);display:flex;align-items:center;justify-content:center;color:var(--text-2);flex-shrink:0;transition:background .15s var(--ease),color .15s var(--ease);cursor:pointer;border:none;background:transparent;}
.manage-row .row-btn:hover{background:var(--surface-3);color:var(--text-1);}
.manage-row .row-btn.danger:hover{color:var(--heart);}
.manage-row .row-btn svg{width:var(--icon-sm);height:var(--icon-sm);}
.manage-row .move-up-btn,
.manage-row .move-down-btn{width:var(--space-4);height:var(--space-4);border-radius:var(--r-circle);display:flex;align-items:center;justify-content:center;color:var(--text-2);flex-shrink:0;background:transparent;border:none;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease);}
.manage-row .move-up-btn:hover:not(:disabled),
.manage-row .move-down-btn:hover:not(:disabled){background:var(--surface-3);color:var(--text-1);}
.manage-row .move-up-btn:disabled,
.manage-row .move-down-btn:disabled{opacity:.25;cursor:not-allowed;}

/* Hidden state */
.manage-row.is-hidden{opacity:.55;}
.manage-row.is-hidden .row-name{color:var(--text-2);}
.manage-row .row-btn.toggle-hidden-btn{color:var(--text-2);}
.manage-row.is-hidden .row-btn.toggle-hidden-btn{color:var(--accent);}
.picker-row.is-hidden{opacity:.5;}

.manage-empty{text-align:center;color:var(--text-3);font-size:var(--text-md);padding:40px var(--space-3);line-height:1.6;}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}

.loading-dots{display:flex;gap:var(--space-1);}
.auth-screen{min-height:100vh;align-items:center;justify-content:center;padding:var(--space-3);}
.auth-panel{width:100%;max-width:340px;}
.auth-logo{font-size:var(--text-3xl);margin-bottom:var(--space-3);text-align:center;}
.auth-form{display:flex;flex-direction:column;gap:var(--space-2);}
.auth-submit{width:100%;margin-top:6px;}
.form-error{color:var(--heart);font-size:var(--text-md);}
.inline-baseline{display:flex;align-items:baseline;}
.inline-center-gap{display:flex;align-items:center;gap:var(--space-1);}
.thumb-hint{font-size:var(--text-sm);color:var(--text-3);margin-top:var(--space-1);}
.text-muted{color:var(--text-3);}
.list-sentinel{height:1px;}
.spaced-top{margin-top:var(--space-1);}
.confirm-title{font-size:var(--text-xl);color:var(--text-1);}
.button-full{width:100%;}
.poster-preview-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

#modalOverlay .bookmark-modal .dropzone{min-height:170px;padding:var(--space-3);gap:var(--space-2);border-radius:var(--r-md);}
#modalOverlay .bookmark-modal .dropzone svg{width:var(--icon-lg);height:var(--icon-lg);}
#modalOverlay .bookmark-modal .thumb-strip{margin-top:0;}
#modalOverlay .bookmark-modal .mirror-add-row.spaced-top{margin-top:var(--space-2);}
#modalOverlay .bookmark-modal .text-muted{font-size:var(--text-sm);}

/* Add/Edit bookmark: three-step flow (Add) and sectioned single page (Edit) */
.wizard-steps{display:none;align-items:center;gap:var(--space-0);}
.bookmark-modal[data-mode="add"] .wizard-steps{display:flex;}
.wizard-steps span{font-size:var(--text-md);font-weight:400;color:var(--text-3);transition:color .25s var(--ease);}
.wizard-steps span.on{color:var(--text-1);}
.wizard-steps i{width:3px;height:3px;border-radius:50%;background:var(--text-3);opacity:.6;}
.form-step{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;}
.bookmark-modal[data-mode="add"] .form-step{display:none;}
.bookmark-modal[data-mode="add"] .form-step.active{display:flex;animation:stepInFwd .4s var(--ease);}
.bookmark-modal[data-mode="add"][data-dir="back"] .form-step.active{animation-name:stepInBack;}
.step-heading{font-size:var(--text-3xl);font-weight:700;letter-spacing:-.35px;line-height:1.15;}
.bookmark-modal[data-mode="edit"] .step-heading{display:none;}
.bookmark-modal #fieldTitle{font-size:var(--text-xl);}
.more-toggle{align-self:flex-start;display:flex;align-items:center;gap:var(--space-0);padding:var(--space-1) 0;font-size:var(--text-md);color:var(--text-2);transition:color .2s var(--ease);}
.more-toggle:hover{color:var(--text-1);}
.more-toggle svg{width:var(--icon-sm);height:var(--icon-sm);transition:transform .25s var(--ease);}
.more-toggle[aria-expanded="true"] svg{transform:rotate(90deg);}
@keyframes stepInFwd{from{opacity:0;transform:translateX(var(--space-2));}to{opacity:1;transform:none;}}
@keyframes stepInBack{from{opacity:0;transform:translateX(calc(var(--space-2) * -1));}to{opacity:1;transform:none;}}

/* Add button: gooey menu (Fetch by Code ID / Fetch by Link / Add Manually) */
.fab-scrim{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);}
.fab-scrim.show{opacity:1;visibility:visible;}
.bottom-nav:has(.add-fab.is-open){z-index:46;}
/* While the add menu is open, only the + button stays visible */
.bottom-nav{transition:transform .35s var(--ease),opacity .35s var(--ease),gap .35s var(--ease),padding .35s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);}
.bottom-nav > .nav-btn{transition:opacity .2s var(--ease),width .35s var(--ease),transform .15s var(--ease);}
.bottom-nav:has(.add-fab.is-open){gap:0;padding-left:var(--space-1);padding-right:var(--space-1);background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
.bottom-nav:has(.add-fab.is-open) > .nav-btn{width:0;opacity:0;overflow:hidden;pointer-events:none;}
.add-fab{position:relative;width:56px;height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.goo-defs{position:absolute;width:0;height:0;pointer-events:none;}
.fab-goo{position:absolute;left:50%;bottom:0;width:240px;height:210px;margin-left:-120px;pointer-events:none;filter:url(#gooAdd);}
.fab-goo{height:272px;}
.goo-blob{position:absolute;left:50%;background:var(--text-1);transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.goo-main{bottom:0;width:56px;height:56px;margin-left:-28px;border-radius:var(--r-circle);}
.goo-item{bottom:4px;width:184px;height:48px;margin-left:-92px;border-radius:var(--r-pill);transform:translateY(0) scale(.25,.55);}
.goo-item[data-i="0"]{transition-delay:90ms;}
.goo-item[data-i="1"]{transition-delay:45ms;}
.goo-item[data-i="2"]{transition-delay:0ms;}
.add-fab.is-open .goo-item[data-i="0"]{transform:translateY(-66px) scale(1);transition-delay:0ms;}
.add-fab.is-open .goo-item[data-i="1"]{transform:translateY(-128px) scale(1);transition-delay:45ms;}
.add-fab.is-open .goo-item[data-i="2"]{transform:translateY(-190px) scale(1);transition-delay:90ms;}
.fab-menu{position:absolute;left:50%;bottom:0;width:240px;height:56px;margin-left:-120px;pointer-events:none;z-index:1;}
.fab-option{position:absolute;left:50%;bottom:4px;width:184px;height:48px;margin-left:-92px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:var(--space-1);color:var(--black);font-size:var(--text-lg);font-weight:600;letter-spacing:-.2px;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .12s var(--ease);}
.fab-option svg{width:var(--icon-sm);height:var(--icon-sm);flex-shrink:0;}
.fab-option:active>*{opacity:.55;}
.add-fab.is-open .fab-option{opacity:1;pointer-events:auto;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .2s var(--ease) .14s;}
.add-fab.is-open .fab-option[data-i="0"]{transform:translateY(-66px);}
.add-fab.is-open .fab-option[data-i="1"]{transform:translateY(-128px);transition-delay:45ms,.19s;}
.add-fab.is-open .fab-option[data-i="2"]{transform:translateY(-190px);transition-delay:90ms,.24s;}
.add-fab .nav-btn.add-nav{position:relative;z-index:2;background:transparent;}
.add-fab .nav-btn.add-nav:hover,.add-fab .nav-btn.add-nav:active{transform:none;}
.add-nav svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.add-fab.is-open .add-nav svg{transform:rotate(45deg);}
.add-fab:has(.add-nav:active) .goo-main{transform:scale(.94);}

/* Fetch by Code ID panel */
.fetch-switch{align-self:flex-start;font-size:var(--text-md);color:var(--text-2);padding:var(--space-1) 0;transition:color .2s var(--ease);}
.fetch-switch:hover{color:var(--text-1);}
.fetch-panel{display:none;flex-direction:column;gap:var(--space-3);min-width:0;}
.bookmark-modal[data-mode="add"][data-amode="code"] #fetchPanel,
.bookmark-modal[data-mode="add"][data-amode="link"] #linkPanel{display:flex;animation:stepInFwd .4s var(--ease);}
.bookmark-modal[data-mode="add"][data-amode="code"] .form-step,
.bookmark-modal[data-mode="add"][data-amode="link"] .form-step{display:none;}
.bookmark-modal[data-mode="add"][data-amode="code"] .wizard-steps,
.bookmark-modal[data-mode="add"][data-amode="link"] .wizard-steps{display:none;}
#fetchCodeInput{text-transform:uppercase;font-size:var(--text-xl);}
#fetchLinkInput{font-size:var(--text-xl);}
#fetchCodeInput::placeholder{text-transform:none;}
.fetch-note{font-size:var(--text-sm);color:var(--text-3);line-height:1.5;}
.fetch-status{margin-top:var(--space-1);font-size:var(--text-md);color:var(--text-2);line-height:1.4;}
.fetch-status[hidden]{display:none;}
.fetch-status.error{color:var(--danger);}

/* Double-tap seek feedback */
.video-wrap video{touch-action:manipulation;}
/* No opacity/filter on this container: either one makes it a backdrop root and the label's blur would see nothing. Children fade instead. */
.video-seek-fx{position:absolute;inset:0;z-index:3;pointer-events:none;visibility:hidden;overflow:hidden;}
.video-seek-fx.show{visibility:visible;}
.video-seek-fx::before,.video-seek-fx > *{opacity:0;}
/* soft glow on the side that was tapped */
.video-seek-fx::before{content:'';position:absolute;top:0;bottom:0;width:42%;background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0));}
.video-seek-fx[data-dir="fwd"]::before{right:0;}
.video-seek-fx[data-dir="back"]::before{left:0;}
/* arrows stay on the tapped side; the "+10s" label sits in the centre of the video */
.video-seek-fx .seek-icons{position:absolute;top:50%;translate:0 -50%;display:flex;color:#fff;filter:drop-shadow(0 1px 6px rgba(0,0,0,.5));}
.video-seek-fx[data-dir="fwd"] .seek-icons{right:14%;}
.video-seek-fx[data-dir="back"] .seek-icons{left:14%;transform:scaleX(-1);}
.video-seek-fx .seek-icons svg{width:28px;height:28px;margin:0 -5px;}
.video-seek-fx b{position:absolute;left:50%;top:50%;translate:-50% -50%;box-sizing:border-box;display:grid;place-items:center;min-width:72px;aspect-ratio:1;padding:0 10px;border-radius:var(--r-circle);background:var(--surface-glass-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--text-1);font-size:var(--text-xl);font-weight:600;white-space:nowrap;}
.video-seek-fx.show::before,.video-seek-fx.show > *{animation:seekFx .65s var(--ease) both;}
@keyframes seekFx{0%{opacity:0;}15%{opacity:1;}70%{opacity:1;}100%{opacity:0;}}
@media(prefers-reduced-motion:reduce){.video-seek-fx.show::before,.video-seek-fx.show > *{animation-duration:.01s;}}

/* Account: Export / Import */
.account-sheet .sheet-body{gap:var(--space-1);}
.account-io{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);}
.account-io .account-manage{justify-content:center;gap:var(--space-1);}
#importOverlay{z-index:57;}
#importOverlay .confirm-inline svg{color:var(--accent);}
.import-msg{font-size:var(--text-md);color:var(--text-2);line-height:1.6;}
.import-msg b{color:var(--text-1);font-weight:600;}

/* Drag-to-seek: a faint fill across the whole video shows how far in you are */
.video-seek-progress{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .2s var(--ease);}
.video-wrap.is-scrubbing .video-seek-progress{opacity:1;}
.video-seek-progress i{display:block;height:100%;width:0;background:rgba(255,255,255,.1);border-right:1px solid rgba(255,255,255,.3);box-sizing:border-box;}

/* Add a note at the current time (lightbox + fullscreen) */
.video-note-box{position:absolute;left:var(--space-2);right:var(--space-2);bottom:calc(var(--space-4) + var(--space-3));z-index:4;display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-2);margin:0;border-radius:var(--r-md);background:var(--overlay-scrim-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-1);}
.video-note-time{flex:none;font-size:var(--text-md);font-weight:600;white-space:nowrap;}
.video-note-box input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--text-1);font:inherit;font-size:max(16px,var(--text-md));padding:var(--space-1) 0;}
.video-note-box input::placeholder{color:var(--text-2);}
.video-note-save{flex:none;width:var(--space-4);height:var(--space-4);border:none;background:transparent;color:var(--text-1);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.video-note-save[hidden]{display:none;}
.video-note-save svg{width:var(--icon-sm);height:var(--icon-sm);}
.video-note-save:disabled{opacity:.5;cursor:default;}
.video-note-cancel{flex:none;width:var(--space-4);height:var(--space-4);border:none;border-radius:var(--r-circle);background:transparent;color:var(--text-1);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.video-note-cancel svg{width:var(--icon-sm);height:var(--icon-sm);}

/* ---------- Merge duplicates (Manage banner + review sheet) ---------- */
.dup-hint{font-size:var(--text-md);color:var(--text-2);line-height:1.45;}
.dup-list{display:flex;flex-direction:column;gap:var(--space-2);}
.dup-group{display:flex;flex-direction:column;gap:var(--space-0);padding:var(--space-1);border-radius:var(--r-md);background:var(--surface-2);}
.dup-opt{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1);border-radius:var(--r-sm);cursor:pointer;font-size:var(--text-lg);font-weight:500;letter-spacing:-.2px;transition:background .15s var(--ease);}
.dup-opt:hover{background:var(--surface-3);}
.dup-opt input{flex-shrink:0;width:18px;height:18px;margin:0;accent-color:var(--accent);}
.dup-opt .dup-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dup-opt .dup-count{flex-shrink:0;font-size:var(--text-sm);font-weight:600;color:var(--text-3);}
.dup-shared{padding:var(--space-0) var(--space-1);font-size:var(--text-sm);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dup-group-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-1);padding:var(--space-0) var(--space-1);}
.dup-group-foot span{font-size:var(--text-sm);color:var(--text-3);}
.dup-merge-btn{height:34px;padding:0 var(--space-2);border-radius:var(--r-pill);background:var(--accent);color:var(--text-1);font-size:var(--text-md);font-weight:600;transition:background .2s var(--ease),opacity .2s var(--ease);}
.dup-merge-btn:hover{background:var(--accent-hover);}
.dup-merge-btn:disabled{opacity:.5;pointer-events:none;}
.dup-empty{padding:var(--space-4) 0;text-align:center;font-size:var(--text-md);color:var(--text-2);}
#manageConfirmOverlay .confirm-inline svg.is-safe{color:var(--accent);}

/* ---------- Statistics sheet ---------- */
/* Every .st-sec fades up when it scrolls into view (statistics.js adds .is-in); bars, rings, lines and counters start then.
   .st-play marks chart areas that can replay on their own (switching Added / Growth). */
.stats{--st-1:var(--accent);--st-2:#30d5c8;--st-3:#a78bfa;--st-4:#fbbf24;--st-5:#fb7185;--st-6:#6b7280;display:flex;flex-direction:column;gap:var(--space-4);padding-bottom:var(--space-2);}
.st-sec{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease);}
.st-sec.is-in{opacity:1;transform:none;}
.st-title{margin-bottom:var(--space-2);font-size:var(--text-lg);font-weight:600;letter-spacing:-.2px;}
.st-note{margin-top:var(--space-1);font-size:var(--text-sm);color:var(--text-3);line-height:1.4;}
.st-empty{padding:var(--space-4) 0;text-align:center;font-size:var(--text-md);color:var(--text-2);}

/* Hero */
.st-hero{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-0);padding:var(--space-3) var(--space-3) var(--space-2);border-radius:var(--r-lg);overflow:hidden;background:radial-gradient(120% 150% at 0% 0%,rgba(0,136,255,.26),transparent 62%),var(--surface-2);}
.st-hero-num{font-size:60px;line-height:1;font-weight:700;letter-spacing:-2.4px;font-variant-numeric:tabular-nums;}
.st-hero-label{font-size:var(--text-md);color:var(--text-2);}
.st-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-2);}
.st-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);font-size:var(--text-sm);font-weight:600;color:var(--text-1);opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s);}
.is-in .st-chip{opacity:1;transform:none;}
.st-chip.up{background:rgba(48,209,88,.16);color:#4ade80;}
.st-chip.down{background:rgba(251,44,54,.14);color:var(--danger);}

/* Progress rings */
.st-rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:var(--space-1);}
.st-ring{--circ:175.93px;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-1);border-radius:var(--r-md);background:var(--surface-2);}
.st-ring-svg{position:relative;width:64px;height:64px;}
.st-ring-svg svg{display:block;width:100%;height:100%;transform:rotate(-90deg);}
.st-ring circle{fill:none;stroke-width:6;stroke-linecap:round;}
.st-ring .bg{stroke:var(--surface-3);}
.st-ring .fg{stroke:var(--c,var(--accent));stroke-dasharray:var(--circ);stroke-dashoffset:var(--circ);transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1) var(--d,0s);}
.is-in .st-ring .fg{stroke-dashoffset:calc(var(--circ) * (1 - var(--p)));}
.st-ring-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--text-md);font-weight:700;font-variant-numeric:tabular-nums;}
.st-ring-label{font-size:var(--text-sm);color:var(--text-2);text-align:center;line-height:1.25;}

/* Insight sentences */
.st-insights{display:flex;flex-direction:column;gap:var(--space-1);}
.st-insight{display:flex;gap:var(--space-2);align-items:stretch;padding:var(--space-2);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--text-md);line-height:1.5;color:var(--text-2);opacity:0;transform:translateX(-12px);transition:opacity .55s var(--ease) var(--d,0s),transform .65s var(--ease) var(--d,0s);}
.is-in .st-insight{opacity:1;transform:none;}
.st-insight::before{content:'';flex-shrink:0;width:4px;border-radius:2px;background:var(--c,var(--accent));}
.st-insight b{font-weight:600;color:var(--text-1);}

/* Activity chart (Added / Growth) */
.st-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1);flex-wrap:wrap;margin-bottom:var(--space-2);}
.st-head .st-title{margin:0;}
.st-seg{position:relative;isolation:isolate;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:var(--r-pill);background:var(--surface-2);}
.st-seg-pill{position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:var(--r-pill);background:var(--surface-3);transition:transform .34s var(--ease);}
.st-seg[data-active="growth"] .st-seg-pill{transform:translateX(100%);}
.st-seg button{padding:6px 14px;border-radius:var(--r-pill);font-size:var(--text-sm);font-weight:600;color:var(--text-2);transition:color .2s var(--ease);}
.st-seg button.on{color:var(--text-1);}
.st-readout{display:flex;align-items:baseline;gap:var(--space-1);min-height:36px;margin-bottom:var(--space-1);color:var(--text-2);font-size:var(--text-md);}
.st-readout b{font-size:28px;font-weight:700;letter-spacing:-.8px;color:var(--text-1);font-variant-numeric:tabular-nums;}
.st-bars{display:grid;grid-template-columns:repeat(var(--cols,12),minmax(0,1fr));gap:4px;height:150px;}
.st-bars.days{--cols:7;gap:8px;height:130px;}
.st-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:0;background:none;color:inherit;font:inherit;cursor:pointer;}
.st-col .st-n{height:12px;font-size:10px;color:var(--text-3);font-variant-numeric:tabular-nums;}
.st-col .st-colbar{flex:1;width:100%;display:flex;align-items:flex-end;}
.st-col i{display:block;width:100%;height:0;border-radius:6px 6px 3px 3px;background:var(--accent);opacity:.4;transition:height .9s cubic-bezier(.2,.9,.25,1) var(--d,0s),opacity .25s var(--ease);}
.st-play.is-in .st-col i{height:var(--h);min-height:3px;}
.st-col i.is-zero{background:var(--surface-3);opacity:1;}
.st-col.sel i,.st-col.top i{opacity:1;}
.st-col em{font-size:10px;font-style:normal;color:var(--text-3);transition:color .25s var(--ease);}
.st-col.sel em,.st-col.top em{color:var(--text-1);}
.st-line{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y;}
.st-line .grid{stroke:var(--surface-3);stroke-width:1;stroke-dasharray:3 5;}
.st-line .area{fill:url(#stGrad);opacity:0;transition:opacity 1.1s var(--ease) .45s;}
.st-line .ln{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1);}
.st-line .dot{fill:var(--accent);stroke:var(--surface-1,#000);stroke-width:3;opacity:0;transition:opacity .4s var(--ease) 1.1s;}
.st-line .hit{fill:transparent;cursor:pointer;}
.st-play.is-in .st-line .area,.st-play.is-in .st-line .dot{opacity:1;}
.st-play.is-in .st-line .ln{stroke-dashoffset:0;}
.st-axis{display:flex;justify-content:space-between;margin-top:var(--space-1);font-size:10px;color:var(--text-3);}

/* Share of library (stacked bar + legend) */
.st-stack{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden;background:var(--surface-3);}
.st-stack i{display:block;height:100%;width:0;background:var(--c);transition:width 1s cubic-bezier(.2,.8,.2,1) var(--d,0s);}
.is-in .st-stack i{width:var(--to);}
.st-legend{display:flex;flex-direction:column;gap:var(--space-1);margin:var(--space-2) 0 0;padding:0;list-style:none;}
.st-legend li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 44px;align-items:center;gap:var(--space-1);font-size:var(--text-md);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s);}
.is-in .st-legend li{opacity:1;transform:none;}
.st-legend .dot{width:10px;height:10px;border-radius:50%;background:var(--c);}
.st-legend .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-legend .ct{font-size:var(--text-sm);color:var(--text-3);font-variant-numeric:tabular-nums;}
.st-legend .pc{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;}

/* Ranked lists */
.st-rank{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:6px var(--space-1);align-items:center;font-size:var(--text-md);opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s);}
.is-in .st-rank{opacity:1;transform:none;}
.st-rank + .st-rank{margin-top:var(--space-2);}
.st-rank .rk{font-size:var(--text-sm);font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums;}
.st-rank .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-rank .vl{font-size:var(--text-sm);font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums;}
.st-rank .vl small{margin-left:4px;font-size:inherit;font-weight:500;color:var(--text-3);}
.st-rank .tk{grid-column:2 / -1;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;}
.st-rank .tk i{display:block;height:100%;width:0;border-radius:3px;background:var(--c,var(--accent));transition:width 1s cubic-bezier(.2,.8,.2,1) var(--d,0s);}
.is-in .st-rank .tk i{width:var(--to);}
.st-old{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);padding:var(--space-1) 0;font-size:var(--text-md);opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s);}
.is-in .st-old{opacity:1;transform:none;}
.st-old + .st-old{border-top:1px solid var(--surface-3);}
.st-old .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-old .ag{flex-shrink:0;font-size:var(--text-sm);color:var(--text-3);}

/* Link health card */
.st-links{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2);border-radius:var(--r-md);background:var(--surface-2);}
.st-links .st-stack{height:10px;}
.st-links-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);font-size:var(--text-md);color:var(--text-2);}
.st-links-row b{color:var(--text-1);font-weight:600;}
.st-link-btn{flex-shrink:0;padding:6px 14px;border-radius:var(--r-pill);background:var(--surface-3);font-size:var(--text-sm);font-weight:600;color:var(--text-1);transition:background .2s var(--ease);}
.st-link-btn:hover{background:var(--surface-glass-2,var(--surface-3));}

@media (prefers-reduced-motion: reduce){
  .st-sec,.st-chip,.st-insight,.st-legend li,.st-rank,.st-old,.st-stack i,.st-rank .tk i,.st-col i,.st-ring .fg,.st-line .ln,.st-line .area,.st-line .dot{transition:none !important;}
  .st-sec,.st-chip,.st-insight,.st-legend li,.st-rank,.st-old{opacity:1;transform:none;}
}

/* ---------- Link check sheet ---------- */
.lc-toolbar{display:flex;flex-direction:column;gap:var(--space-1);padding-bottom:var(--space-2);}
.lc-summary{font-size:var(--text-md);color:var(--text-2);line-height:1.5;}
.lc-summary b{font-weight:600;color:var(--text-1);}
.lc-summary .lc-dead{color:var(--danger);}
.lc-progress{height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;}
.lc-progress[hidden]{display:none;}
.lc-progress i{display:block;height:100%;width:var(--p,0%);background:var(--accent);transition:width .25s var(--ease);}
.lc-row{padding-left:var(--space-2);}
.lc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-0);}
.lc-title{font-size:var(--text-lg);font-weight:500;letter-spacing:-.2px;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lc-sub{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--text-sm);color:var(--text-3);}
.lc-sub .lc-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lc-badge{flex-shrink:0;padding:1px 7px;border-radius:var(--r-pill);font-size:10px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;}
.lc-badge.dead{background:rgba(251,44,54,.14);color:var(--danger);}
.lc-badge.unsure{background:rgba(255,184,0,.14);color:#ffb800;}
.lc-badge.is-busy{background:var(--surface-3);color:var(--text-2);}
.lc-empty{padding:var(--space-4) var(--space-2);text-align:center;font-size:var(--text-md);color:var(--text-2);line-height:1.5;}
.lc-group-label{margin:var(--space-1) 0 var(--space-0);font-size:var(--text-sm);font-weight:600;letter-spacing:.2px;color:var(--text-3);text-transform:uppercase;}

/* Trash */
.trash-sql{margin:var(--space-2) 0;padding:var(--space-2);background:var(--surface-2);border-radius:var(--r-md);font:500 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-1);white-space:pre-wrap;word-break:break-word;user-select:all;text-align:left;}
.trash-clear{color:var(--danger);}
.trash-clear:disabled{opacity:.4;pointer-events:none;}
.trash-actions{position:absolute;top:var(--space-1);right:var(--space-1);display:flex;gap:6px;z-index:3;}
.trash-act{width:var(--space-4);height:var(--space-4);padding:0;border:0;border-radius:var(--r-pill);background:var(--surface-glass-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:inline-flex;align-items:center;justify-content:center;color:var(--text-1);cursor:pointer;}
.trash-act svg{width:var(--icon-sm);height:var(--icon-sm);}
.trash-act.is-danger{color:var(--danger);}
.trash-list .card-title{cursor:default;}
.trash-list .slide-track{filter:grayscale(1);}

/* Bulk edit */
.bulk-top,.bulk-bar{display:none;}
body.bulk-mode .bulk-top{display:flex;}
body.bulk-mode .bulk-bar{display:flex;}
body.bulk-mode .bottom-nav{display:none;}
body.bulk-mode .header{visibility:hidden;}
.bulk-top{position:fixed;top:0;left:0;right:0;z-index:41;box-sizing:border-box;min-height:72px;padding-top:env(safe-area-inset-top, 0px);align-items:center;justify-content:space-between;gap:var(--space-2);padding-left:var(--space-2);padding-right:var(--space-2);background:var(--overlay-header);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-1);}
.bulk-count{font-size:var(--text-lg);font-weight:700;color:var(--text-1);}
.bulk-link{font:inherit;font-size:var(--text-lg);font-weight:500;color:var(--accent);padding:var(--space-1) 0;cursor:pointer;}
/* Same pill as the bottom nav, with icon-only buttons */
.bulk-bar{position:fixed;left:50%;bottom:var(--space-3);translate:-50% 0;z-index:36;align-items:center;gap:var(--space-3);background:var(--surface-glass-1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border-2);border-radius:var(--r-pill);padding:var(--space-2) var(--space-3);box-shadow:0 12px 32px var(--overlay-shadow);}
.bulk-act.is-danger{color:var(--danger);opacity:1;}
.bulk-bar.is-empty .bulk-act{opacity:.3;pointer-events:none;}
body.bulk-mode .card-media::before{content:'';position:absolute;top:var(--space-1);left:var(--space-1);width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:3;transition:background .15s var(--ease),border-color .15s var(--ease);}
body.bulk-mode .card.is-selected .card-media::before{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;}
body.bulk-mode .card.is-selected .card-media{outline:2px solid var(--accent);outline-offset:-2px;}
body.bulk-mode .card{cursor:pointer;}
.picker-row .picker-count.is-on{color:var(--accent);}

/* Duplicate bookmarks */
.dup-opt .lc-main{flex:1;min-width:0;}
.dupb-actions{display:flex;align-items:center;gap:var(--space-1);}
.dupb-ghost{height:34px;padding:0 var(--space-2);border-radius:var(--r-pill);background:var(--surface-3);color:var(--text-2);font-size:var(--text-md);font-weight:600;}
.dupb-ghost:hover{color:var(--text-1);}

/* Cast / Tags page: the big title is the name; a name that is too wide runs as a marquee, faded on both sides like the tabs (.fade-l / .fade-r) */
.entity-title{overflow:hidden;white-space:nowrap;padding-bottom:var(--space-0);margin-bottom:calc(-1 * var(--space-0));}
.entity-title .entity-text{display:inline-block;flex:none;}
.entity-track{display:inline-flex;animation:entityMarquee var(--mq-dur,10s) linear infinite;will-change:transform;}
.entity-track .entity-text{padding-right:var(--space-4);}
@keyframes entityMarquee{to{transform:translateX(calc(-1 * (var(--mq-w) + var(--space-4))));}}
@media (prefers-reduced-motion:reduce){.entity-track{animation:none;}}

/* Cast / Tags avatar: round slot (placeholder icon like the pills, or pictures that fade one into the next); tap it to open the Avatar sheet */
.entity-head{display:flex;align-items:center;gap:var(--space-2);}
.entity-head-text{min-width:0;flex:1;}
.entity-avatar{order:2;position:relative;flex:none;width:64px;height:64px;margin-block:-2px;border-radius:50%;overflow:hidden;background:var(--surface-2,var(--surface-1));border:1px solid var(--border-1,var(--border-2));color:var(--text-3);display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;cursor:pointer;}
.entity-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .8s ease;}
.entity-avatar img.on{opacity:1;}
.entity-avatar-ph svg{width:30px;height:30px;display:block;}
@media (prefers-reduced-motion:reduce){.entity-avatar img{transition:none;}}
/* Avatar sheet */
.avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);}
.avatar-thumb{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2,var(--surface-1));border:1px solid var(--border-1,var(--border-2));padding:0;}
.avatar-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.avatar-thumb-x{position:absolute;top:var(--space-1);right:var(--space-1);width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.avatar-thumb-x svg{width:14px;height:14px;}
.avatar-add{display:flex;align-items:center;justify-content:center;border-style:dashed;color:var(--text-2);cursor:pointer;}
.avatar-add svg{width:26px;height:26px;}
.avatar-link{display:flex;align-items:center;gap:var(--space-2);}
.avatar-link.field input{flex:1;min-width:0;width:auto;}