/* My Family Vault — styles.css */
:root{
  --bg:#faf8ff;--bg2:#fff;--bg3:#f3f0ff;--bg4:#ede8ff;
  --violet:#6c5ce7;--pink:#fd79a8;--coral:#ff6b6b;--amber:#ff9f43;
  --teal:#20c997;--sky:#54c8ff;--lime:#a9e34b;--gold:#ffd43b;
  --text:#2d2640;--dim:#7a7d9c;--muted:#b0adc8;
  --border:rgba(108,92,231,0.12);--border2:rgba(0,0,0,0.07);
  --shadow-sm:0 2px 12px rgba(0,0,0,0.07);
  --shadow:0 6px 28px rgba(0,0,0,0.13);
  --r:16px;--r-sm:10px;
  --fh:'Roboto',sans-serif;--fb:'Open Sans',sans-serif;
  --sz-appname:32px;--sz-catname:16px;--sz-desc:13px;
  --sz-detname:15px;--sz-detval:13px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:var(--fb);font-size:15px;line-height:1.6;overflow-x:hidden;
  background:radial-gradient(ellipse at 0% 0%,rgba(255,107,107,.15) 0%,transparent 38%),
    radial-gradient(ellipse at 100% 0%,rgba(116,185,255,.15) 0%,transparent 38%),
    radial-gradient(ellipse at 0% 100%,rgba(38,222,129,.13) 0%,transparent 38%),
    radial-gradient(ellipse at 100% 100%,rgba(253,203,110,.15) 0%,transparent 38%),#faf8ff;
  background-attachment:fixed;color:var(--text)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:var(--muted);border-radius:2px}

/* ── PAGES ── */
.pg{display:none;min-height:100vh;flex-direction:column;animation:pgIn .2s ease}
.pg.active{display:flex}
.hidden{display:none!important}
@keyframes pgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── OFFLINE BANNER ── */
.offline-bar{display:none;background:linear-gradient(90deg,#ff9f43,#ff6b6b);color:#fff;
  font-size:12px;font-weight:700;text-align:center;padding:7px 14px;letter-spacing:.04em;
  position:sticky;top:0;z-index:200;flex-shrink:0}
.offline-bar.show{display:block}

/* ── LOADING ── */
#pg-loading{align-items:center;justify-content:center;gap:16px;
  background:linear-gradient(135deg,#ffe0ec 0%,#e8d5ff 33%,#d0f0ff 66%,#d0ffe8 100%)}
.spin{width:40px;height:40px;border:3px solid rgba(108,92,231,.18);border-top-color:var(--violet);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── SETUP ── */
#pg-setup{align-items:center;justify-content:flex-start;padding:24px 18px 60px;overflow-y:auto;
  background:radial-gradient(ellipse at 80% 10%,rgba(255,107,107,.15) 0%,transparent 45%),
    radial-gradient(ellipse at 20% 80%,rgba(108,92,231,.12) 0%,transparent 45%),
    linear-gradient(160deg,#fff9f0 0%,#fef4ff 100%)}
.setup-wrap{width:100%;max-width:420px}
.setup-h{font-family:var(--fh);font-size:26px;font-weight:800;color:var(--text);margin-bottom:4px}
.setup-sub{font-size:13px;color:var(--dim);margin-bottom:20px;line-height:1.75}
.setup-step{background:#fff;border:1.5px solid var(--border2);border-radius:var(--r);padding:20px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.step-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:13px}
.s1b{background:rgba(255,107,107,.1);color:#e05252;border:1px solid rgba(255,107,107,.22)}
.s2b{background:rgba(108,92,231,.08);color:var(--violet);border:1px solid rgba(108,92,231,.18)}
.s3b{background:rgba(32,201,151,.08);color:#15a07a;border:1px solid rgba(32,201,151,.2)}
.tip{background:rgba(108,92,231,.05);border-left:3px solid var(--violet);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:11px 14px;font-size:12px;color:var(--dim);line-height:1.75;margin-bottom:14px}
.tip code{color:var(--violet);font-size:11px;background:rgba(108,92,231,.08);padding:1px 5px;border-radius:4px}

/* ── PIN SCREEN ── */
#pg-pin{align-items:center;justify-content:center;
  background:radial-gradient(circle at 15% 20%,rgba(255,107,107,.18) 0%,transparent 35%),
    radial-gradient(circle at 85% 15%,rgba(116,185,255,.18) 0%,transparent 35%),
    radial-gradient(circle at 15% 85%,rgba(38,222,129,.15) 0%,transparent 35%),
    radial-gradient(circle at 85% 85%,rgba(253,203,110,.18) 0%,transparent 35%),#fff}
.pin-wrap{display:flex;flex-direction:column;align-items:center;padding:20px 16px;text-align:center;max-width:320px;width:100%}
.pin-logo{font-size:56px;line-height:1;margin-bottom:12px;animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pin-name{font-family:var(--fh);font-size:28px;font-weight:800;margin-bottom:3px}
.pin-tag{font-size:12px;color:var(--dim);margin-bottom:26px}
.pin-dots{display:flex;gap:14px;margin-bottom:6px}
.pdot{width:17px;height:17px;border-radius:50%;border:2px solid var(--muted);transition:all .2s}
.pdot.f0{background:var(--coral);border-color:var(--coral);box-shadow:0 0 12px rgba(255,107,107,.45)}
.pdot.f1{background:var(--amber);border-color:var(--amber);box-shadow:0 0 12px rgba(255,159,67,.45)}
.pdot.f2{background:var(--teal);border-color:var(--teal);box-shadow:0 0 12px rgba(32,201,151,.45)}
.pdot.f3{background:var(--violet);border-color:var(--violet);box-shadow:0 0 12px rgba(108,92,231,.45)}
.pin-dots.shake{animation:shake .38s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-7px)}80%{transform:translateX(7px)}}
.pin-msg{height:20px;font-size:12px;font-weight:700;margin-bottom:18px;transition:all .2s}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:228px}
.pk{width:70px;height:70px;border-radius:50%;background:#fff;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:22px;font-weight:700;cursor:pointer;color:var(--text);transition:all .14s;user-select:none;box-shadow:var(--shadow-sm)}
.pk:hover{background:var(--bg3);transform:scale(1.05)}
.pk:active{transform:scale(.9);background:var(--bg4)}
.pk-del{font-size:19px;color:var(--coral)}
.pk-ok{background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;border-color:transparent;font-size:15px;font-weight:800;box-shadow:0 4px 16px rgba(108,92,231,.35)}
.pk-ok:hover{opacity:.9;transform:scale(1.05);box-shadow:0 6px 20px rgba(108,92,231,.45)}

/* ── SET-PIN ── */
#pg-setpin{align-items:center;justify-content:center;
  background:radial-gradient(circle at 20% 20%,rgba(38,222,129,.15) 0%,transparent 40%),
    radial-gradient(circle at 80% 80%,rgba(108,92,231,.12) 0%,transparent 40%),
    linear-gradient(160deg,#f0fff9 0%,#f5f0ff 100%)}

/* ── HOME ── */
#pg-home{background:radial-gradient(ellipse at 10% 20%,rgba(255,107,107,.15) 0%,transparent 40%),
    radial-gradient(ellipse at 90% 10%,rgba(116,185,255,.13) 0%,transparent 40%),
    radial-gradient(ellipse at 10% 80%,rgba(38,222,129,.12) 0%,transparent 40%),
    radial-gradient(ellipse at 90% 80%,rgba(253,203,110,.14) 0%,transparent 40%),#faf8ff}
.home-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 18px;text-align:center}
.home-logo{font-size:58px;line-height:1;margin-bottom:13px;animation:float 4s ease-in-out infinite}
.home-name{font-family:var(--fh);font-size:var(--sz-appname);font-weight:800;line-height:1.1;margin-bottom:5px;
  background:linear-gradient(135deg,var(--coral) 0%,var(--amber) 22%,var(--lime) 44%,var(--teal) 64%,var(--violet) 82%,var(--pink) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.home-tag{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);margin-bottom:24px}
.home-acts{display:flex;flex-direction:column;align-items:center;gap:11px;width:100%;max-width:300px}
.stg-link{font-size:12px;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:5px;transition:color .2s}
.stg-link:hover{color:var(--violet)}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,#ff6b6b,#ff9f43,#26de81,#74b9ff,#6c5ce7,#fd79a8) 1;
  box-shadow:0 2px 18px rgba(0,0,0,.07);
  padding-top:env(safe-area-inset-top,0px);
  height:calc(56px + env(safe-area-inset-top,0px));
  padding-left:13px;padding-right:13px;
  display:flex;align-items:flex-end;gap:10px;flex-shrink:0;padding-bottom:8px}
.tb-back{width:34px;height:34px;border-radius:var(--r-sm);background:var(--bg3);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;color:var(--violet);transition:all .18s;flex-shrink:0;font-weight:700}
.tb-back:hover{background:var(--bg4)}
.tb-title{flex:1;font-family:var(--fh);font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-role{font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 11px;border-radius:12px;white-space:nowrap}
.tb-role.owner{background:linear-gradient(135deg,rgba(108,92,231,.12),rgba(253,121,168,.08));color:var(--violet);border:1px solid rgba(108,92,231,.2)}
.tb-role.viewer{background:rgba(0,0,0,.04);color:var(--muted);border:1px solid rgba(0,0,0,.07)}
.tb-lock{width:34px;height:34px;border-radius:var(--r-sm);background:rgba(255,107,107,.07);border:1.5px solid rgba(255,107,107,.15);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;color:var(--coral);transition:all .18s;flex-shrink:0}
.tb-lock:hover{background:rgba(255,107,107,.14)}
.tb-icon{width:34px;height:34px;border-radius:var(--r-sm);background:var(--bg3);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;color:var(--violet);transition:all .18s;flex-shrink:0}
.tb-icon:hover{background:var(--bg4)}

/* ── LIST ── */
.list-wrap{flex:1;padding:12px 13px calc(88px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}

/* ── UNIFIED CARD ── */
.vault-card{background:#fff;border:1.5px solid var(--border2);border-left:5px solid var(--cc,var(--violet));border-radius:var(--r);padding:14px 14px 14px 15px;box-shadow:var(--shadow-sm);transition:all .22s}
.vault-card.clickable{cursor:pointer}
.vault-card.clickable:hover{box-shadow:var(--shadow);transform:translateY(-2px);background:linear-gradient(135deg,#fff 45%,var(--cc-tint,#f5f0ff) 100%)}
.vault-card.clickable:active{transform:scale(.98)}
.card-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:5px}
.card-name{flex:1;font-family:var(--fh);font-weight:700;color:var(--text);word-wrap:break-word;white-space:pre-wrap;line-height:1.35;min-width:0}
.card-acts{display:flex;gap:4px;flex-shrink:0;align-items:center;margin-top:-1px}
.ca-btn{width:28px;height:28px;border-radius:7px;background:var(--bg3);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;color:var(--dim);transition:all .15s;flex-shrink:0}
.ca-btn:hover{border-color:var(--violet);color:var(--violet);background:var(--bg4)}
.ca-btn.del:hover{border-color:var(--coral);color:var(--coral);background:rgba(255,107,107,.07)}
.ca-btn.reorder{font-size:11px;color:var(--muted)}
.card-body{color:var(--dim);word-wrap:break-word;white-space:pre-wrap;line-height:1.65}
.card-foot{font-size:11px;font-weight:700;margin-top:9px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.file-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(108,92,231,.08);border:1px solid rgba(108,92,231,.18);color:var(--violet);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .15s;margin-top:6px}
.file-chip:hover{background:rgba(108,92,231,.16)}

/* ── MESSAGES SCREEN ── */
.msg-card{background:linear-gradient(135deg,#fff5f8 0%,#fff 60%);border:1.5px solid rgba(253,121,168,.18);border-left:5px solid var(--pink);border-radius:var(--r);padding:15px;box-shadow:var(--shadow-sm);transition:all .2s;cursor:pointer}
.msg-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.msg-card:active{transform:scale(.98)}
.msg-title{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--text);margin-bottom:5px}
.msg-preview{font-size:13px;color:var(--dim);line-height:1.6;white-space:pre-wrap;word-wrap:break-word}
.msg-date{font-size:11px;color:var(--muted);margin-top:8px;font-weight:600}
.msg-full-content{background:linear-gradient(135deg,#fff5f8 0%,#fff 70%);border:1.5px solid rgba(253,121,168,.15);border-radius:var(--r);padding:18px;font-size:15px;line-height:1.85;color:var(--text);white-space:pre-wrap;word-wrap:break-word;box-shadow:var(--shadow-sm)}
.msg-meta{font-size:11px;color:var(--muted);margin-top:12px;font-weight:600;text-align:right}

/* ── EMPTY STATE ── */
.empty-st{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:48px 20px}
.empty-ico{font-size:52px;margin-bottom:14px;opacity:.4}
.empty-txt{font-size:14px;line-height:1.8;color:var(--dim)}

/* ── FAB ── */
.fab{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom,0px));right:16px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;box-shadow:0 6px 22px rgba(108,92,231,.4);transition:all .2s;z-index:60}
.fab:hover{transform:scale(1.07)}
.fab:active{transform:scale(.93)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:13px 24px;border-radius:var(--r-sm);font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:.02em;cursor:pointer;border:none;transition:all .2s;user-select:none}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.btn-primary{background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;width:100%;max-width:300px}
.btn-primary:hover{opacity:.9;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--dim);border:1.5px solid var(--border);width:100%;max-width:300px}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn-danger{background:rgba(255,107,107,.08);color:var(--coral);border:1.5px solid rgba(255,107,107,.2)}
.btn-danger:hover{background:rgba(255,107,107,.16)}
.btn-amber{background:rgba(255,159,67,.1);color:#c47a00;border:1.5px solid rgba(255,159,67,.25)}
.btn-amber:hover{background:rgba(255,159,67,.18)}
.wfull{max-width:none!important;width:100%}

/* ── MODALS ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:120;display:none;align-items:flex-end}
.overlay.open{display:flex;animation:ovIn .18s}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-height:92vh;background:#fff;border-radius:22px 22px 0 0;border-top:4px solid transparent;border-image:linear-gradient(90deg,#ff6b6b,#ff9f43,#26de81,#74b9ff,#6c5ce7,#fd79a8) 1;display:flex;flex-direction:column;animation:shUp .22s ease;overflow:hidden;box-shadow:0 -6px 32px rgba(108,92,231,.1)}
@keyframes shUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.sh-handle{width:36px;height:4px;background:var(--muted);border-radius:2px;margin:10px auto 0;flex-shrink:0;opacity:.4}
.sh-head{padding:12px 17px;border-bottom:1px solid var(--border2);flex-shrink:0;display:flex;align-items:center;gap:10px}
.sh-title{flex:1;font-family:var(--fh);font-size:18px;font-weight:700;color:var(--text)}
.sh-body{padding:16px;overflow-y:auto;flex:1}
.sh-foot{padding:12px 16px;border-top:1px solid var(--border2);display:flex;gap:10px;flex-shrink:0;background:#fff}
.sh-foot .btn{flex:1;max-width:none}

/* ── CONFIRM ── */
.cf-ov{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:200;display:none;align-items:center;justify-content:center;padding:22px}
.cf-ov.open{display:flex;animation:ovIn .18s}
.cf-box{background:#fff;border:1.5px solid var(--border2);border-radius:var(--r);padding:26px 20px;max-width:300px;width:100%;text-align:center;animation:shUp .2s;box-shadow:var(--shadow)}
.cf-ico{font-size:36px;margin-bottom:11px}
.cf-h{font-family:var(--fh);font-size:19px;font-weight:700;margin-bottom:7px}
.cf-msg{font-size:13px;color:var(--dim);margin-bottom:20px;line-height:1.65}
.cf-btns{display:flex;gap:10px}
.cf-btns .btn{flex:1;max-width:none}

/* ── FORMS ── */
.fg{margin-bottom:14px}
.fg label{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.fg input,.fg textarea,.fg select{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;color:var(--text);font-family:var(--fb);font-size:15px;outline:none;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none;appearance:none}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(108,92,231,.08)}
.fg textarea{resize:vertical;min-height:80px}
.fg select option{background:#fff}
.cc-row{display:flex;justify-content:flex-end;margin-top:3px}
.cc{font-size:11px;color:var(--muted)}.cc.near{color:var(--amber)}.cc.over{color:var(--coral)}
.req{color:var(--coral)}
.fhint{font-size:11px;color:var(--muted);margin-top:4px;font-style:italic}
.pin-row{display:flex;gap:8px;align-items:center}
.pin-row input{flex:1;text-align:center;letter-spacing:.4em;font-size:20px}
.eye-btn{width:40px;height:40px;border-radius:var(--r-sm);background:var(--bg3);border:1.5px solid var(--border);color:var(--dim);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.eye-btn:hover{border-color:var(--violet);color:var(--violet)}

/* ── PIN WIDGET ── */
.pin-entry-wrap{display:flex;flex-direction:column;align-items:center;gap:0;position:relative}
.pin-entry-dots{display:flex;gap:12px;margin-bottom:10px}
.ped{width:44px;height:52px;border-radius:10px;border:2px solid var(--muted);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:26px;color:transparent;transition:all .18s}
.ped.filled{border-color:var(--violet);background:rgba(108,92,231,.08)}
.ped.filled::after{content:'●';color:var(--violet);font-size:20px}
.ped.active{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,177,66,.12);animation:blink .8s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.5}}
.pin-entry-btn{width:100%;background:var(--bg3);border:1.5px dashed var(--border);border-radius:var(--r-sm);padding:9px;color:var(--dim);cursor:pointer;font-family:var(--fb);font-size:13px;transition:all .15s}
.pin-entry-btn:hover{border-color:var(--violet);color:var(--violet)}

/* ── SETTINGS ── */
.stg-wrap{flex:1;overflow-y:auto;padding:14px 14px calc(60px + env(safe-area-inset-bottom,0px))}
.stg-sec{margin-bottom:22px}
.stg-sec-h{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;padding:0 2px;display:flex;align-items:center;gap:6px}
.stg-card{background:#fff;border:1.5px solid var(--border2);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.stg-row{padding:13px 14px;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:11px}
.stg-row:last-child{border-bottom:none}
.stg-ico{font-size:17px;flex-shrink:0}
.stg-lbl{font-size:13px;font-weight:700;color:var(--text)}
.stg-val{font-size:11px;color:var(--dim);margin-top:2px;word-break:break-all}
.stg-actions{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:10px}
.emo{font-size:24px;padding:7px;border-radius:8px;border:2px solid transparent;cursor:pointer;text-align:center;background:var(--bg3);transition:all .15px;line-height:1.3}
.emo:hover{background:var(--bg4)}
.emo.sel{border-color:var(--violet);background:rgba(108,92,231,.1)}
.user-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border2)}
.user-row:last-child{border-bottom:none}
.user-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:16px;font-weight:800;color:#fff;flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role-badge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.role-badge.owner{background:rgba(108,92,231,.1);color:var(--violet);border:1px solid rgba(108,92,231,.22)}
.role-badge.viewer{background:rgba(32,201,151,.08);color:#15a07a;border:1px solid rgba(32,201,151,.2)}
.user-acts{display:flex;gap:5px}

/* ── TOAST ── */
#toast{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(14px);background:#fff;border:1.5px solid var(--border2);color:var(--text);padding:9px 20px;border-radius:24px;font-size:13px;font-weight:700;z-index:500;opacity:0;pointer-events:none;transition:all .28s;white-space:nowrap;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.ok{border-color:var(--teal);color:var(--teal);background:#f0fdf9}
#toast.err{border-color:var(--coral);color:var(--coral);background:#fff4f4}
#toast.inf{border-color:var(--violet);color:var(--violet);background:#f8f5ff}
#toast.warn{border-color:var(--amber);color:#c47a00;background:#fff9f0}

@media(min-width:600px){
  .overlay,.cf-ov{align-items:center}
  .sheet{max-width:500px;margin:auto;border-radius:var(--r)}
  .pin-wrap{padding:32px}
}

/* ── AUDIO NOTES ─────────────────────────────────── */
.audio-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(32,201,151,.08);
  border:1px solid rgba(32,201,151,.22);border-radius:20px;padding:4px 10px 4px 7px;
  font-size:11px;font-weight:700;color:var(--teal);cursor:pointer;transition:all .15s;
  margin:3px 3px 0 0;max-width:200px}
.audio-chip:hover{background:rgba(32,201,151,.18)}
.audio-chip.playing{background:rgba(32,201,151,.2);border-color:var(--teal);
  animation:audioPulse 1s ease-in-out infinite}
@keyframes audioPulse{0%,100%{box-shadow:0 0 0 0 rgba(32,201,151,.3)}50%{box-shadow:0 0 0 6px rgba(32,201,151,0)}}
.audio-del{background:none;border:none;color:rgba(255,107,107,.6);cursor:pointer;
  font-size:12px;padding:0 0 0 4px;line-height:1;transition:color .15s}
.audio-del:hover{color:var(--coral)}
.mic-btn{width:28px;height:28px;border-radius:7px;background:rgba(32,201,151,.08);
  border:1.5px solid rgba(32,201,151,.2);display:flex;align-items:center;justify-content:center;
  font-size:14px;cursor:pointer;color:var(--teal);transition:all .15s;flex-shrink:0}
.mic-btn:hover{background:rgba(32,201,151,.18);border-color:var(--teal)}
.rec-pulse{animation:recPulse .6s ease-in-out infinite alternate}
@keyframes recPulse{from{box-shadow:0 0 0 0 rgba(255,107,107,.4)}to{box-shadow:0 0 0 8px rgba(255,107,107,0)}}
.todo-tab{flex:1;padding:8px 4px;font-size:12px;font-weight:700;font-family:var(--fh);
  background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--muted);cursor:pointer;transition:all .18s;letter-spacing:.03em}
.todo-tab.active{color:var(--violet);border-bottom-color:var(--violet)}
.todo-tab:hover{color:var(--dim)}
.task-card{background:#fff;border:1.5px solid var(--border2);border-left:5px solid var(--tc,#ccc);
  border-radius:var(--r);padding:14px 14px 14px 15px;box-shadow:var(--shadow-sm);
  transition:all .2s;position:relative}
.task-card.done-card{opacity:.62;background:#f8fff8}
.task-card.overdue{border-left-color:var(--coral)!important;background:rgba(255,107,107,.03)}
.task-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.task-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  flex-shrink:0;margin-top:1px;transition:all .2s;font-size:12px}
.task-check.done{background:var(--teal);border-color:var(--teal);color:#fff}
.task-check.progress{background:var(--amber);border-color:var(--amber);color:#fff}
.task-title-txt{flex:1;font-family:var(--fh);font-size:15px;font-weight:700;
  color:var(--text);line-height:1.3;word-wrap:break-word}
.task-title-txt.done-txt{text-decoration:line-through;color:var(--muted)}
.task-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.task-pill{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap}
.repeat-pill{background:rgba(84,136,255,.1);color:#4488ff;border:1px solid rgba(84,136,255,.2)}
.s-todo{background:rgba(108,92,231,.08);color:var(--violet);border:1px solid rgba(108,92,231,.18)}
.s-done{background:rgba(32,201,151,.1);color:var(--teal);border:1px solid rgba(32,201,151,.2)}
.task-due{font-size:11px;font-weight:700}
.task-due.overdue{color:var(--coral)}
.task-due.today{color:var(--amber)}
.task-due.upcoming{color:var(--teal)}
.task-notes{font-size:13px;color:var(--dim);line-height:1.6;margin-top:5px;word-wrap:break-word}
/* ── OPTIONAL PIN DOTS (dots 5 & 6 for 6-digit PIN) ──────────── */
.pdot-opt {
  opacity: 0.4;
  transition: opacity .2s;
}
.pdot-opt.filled, .pdot-opt.f4, .pdot-opt.f5 {
  opacity: 1;
}
/* ped optional dots — same size, just dashed border */
.ped.pdot-opt {
  opacity: 1;
  transform: none;
  border-color: var(--border);
  border-style: dashed;
}

/* ── OPTIONAL PIN DOTS — dots 5 & 6 (same size as others) ───── */
.pdot-opt {
  opacity: 0.4;
  transition: opacity .2s;
}
.pdot-opt.f4, .pdot-opt.f5 { opacity: 1; }

/* ped-opt: identical size to .ped, just dashed border to show optional */
.ped-opt {
  width: 44px;
  height: 52px;
  border-radius: 10px;
  border: 2px dashed var(--muted);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: transparent;
  transition: all .18s;
  opacity: 0.5;
}
.ped-opt.filled {
  border: 2px solid var(--violet);
  border-style: solid;
  background: rgba(108,92,231,.08);
  opacity: 1;
}
.ped-opt.filled::after { content: '●'; color: var(--violet); font-size: 20px; }
.ped-opt.active {
  border: 2px solid var(--amber);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(255,177,66,.12);
  animation: blink .8s ease-in-out infinite;
  opacity: 1;
}

/* Sensitive masking */
.sens-mask {
  font-size: 18px;
  letter-spacing: 4px;
  color: var(--muted);
  user-select: none;
  vertical-align: middle;
}
.sens-val { color: var(--text); font-weight: 600; vertical-align: middle; }
.sens-eye {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  margin-left: 6px;
  color: var(--muted);
  vertical-align: middle;
  border-radius: 6px;
  transition: background .15s;
}
.sens-eye:hover { background: var(--bg3); }

/* ── PAGE MENU ────────────────────────────────────────────── */
.pm-item{padding:13px 18px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:10px;transition:background .12s;border-bottom:0.5px solid var(--bg4)}
.pm-item:last-child{border-bottom:none}
.pm-item:hover{background:var(--bg3)}
.pm-item:active{background:var(--bg4)}
.pm-danger{color:var(--coral)!important}

/* ── SETPIN DOTS (6-dot PIN entry) — all dots identical ───────── */
.sp-dots-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;
}
.sp-dot, .sp-dot-opt {
  width: 36px;
  height: 44px;
  border-radius: 9px;
  border: 2px solid var(--muted);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: border-color .18s, background .18s;
  flex-shrink: 0;
  box-sizing: border-box;
  opacity: 1;
}
.sp-dot.filled, .sp-dot-opt.filled {
  border-color: var(--violet);
  background: rgba(108,92,231,.08);
}
.sp-dot.filled::after, .sp-dot-opt.filled::after {
  content: '●';
  color: var(--violet);
  font-size: 18px;
}
.sp-dot.active, .sp-dot-opt.active {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(255,177,66,.15);
  animation: blink .8s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   Applied via: (a) OS preference  (b) [data-theme="dark"] on <html>
   ══════════════════════════════════════════════════════════════ */
:root[data-theme="dark"],
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#13111c;--bg2:#1c1928;--bg3:#251f36;--bg4:#2e2848;
  --text:#e8e4f7;--dim:#9b96b8;--muted:#5a5478;
  --border:rgba(108,92,231,0.22);--border2:rgba(255,255,255,0.08);
  --shadow-sm:0 2px 12px rgba(0,0,0,0.35);
  --shadow:0 6px 28px rgba(0,0,0,0.55);
}}

/* Alias block so [data-theme="dark"] also fires without media query */
:root[data-theme="dark"] {
  --bg:#13111c;--bg2:#1c1928;--bg3:#251f36;--bg4:#2e2848;
  --text:#e8e4f7;--dim:#9b96b8;--muted:#5a5478;
  --border:rgba(108,92,231,0.22);--border2:rgba(255,255,255,0.08);
  --shadow-sm:0 2px 12px rgba(0,0,0,0.35);
  --shadow:0 6px 28px rgba(0,0,0,0.55);
}

/* ── Body background in dark ── */
:root[data-theme="dark"] body,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body {
  background:
    radial-gradient(ellipse at 0% 0%,  rgba(255,107,107,.07) 0%,transparent 38%),
    radial-gradient(ellipse at 100% 0%,rgba(116,185,255,.07) 0%,transparent 38%),
    radial-gradient(ellipse at 0% 100%,rgba(38,222,129,.06)  0%,transparent 38%),
    radial-gradient(ellipse at 100% 100%,rgba(253,203,110,.07) 0%,transparent 38%),
    #13111c;
}}
:root[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at 0% 0%,  rgba(255,107,107,.07) 0%,transparent 38%),
    radial-gradient(ellipse at 100% 0%,rgba(116,185,255,.07) 0%,transparent 38%),
    radial-gradient(ellipse at 0% 100%,rgba(38,222,129,.06)  0%,transparent 38%),
    radial-gradient(ellipse at 100% 100%,rgba(253,203,110,.07) 0%,transparent 38%),
    #13111c;
}

/* ── Surfaces ── */
:root[data-theme="dark"] .vault-card,
:root[data-theme="dark"] .task-card,
:root[data-theme="dark"] .setup-step,
:root[data-theme="dark"] .stg-card,
:root[data-theme="dark"] .cf-box,
:root[data-theme="dark"] .sheet,
:root[data-theme="dark"] .sh-foot { background:var(--bg2); }

:root[data-theme="dark"] .msg-card { background:linear-gradient(135deg,#1e1628 0%,var(--bg2) 60%); border-color:rgba(253,121,168,.15); }
:root[data-theme="dark"] .msg-full-content { background:linear-gradient(135deg,#1e1628 0%,var(--bg2) 70%); }

:root[data-theme="dark"] .vault-card.clickable:hover { background:linear-gradient(135deg,var(--bg2) 45%,var(--bg3) 100%); }
:root[data-theme="dark"] .task-card.done-card { background:#171c17; }
:root[data-theme="dark"] .task-card.overdue { background:rgba(255,107,107,.04); }

/* ── Topbar ── */
:root[data-theme="dark"] .topbar { background:rgba(19,17,28,.92); box-shadow:0 2px 18px rgba(0,0,0,.4); }

/* ── PIN screen ── */
:root[data-theme="dark"] #pg-pin {
  background:
    radial-gradient(circle at 15% 20%,rgba(255,107,107,.10) 0%,transparent 35%),
    radial-gradient(circle at 85% 15%,rgba(116,185,255,.10) 0%,transparent 35%),
    radial-gradient(circle at 15% 85%,rgba(38,222,129,.08)  0%,transparent 35%),
    radial-gradient(circle at 85% 85%,rgba(253,203,110,.10) 0%,transparent 35%),
    #13111c;
}
:root[data-theme="dark"] .pk { background:var(--bg2); border-color:var(--border); color:var(--text); }
:root[data-theme="dark"] .pk:hover { background:var(--bg3); }
:root[data-theme="dark"] .pk:active { background:var(--bg4); }
:root[data-theme="dark"] .pk-ok { background:linear-gradient(135deg,var(--violet),var(--pink)); color:#fff; }

/* ── Setup ── */
:root[data-theme="dark"] #pg-setup {
  background:
    radial-gradient(ellipse at 80% 10%,rgba(255,107,107,.07) 0%,transparent 45%),
    radial-gradient(ellipse at 20% 80%,rgba(108,92,231,.08)  0%,transparent 45%),
    linear-gradient(160deg,#171220 0%,#1a1228 100%);
}

/* ── Home ── */
:root[data-theme="dark"] #pg-home {
  background:
    radial-gradient(ellipse at 10% 20%,rgba(255,107,107,.08) 0%,transparent 40%),
    radial-gradient(ellipse at 90% 10%,rgba(116,185,255,.07) 0%,transparent 40%),
    radial-gradient(ellipse at 10% 80%,rgba(38,222,129,.07)  0%,transparent 40%),
    radial-gradient(ellipse at 90% 80%,rgba(253,203,110,.08) 0%,transparent 40%),
    #13111c;
}

/* ── Inputs & selects ── */
:root[data-theme="dark"] .fg input,
:root[data-theme="dark"] .fg textarea,
:root[data-theme="dark"] .fg select { background:var(--bg3); color:var(--text); border-color:var(--border); }
:root[data-theme="dark"] .fg select option { background:var(--bg2); color:var(--text); }
:root[data-theme="dark"] .pin-row input { background:var(--bg3); color:var(--text); border-color:var(--border); }
:root[data-theme="dark"] .eye-btn,
:root[data-theme="dark"] .ped,
:root[data-theme="dark"] .sp-dot,
:root[data-theme="dark"] .sp-dot-opt { background:var(--bg3); }

/* ── Page menu dropdown ── */
:root[data-theme="dark"] #page-menu { background:var(--bg2); border-color:var(--border); }
:root[data-theme="dark"] .pm-item:hover { background:var(--bg3); }
:root[data-theme="dark"] .pm-item:active { background:var(--bg4); }

/* ── Buttons ── */
:root[data-theme="dark"] .btn-ghost { border-color:var(--border); color:var(--dim); }
:root[data-theme="dark"] .btn-ghost:hover { border-color:var(--violet); color:var(--violet); }
:root[data-theme="dark"] .tb-back,
:root[data-theme="dark"] .tb-icon { background:var(--bg3); border-color:var(--border); }
:root[data-theme="dark"] .tb-back:hover,
:root[data-theme="dark"] .tb-icon:hover { background:var(--bg4); }

/* ── Toast ── */
:root[data-theme="dark"] #toast { background:var(--bg2); border-color:var(--border2); color:var(--text); }
:root[data-theme="dark"] #toast.ok  { background:#0f1f1a; border-color:var(--teal); color:var(--teal); }
:root[data-theme="dark"] #toast.err { background:#1f0f0f; border-color:var(--coral); color:var(--coral); }
:root[data-theme="dark"] #toast.inf { background:#160f2a; border-color:var(--violet); color:var(--violet); }
:root[data-theme="dark"] #toast.warn{ background:#1f1800; border-color:var(--amber); color:var(--amber); }

/* ── Loading screen ── */
:root[data-theme="dark"] #pg-loading { background:linear-gradient(135deg,#1e0f18 0%,#150e2e 33%,#0e1628 66%,#0e1f18 100%); }

/* ── Scrollbar ── */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background:var(--bg4); }
:root[data-theme="dark"] ::-webkit-scrollbar-track { background:var(--bg2); }

/* ── Sens mask ── */
:root[data-theme="dark"] .sens-eye:hover { background:var(--bg3); }

/* ── Dark mode toggle label in page menu ── */
#pm-dark-label { transition: none; }