/* ═══════════════════════════════════════════════════════════════
   AditiVerse — design tokens
   Palette: pastel pink / pastel yellow / pastel green / white
   Display: Baloo 2 (rounded, warm)   Body: Nunito (soft, friendly)
   Signature: the "verse ring" — a conic pastel gradient used ONLY
   on the FAB, active-nav pip, avatar ring and storage ring, so it
   reads as one deliberate motif rather than scattered color.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --pink:      #FFD9E8;
  --pink-deep: #FF8FBB;
  --yellow:    #FFF3C7;
  --yellow-deep:#FFC94D;
  --green:     #DBF6E3;
  --green-deep:#6FCF97;
  --cream:     #FFFDF9;
  --white:     #FFFFFF;
  --ink:       #3A3145;
  --ink-soft:  #8C8496;
  --ink-faint: #B7AFC0;
  --line:      #F1E7EE;
  --danger:    #FF6B81;

  --verse: conic-gradient(from 200deg, #FF9FC7, #FFCF56, #79D99A, #FF9FC7);
  --verse-flat: linear-gradient(135deg, #FF9FC7, #FFCF56 55%, #79D99A);

  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow-sm: 0 4px 14px -6px rgba(150,110,140,.18);
  --shadow-md: 0 12px 32px -12px rgba(150,110,140,.28);
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button{font-family:inherit;}
input,select{font-family:inherit;}
::selection{background:var(--pink);}

/* ═══════════════ LOGIN ═══════════════ */
.auth-screen{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 20px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 15% 8%, var(--yellow) 0%, transparent 42%),
    radial-gradient(circle at 88% 18%, var(--pink) 0%, transparent 45%),
    radial-gradient(circle at 20% 92%, var(--green) 0%, transparent 45%),
    var(--cream);
}
.auth-blob{position:absolute; border-radius:50%; filter:blur(2px); opacity:.55; z-index:0;}
.auth-blob.b1{width:180px;height:180px; background:var(--yellow); top:-60px; left:-50px;}
.auth-blob.b2{width:220px;height:220px; background:var(--pink); bottom:-80px; right:-70px;}
.auth-blob.b3{width:140px;height:140px; background:var(--green); bottom:20%; left:-60px;}

.auth-card{
  position:relative; z-index:1;
  width:100%; max-width:380px;
  background:var(--white);
  border-radius:32px;
  padding:36px 28px 30px;
  box-shadow:var(--shadow-md);
  text-align:center;
}
.auth-logo-wrap{
  width:132px; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
}
.auth-logo{width:100%; height:auto; object-fit:contain; display:block;}
.auth-sub{color:var(--ink-soft); font-size:.86rem; margin:0 0 22px; font-weight:600;}

.auth-err{
  display:none; align-items:center; gap:8px; text-align:left;
  background:#FFE3E9; color:#C43A57; border:1px solid #FFC3D0;
  border-radius:var(--r-sm); padding:10px 12px; font-size:.82rem; font-weight:700;
  margin-bottom:14px;
}
.auth-err.show{display:flex;}

.auth-form{text-align:left;}
.ig{margin-bottom:14px;}
.ig label{display:block; font-size:.76rem; font-weight:800; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px;}
.inp{
  width:100%; padding:13px 14px; border-radius:var(--r-sm);
  border:2px solid var(--line); background:var(--cream);
  font-size:.95rem; font-weight:600; color:var(--ink);
  transition:.15s;
}
.inp:focus{outline:none; border-color:var(--pink-deep); background:var(--white);}

.btn-verse{
  border:none; cursor:pointer; width:100%;
  background:var(--verse-flat); color:#4A2A3A;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  padding:14px 18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:var(--shadow-sm);
  transition:transform .12s;
}
.btn-verse:active{transform:scale(.97);}
.btn-verse:focus-visible{outline:3px solid var(--pink-deep); outline-offset:2px;}
.btn-full{width:100%;}
.spinner{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(74,42,58,.3);border-top-color:#4A2A3A;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.auth-foot{position:relative;z-index:1; margin-top:22px; font-size:.72rem; color:var(--ink-faint); font-weight:700;}

/* ═══════════════ APP SHELL ═══════════════ */
.app-shell{
  max-width:560px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--cream);
  position:relative;
}

.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; background:rgba(255,253,249,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.icon-btn{
  border:none; background:var(--white); width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; color:var(--ink);
  cursor:pointer; box-shadow:var(--shadow-sm);
}
.icon-btn.ghost{background:var(--white);}
.icon-btn.ghost.light{background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px);}
.icon-btn:focus-visible{outline:2px solid var(--pink-deep);}

.brand{display:flex; align-items:center; gap:8px; flex:1; justify-content:center;}
.brand-logo{height:34px; width:auto; object-fit:contain; display:block;}

.selbar{background:var(--ink); }
.selbar .icon-btn{background:rgba(255,255,255,.15); color:#fff;}
.sel-count{flex:1; text-align:center; color:#fff; font-weight:800; font-family:var(--font-display); letter-spacing:.3px;}

.crumbwrap{padding:10px 16px 0; display:flex; gap:6px; flex-wrap:wrap; align-items:center; min-height:4px;}
.crumb{
  border:none; background:none; color:var(--ink-soft); font-weight:700; font-size:.82rem;
  padding:4px 2px; cursor:pointer; display:flex; align-items:center; gap:4px;
}
.crumb.current{color:var(--ink);}
.crumb-sep{color:var(--ink-faint); font-size:.75rem;}

.views{flex:1; padding-bottom:120px;}
.view{display:none; padding:14px 16px 6px; animation:fadeIn .18s ease;}
.view.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

.view-title{font-family:var(--font-display); font-weight:800; font-size:1.3rem; margin:2px 0 14px;}

/* chips */
.chiprow{display:flex; gap:8px; overflow-x:auto; padding-bottom:12px; scrollbar-width:none;}
.chiprow::-webkit-scrollbar{display:none;}
.chiprow.tight{padding-bottom:0;}
.chip{
  border:2px solid var(--line); background:var(--white); color:var(--ink-soft);
  font-weight:800; font-size:.8rem; padding:8px 16px; border-radius:999px; white-space:nowrap;
  cursor:pointer; transition:.15s;
}
.chip.active{background:var(--verse-flat); border-color:transparent; color:#4A2A3A;}

/* grid */
.grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:4px;
}
.tile{
  position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  background:var(--line); cursor:pointer; -webkit-user-select:none; user-select:none;
}
.tile img{width:100%; height:100%; object-fit:cover; display:block;}
.tile .tile-file{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; background:linear-gradient(160deg, var(--yellow), var(--pink));
  color:#6b4a55; font-weight:800; font-size:.62rem; text-align:center; padding:6px;
}
.tile .tile-file i{font-size:1.5rem;}
.tile-badge{position:absolute; top:5px; left:5px; background:rgba(0,0,0,.45); color:#fff; font-size:.62rem; font-weight:800; padding:2px 6px; border-radius:6px;}
.tile-fav{position:absolute; top:5px; right:5px; color:#fff; font-size:.85rem; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));}
.tile-check{
  position:absolute; inset:0; background:rgba(58,49,69,.42); display:none;
  align-items:flex-start; justify-content:flex-end; padding:6px;
}
.tile.selectable .tile-check{display:flex;}
.tile-check i{font-size:1.3rem; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4);}
.tile.selected{outline:3px solid var(--pink-deep); outline-offset:-3px;}
.tile.selected .tile-check i{color:var(--pink-deep);}
.tile.selected .tile-check i::before{content:"\f26a";} /* check-circle-fill fallback handled in JS */

/* state blocks */
.state-block{text-align:center; padding:56px 20px; color:var(--ink-soft);}
.state-icon{font-size:2.4rem; color:var(--pink-deep); margin-bottom:10px; display:block;}
.state-title{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1.05rem; margin-bottom:4px;}
.state-sub{font-size:.85rem; font-weight:600; max-width:260px; margin:0 auto 14px;}
.verse-spinner{
  width:38px; height:38px; margin:0 auto 14px; border-radius:50%;
  background:var(--verse); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  animation:rotate 1s linear infinite;
}
@keyframes rotate{to{transform:rotate(360deg);}}

.btn-verse-outline{
  border:2px solid var(--pink-deep); background:var(--white); color:#C4507B;
  font-weight:800; font-size:.85rem; padding:11px 18px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn-verse-outline.sm{padding:7px 14px; font-size:.78rem;}

/* search */
.search-field{
  display:flex; align-items:center; gap:8px; background:var(--white); border:2px solid var(--line);
  border-radius:999px; padding:11px 16px; margin-bottom:14px;
}
.search-field i{color:var(--ink-faint);}
.search-field input{flex:1; border:none; outline:none; background:none; font-size:.92rem; font-weight:600; color:var(--ink);}
.clear-x{border:none; background:none; color:var(--ink-faint); font-size:1rem; cursor:pointer;}

.filter-panel{background:var(--white); border-radius:var(--r-md); padding:14px; margin-bottom:14px; box-shadow:var(--shadow-sm);}
.fp-row{margin-bottom:12px;}
.fp-row:last-child{margin-bottom:0;}
.fp-label{display:block; font-size:.72rem; font-weight:900; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.5px; margin-bottom:7px;}
.modal-select{
  width:100%; padding:10px 12px; border-radius:var(--r-sm); border:2px solid var(--line);
  background:var(--cream); font-weight:700; font-size:.86rem; color:var(--ink);
}
.search-count{font-size:.78rem; font-weight:800; color:var(--ink-soft); margin-bottom:8px;}

/* albums */
.albums-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.album-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.album-card{
  border-radius:var(--r-md); overflow:hidden; background:var(--white); box-shadow:var(--shadow-sm); cursor:pointer;
}
.album-cover{
  aspect-ratio:4/3; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); overflow:hidden;
}
.album-cover img{width:100%; height:100%; object-fit:cover;}
.album-cover.single{grid-template-columns:1fr;}
.album-cover-empty{
  display:flex; align-items:center; justify-content:center; height:100%;
  background:linear-gradient(160deg, var(--green), var(--yellow)); color:#4d7a5f; font-size:1.6rem;
}
.album-meta{padding:10px 12px;}
.album-name{font-weight:800; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.album-count{font-size:.74rem; color:var(--ink-soft); font-weight:700;}

/* profile */
.profile-card{text-align:center; padding:24px 0 8px;}
.profile-avatar-ring{width:96px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;}
.profile-avatar{width:100%; height:auto; object-fit:contain; display:block;}
.profile-email{font-weight:800; font-size:1rem;}
.profile-tag{font-size:.78rem; color:var(--ink-soft); font-weight:700; margin-top:2px;}

.me-row{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--white); border:none; border-radius:var(--r-md); padding:14px 16px; margin-top:12px;
  box-shadow:var(--shadow-sm); cursor:pointer; color:var(--ink);
}
.me-row.static{cursor:default;}
.me-row.danger{color:#C4304B;}
.me-ico{font-size:1.2rem; color:var(--pink-deep); width:22px; text-align:center;}
.me-row.danger .me-ico{color:#C4304B;}
.me-row-text{flex:1; display:flex; flex-direction:column;}
.me-row-title{font-weight:800; font-size:.9rem;}
.me-row-sub{font-size:.74rem; color:var(--ink-soft); font-weight:700;}

/* FAB + bottom nav */
.fab{
  position:fixed; right:20px; bottom:92px; z-index:40;
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  background:var(--verse); color:#fff; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(255,143,187,.6);
}
.fab:active{transform:scale(.94);}

.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:35;
  max-width:560px; margin:0 auto;
  display:flex; background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.nav-btn{
  flex:1; border:none; background:none; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px; color:var(--ink-faint); font-size:.66rem; font-weight:800; cursor:pointer;
}
.nav-btn i{font-size:1.15rem;}
.nav-btn.active{color:var(--pink-deep);}

.seltoolbar{
  position:fixed; left:0; right:0; bottom:0; z-index:36; display:none;
  max-width:560px; margin:0 auto; background:var(--ink);
  padding:10px 8px calc(10px + env(safe-area-inset-bottom)); gap:4px; justify-content:space-around;
}
.seltoolbar.show{display:flex;}
.seltoolbar button{
  border:none; background:none; color:#fff; display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:.66rem; font-weight:800; padding:6px 4px; cursor:pointer;
}
.seltoolbar button i{font-size:1.1rem;}
.seltoolbar button.danger{color:#FF9DAE;}

/* ═══════════════ FULL-SCREEN VIEWER ═══════════════ */
.viewer{
  position:fixed; inset:0; z-index:80; background:#151018; display:none;
  flex-direction:column;
}
.viewer.open{display:flex;}
.viewer-top{display:flex; justify-content:space-between; align-items:center; padding:14px; padding-top:calc(14px + env(safe-area-inset-top));}
.viewer-stage{
  flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; touch-action:pan-y;
}
.viewer-media{max-width:100%; max-height:100%; object-fit:contain; -webkit-user-select:none; user-select:none;}
.viewer-filecard{display:flex; flex-direction:column; align-items:center; gap:10px; color:#fff; text-align:center; padding:20px;}
.viewer-filecard i{font-size:3rem; color:var(--yellow);}
.viewer-counter{text-align:center; color:rgba(255,255,255,.6); font-size:.76rem; font-weight:700; padding-bottom:6px;}
.viewer-bottom{
  display:flex; justify-content:space-around; padding:10px 8px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg, rgba(0,0,0,.35), transparent);
}
.viewer-bottom button{
  border:none; background:none; color:#fff; display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:.68rem; font-weight:700; cursor:pointer;
}
.viewer-bottom button i{font-size:1.15rem;}
.viewer-bottom button.danger{color:#FF9DAE;}
.viewer-top .bi-heart-fill{color:var(--pink-deep);}

/* ═══════════════ BOTTOM SHEETS ═══════════════ */
.sheet-overlay{
  position:fixed; inset:0; z-index:90; background:rgba(58,49,69,.42); display:none;
  align-items:flex-end; justify-content:center;
}
.sheet-overlay.open{display:flex;}
.sheet{
  width:100%; max-width:560px; background:var(--white); border-radius:26px 26px 0 0;
  padding:10px 20px calc(20px + env(safe-area-inset-bottom)); max-height:86vh; overflow-y:auto;
  position:relative; animation:slideUp .22s ease;
}
@keyframes slideUp{from{transform:translateY(24px); opacity:.4;} to{transform:none; opacity:1;}}
.sheet-handle{width:38px; height:5px; border-radius:3px; background:var(--line); margin:6px auto 12px;}
.sheet-close{position:absolute; top:10px; left:14px;}
.sheet-title{font-family:var(--font-display); font-weight:800; font-size:1.1rem; text-align:center; margin:0 0 16px;}

.detail-thumb-wrap{width:100%; aspect-ratio:16/10; border-radius:var(--r-md); overflow:hidden; background:var(--line); margin-top:26px;}
.detail-thumb{width:100%; height:100%; object-fit:cover;}
.detail-name{font-weight:800; font-size:1rem; margin:14px 0 6px; word-break:break-word;}
.detail-row{display:flex; align-items:center; gap:9px; font-size:.84rem; font-weight:700; color:var(--ink-soft); padding:6px 0;}
.detail-row i{color:var(--pink-deep); width:16px;}
.detail-url-box{
  display:flex; align-items:center; gap:8px; background:var(--cream); border-radius:var(--r-sm);
  padding:10px 12px; margin:10px 0 16px;
}
.detail-url-box i{color:var(--ink-faint);}
.detail-url{flex:1; font-size:.72rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600;}
.pill-btn{border:none; background:var(--verse-flat); color:#4A2A3A; font-weight:800; font-size:.72rem; padding:6px 12px; border-radius:999px; cursor:pointer;}
.detail-actions{border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:16px;}
.detail-actions button{
  width:100%; display:flex; align-items:center; gap:10px; border:none; background:none; padding:13px 2px;
  font-weight:700; font-size:.9rem; color:var(--ink); cursor:pointer; border-bottom:1px solid var(--line);
}
.detail-actions button:last-child{border-bottom:none;}
.detail-actions button i:first-child{color:var(--pink-deep); width:18px;}
.detail-actions button i:last-child{margin-left:auto; color:var(--ink-faint); font-size:.8rem;}
.detail-actions button.danger, .detail-actions button.danger i:first-child{color:#C4304B;}

/* storage sheet */
.storage-ring-wrap{position:relative; width:180px; height:180px; margin:6px auto 18px;}
.storage-ring{width:100%; height:100%; transform:rotate(-90deg);}
.storage-ring circle{fill:none; stroke-width:12; stroke-linecap:round;}
.ring-bg{stroke:var(--line);}
.ring-photos{stroke:var(--pink-deep);}
.ring-videos{stroke:var(--yellow-deep);}
.ring-others{stroke:var(--green-deep);}
.storage-ring-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ring-big{font-family:var(--font-display); font-weight:800; font-size:1.3rem;}
.ring-small{font-size:.72rem; color:var(--ink-soft); font-weight:700;}
.storage-legend{margin-bottom:16px;}
.leg-row{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.86rem; padding:6px 0; color:var(--ink);}
.dot{width:10px; height:10px; border-radius:50%;}
.dot.photos{background:var(--pink-deep);}
.dot.videos{background:var(--yellow-deep);}
.dot.others{background:var(--green-deep);}
.leg-val{margin-left:auto; color:var(--ink-soft); font-weight:800; font-size:.8rem;}
.storage-counts{display:flex; gap:10px; margin-bottom:18px;}
.storage-counts > div{flex:1; text-align:center; background:var(--cream); border-radius:var(--r-sm); padding:12px;}
.storage-counts span{display:block; font-family:var(--font-display); font-weight:800; font-size:1.15rem;}
.storage-counts small{color:var(--ink-soft); font-weight:700; font-size:.7rem;}

/* upload sheet */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:2.5px dashed var(--pink-deep); border-radius:var(--r-md); padding:30px 16px;
  background:linear-gradient(160deg, var(--yellow), var(--pink)); cursor:pointer; margin-bottom:14px; text-align:center;
}
.dropzone i{font-size:1.8rem; color:#8C4A63;}
.dz-title{font-weight:800; font-size:.88rem; color:#5c3546;}
.dz-sub{font-size:.75rem; color:#7a5064; font-weight:700;}
.upload-queue{margin:10px 0;}
.uq-item{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.uq-icon{width:36px; height:36px; border-radius:9px; background:var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;}
.uq-icon img{width:100%; height:100%; object-fit:cover;}
.uq-info{flex:1; min-width:0;}
.uq-name{font-weight:800; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.uq-bar{height:5px; border-radius:3px; background:var(--line); margin-top:6px; overflow:hidden;}
.uq-fill{height:100%; width:0%; background:var(--verse-flat); transition:width .15s;}
.uq-status{font-size:.7rem; font-weight:700; color:var(--ink-soft); margin-top:3px;}
.uq-status.err{color:#C4304B;}
.uq-status.ok{color:#3F9E6B;}

/* share */
.share-hint{font-size:.82rem; color:var(--ink-soft); font-weight:600; text-align:center; margin:0 0 14px;}
.share-links{max-height:160px; overflow-y:auto; margin-bottom:14px;}
.share-link-row{display:flex; align-items:center; gap:8px; background:var(--cream); border-radius:var(--r-sm); padding:9px 11px; margin-bottom:8px; font-size:.72rem; font-weight:600; color:var(--ink-soft); word-break:break-all;}
#shareNativeBtn{margin-top:10px; margin-bottom:10px;}

/* ═══════════════ MODALS ═══════════════ */
.modal-overlay{position:fixed; inset:0; z-index:95; background:rgba(58,49,69,.5); display:none; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--white); border-radius:22px; padding:22px; width:100%; max-width:360px; box-shadow:var(--shadow-md);}
.modal-title{font-family:var(--font-display); font-weight:800; font-size:1.05rem; margin-bottom:4px;}
.modal-sub{font-size:.82rem; color:var(--ink-soft); font-weight:600; margin-bottom:14px;}
.modal-input{width:100%; padding:11px 13px; border-radius:var(--r-sm); border:2px solid var(--line); font-size:.9rem; font-weight:700; margin-bottom:16px;}
.modal-input:focus{outline:none; border-color:var(--pink-deep);}
.modal-actions{display:flex; gap:10px; justify-content:flex-end;}
.modal-cancel{border:none; background:var(--line); color:var(--ink-soft); font-weight:800; padding:10px 16px; border-radius:999px; cursor:pointer; font-size:.84rem;}
.modal-confirm{border:none; background:var(--verse-flat); color:#4A2A3A; font-weight:800; padding:10px 18px; border-radius:999px; cursor:pointer; font-size:.84rem; display:flex; align-items:center; gap:6px;}
.modal-confirm.danger{background:#FF6B81; color:#fff;}
.modal-confirm .modal-spinner{display:none; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:spin .7s linear infinite;}
.modal-confirm.loading .modal-btn-text{display:none;}
.modal-confirm.loading .modal-spinner{display:inline-block;}

.folder-picker{max-height:240px; overflow-y:auto; margin-bottom:16px; border:1px solid var(--line); border-radius:var(--r-sm);}
.fp-item{display:flex; align-items:center; gap:8px; padding:11px 12px; cursor:pointer; font-weight:700; font-size:.86rem; border-bottom:1px solid var(--line);}
.fp-item:last-child{border-bottom:none;}
.fp-item.active{background:var(--pink); }
.fp-item i{color:var(--pink-deep);}

/* toast */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; font-weight:700; font-size:.84rem;
  padding:11px 18px; border-radius:999px; z-index:120; opacity:0; pointer-events:none;
  transition:.22s; box-shadow:var(--shadow-md); max-width:88%; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.err{background:#C4304B;}
.toast.ok{background:#3F9E6B;}

/* focus visibility */
button:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--pink-deep); outline-offset:2px;}

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

/* small phones */
@media (max-width:340px){
  .brand-logo{height:28px;}
  .auth-card{padding:28px 20px 24px;}
}