:root{
    --navy:#0F1B2E;
    --brass:#B4894F;
    --brass-light:#D8B77F;
    --warn:#8B3A3A;
    --warn-bg:#F3E4E1;
    --ok:#4C7A5E;
  }
  button, input, select, textarea{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    border-radius:0;
  }
  html[data-theme="light"]{
    --main-bg:#F6F1E6;
    --card-bg:#FFFFFF;
    --card-bg-2:#EFE7D6;
    --text:#22201B;
    --text-2:#5B6B82;
    --border:#DCD2BA;
    --row-border:#F1ECE0;
    --focus-bg:#FBF6E9;
    --mark-bg:#F1D48A;
    --shadow:rgba(15,27,46,0.08);
    --footer-text:#7A6F52;
    --sb-bg-1:#F6F1E6;
    --sb-bg-2:#F6F1E6;
    --sb-text:#22201B;
    --sb-text-dim:#5B6B82;
    --sb-text-dimmer:var(--sb-text-dim);
    --sb-text-soft:var(--sb-text);
    --sb-overlay-weak:rgba(15,27,46,0.045);
    --sb-overlay-med:rgba(15,27,46,0.08);
    --sb-border-soft:#DCD2BA;
    --sb-border-brass:#DCD2BA;
    --sb-active-text:#22201B;
    --sb-count-bg:rgba(15,27,46,0.07);
    --sb-accent:#B4894F;
  }
  html[data-theme="dark"]{
    --main-bg:#0B1420;
    --card-bg:#17222F;
    --card-bg-2:#1E2A39;
    --text:#EDE7D9;
    --text-2:#93A3B8;
    --border:rgba(255,255,255,0.10);
    --row-border:rgba(255,255,255,0.06);
    --focus-bg:#233145;
    --mark-bg:#8A6A2E;
    --shadow:rgba(0,0,0,0.35);
    --footer-text:#AEB9CC;
    --sb-bg-1:#0F1B2E;
    --sb-bg-2:#16263F;
    --sb-text:#F6F1E6;
    --sb-text-dim:#9FB0C6;
    --sb-text-dimmer:#7C8DA6;
    --sb-text-soft:#C7D2E0;
    --sb-overlay-weak:rgba(255,255,255,0.06);
    --sb-overlay-med:rgba(255,255,255,0.12);
    --sb-border-soft:rgba(216,183,127,0.2);
    --sb-border-brass:rgba(216,183,127,0.35);
    --sb-active-text:#F6F1E6;
    --sb-count-bg:rgba(255,255,255,0.15);
    --sb-accent:#D8B77F;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;
    /* Safety net: the page itself should never need to scroll sideways —
       any horizontal scrolling should happen inside a specific element
       (like .tabs). This stops any stray overflow elsewhere from making
       the whole page slide sideways. */
    overflow-x:hidden;
    /* overflow-x:hidden alone is NOT reliable against real touch/rubber-band
       gestures on iOS Safari — the page can still be dragged sideways by
       touch even with overflow hidden. overscroll-behavior-x:none plus
       locking touch-action to vertical-only panning is the fix that
       actually holds on real devices. Elements that need their own
       horizontal scroll (like .tabs) set their own touch-action:pan-x,
       which takes precedence for touches starting inside them. */
    overscroll-behavior-x:none;
  }
  body{ touch-action:pan-y pinch-zoom; }
  body{
    background:var(--main-bg);
    font-family:'Noto Sans','Noto Sans Devanagari',sans-serif;
    color:var(--text);
    display:flex;
    min-height:100vh;
    transition:background .2s;
  }
  ::selection{background:var(--brass-light);}

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:260px;
    flex-shrink:0;
    background:linear-gradient(180deg,var(--sb-bg-1) 0%,var(--sb-bg-2) 100%);
    color:var(--sb-text);
    border-right:1px solid var(--sb-border-soft);
    display:flex;
    flex-direction:column;
    padding:28px 0 20px;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    transition:background .2s,color .2s;
  }
  .brand{
    padding:0 22px 22px;
    margin-bottom:14px;
    position:relative;
  }
  .brand::after{
    content:"";
    position:absolute;
    left:22px;right:22px;bottom:0;
    height:2px;
    background:linear-gradient(90deg,
      #378ADD 0%, #378ADD 18%,
      #97C459 22%, #97C459 38%,
      #EF9F27 42%, #EF9F27 58%,
      #D4537E 62%, #D4537E 78%,
      #7F77DD 82%, #7F77DD 100%);
  }
  .brand-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
  .header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-top:2px;}
  .theme-toggle{
    flex-shrink:0;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--sb-border-brass);
    background:var(--sb-overlay-weak);color:var(--sb-accent);
    cursor:pointer;margin-top:0;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s,border-color .15s;
  }
  .theme-toggle:hover{background:var(--sb-overlay-med);}
  .theme-toggle svg{display:block;}
  .logout-icon-btn:hover{background:rgba(139,58,58,0.18);color:#C25454;border-color:rgba(139,58,58,0.4);}
  .seal{
    width:52px;height:52px;border-radius:50%;
    border:2px solid var(--brass);
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;font-size:15px;
    color:var(--sb-accent);letter-spacing:0.5px;
    margin-bottom:12px;
    background:radial-gradient(circle at 35% 30%, rgba(216,183,127,0.15), transparent 70%);
    position:relative;overflow:hidden;cursor:pointer;flex-shrink:0;
  }
  .seal img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
  .seal .seal-edit{
    position:absolute;inset:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(15,27,46,0.55);color:#F6F1E6;opacity:0;
    transition:opacity .15s;
  }
  .seal:hover .seal-edit{opacity:1;}
  .seal .seal-edit svg{width:16px;height:16px;}

  /* ---------- Family Birthday avatars ---------- */
  .bday-header{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px 8px;
  }
  .bday-name{
    font-family:'Fraunces',serif;font-weight:600;font-size:17px;
    flex:1;min-width:0;outline:none;
    line-height:1.3;
  }
  .bday-avatar{
    width:76px;height:76px;border-radius:14px;flex-shrink:0;
    border:2px solid var(--border);background:var(--card-bg-2);
    display:flex;align-items:center;justify-content:center;
    color:var(--text-2);cursor:pointer;position:relative;overflow:hidden;
    transition:border-color .15s;
  }
  .bday-avatar:hover{border-color:var(--brass);}
  .bday-avatar img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;}
  .bday-avatar .bday-edit{
    position:absolute;inset:0;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(15,27,46,0.55);color:#F6F1E6;opacity:0;
    transition:opacity .15s;
  }
  .bday-avatar:hover .bday-edit{opacity:1;}
  .bday-avatar .bday-edit svg{width:18px;height:18px;}
  .brand h1{
    font-family:'Fraunces',serif;font-weight:600;font-size:17px;
    margin:0 0 4px;line-height:1.3;color:var(--sb-text);
  }

  .tabs{list-style:none;margin:0;padding:0 10px;flex:1;}
  .tab{
    display:flex;align-items:center;gap:7px;
    padding:7px 8px;margin:5px 0;border-radius:8px;
    cursor:pointer;font-size:12px;
    border:1px solid transparent;background:transparent;
    transition:background .15s, border-color .15s, filter .15s;
  }
  .tab:hover{filter:brightness(1.18);}
  .tab .tab-icon{
    width:20px;height:20px;flex-shrink:0;border-radius:6px;
    display:flex;align-items:center;justify-content:center;
  }
  .tab .tab-icon svg{width:11px;height:11px;}
  .tab .tab-label{
    flex:1;min-width:0;font-weight:400;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    color:var(--tc-light, inherit);
  }
  .tab .count{
    flex-shrink:0;font-family:'IBM Plex Mono',monospace;font-size:9px;
    padding:1px 5px;border-radius:8px;background:var(--sb-count-bg);
    color:var(--tc-light, inherit);
  }
  html[data-theme="light"] .tab:not(.active) .tab-label,
  html[data-theme="light"] .tab:not(.active) .count{
    color:var(--tc-dark, inherit);
    font-weight:500;
  }
  html[data-theme="light"] .tab:not(.active){
    border-width:1.5px;
  }
  .tab.active{
    border-width:1.5px!important;border-color:var(--brass)!important;
    background:rgba(216,183,127,0.18)!important;
  }
  .tab.active .tab-label{color:var(--sb-active-text)!important;font-weight:500;}
  .tab.active .count{background:rgba(216,183,127,0.25)!important;color:var(--sb-active-text)!important;}

  .sidebar-foot{
    padding:14px 22px 0;margin-top:12px;
    border-top:1px solid var(--sb-border-soft);
    font-size:10.5px;color:var(--sb-text-dimmer);
  }
  .sidebar-foot button{
    display:inline-flex;align-items:center;gap:8px;
    background:none;border:1px solid var(--sb-border-brass);
    color:var(--sb-text-soft);font-size:11px;padding:7px 10px;border-radius:7px;
    cursor:pointer;margin-top:8px;margin-right:6px;font-family:'Noto Sans',sans-serif;
    font-weight:500;letter-spacing:0.1px;transition:background .15s,border-color .15s,filter .15s;
  }
  .sidebar-foot button:hover{filter:brightness(1.25);}
  .foot-pair{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
    margin-top:8px;
  }
  .foot-pair button.foot-compact{margin-top:0;margin-right:0;width:100%;}
  .foot-pair button.foot-compact:only-child{grid-column:1 / -1;}
  .sidebar-foot button .foot-icon{
    width:18px;height:18px;flex-shrink:0;border-radius:5px;
    display:flex;align-items:center;justify-content:center;
  }
  .sidebar-foot button .foot-icon svg{width:10px;height:10px;}
  .sidebar-foot button.foot-compact{
    padding:6px 6px;font-size:10px;gap:5px;justify-content:flex-start;
  }
  .sidebar-foot button.foot-compact .foot-label{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  .sidebar-foot button.foot-compact .foot-icon{width:15px;height:15px;}
  .sidebar-foot button.foot-compact .foot-icon svg{width:8px;height:8px;}
  #exportBtn{border-color:#378ADD59;background:#378ADD1F;}
  #importBtn{border-color:#97C45959;background:#97C4591F;}
  #exportWordBtn{border-color:#7F77DD59;background:#7F77DD1F;}
  #exportExcelBtn{border-color:#D4537E59;background:#D4537E1F;}
  #printBtn{border-color:#D8B77F59;background:#D8B77F1F;}
  #lockBtn{border-color:#EF9F2759;background:#EF9F271F;}
  .save-status{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px 5px 8px;border-radius:20px;
    font-size:11px;font-weight:600;letter-spacing:0.2px;
    margin-bottom:2px;
  }
  .save-status .dot{
    width:7px;height:7px;border-radius:50%;flex-shrink:0;
  }
  .save-status.pending{
    color:#E8B95F;background:rgba(232,185,95,0.14);
  }
  .save-status.pending .dot{
    background:#E8B95F;
    box-shadow:0 0 0 0 rgba(232,185,95,0.5);
    animation:pulse-amber 1.8s infinite;
  }
  .save-status.ok{
    color:#6FCF97;background:rgba(111,207,151,0.14);
  }
  .save-status.ok .dot{background:#6FCF97;}
  .save-status.warn{
    color:#E2725B;background:rgba(226,114,91,0.14);cursor:pointer;
  }
  .save-status.warn .dot{
    background:#E2725B;
    box-shadow:0 0 0 0 rgba(226,114,91,0.5);
    animation:pulse-amber 1.8s infinite;
  }
  .save-status.hidden-status{display:none;}
  @keyframes pulse-amber{
    0%{box-shadow:0 0 0 0 rgba(232,185,95,0.45);}
    70%{box-shadow:0 0 0 6px rgba(232,185,95,0);}
    100%{box-shadow:0 0 0 0 rgba(232,185,95,0);}
  }
  .sidebar-credit{
    margin-top:auto;padding:16px 22px;
    border-top:1px solid var(--sb-border-soft);
    font-size:10.5px;color:var(--sb-text-dimmer);text-align:center;letter-spacing:0.2px;
  }
  .sidebar-credit strong{color:var(--sb-accent);font-weight:600;}
  .app-footer{
    padding:22px 36px;text-align:center;
    font-size:11.5px;color:var(--footer-text);
    border-top:1px solid var(--border);
    letter-spacing:0.2px;
  }
  .app-footer strong{
    font-weight:700;
    background:linear-gradient(90deg,#67D6C4,#8B5CF6,#F59E0B);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* ---------- Main ---------- */
  .main{flex:1;min-width:0;background:var(--main-bg);position:relative;transition:background .2s;}
  .topbar{
    position:sticky;top:0;z-index:5;
    background:var(--main-bg);
    border-bottom:1px solid var(--border);
    padding:22px 36px 16px;
  }
  .topbar-row{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;}
  .topbar h2{
    font-family:'Fraunces',serif;font-weight:600;font-size:23px;margin:0;
    color:var(--text);
  }
  .topbar .stamp{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--text-2);
    border:1px solid var(--border);padding:3px 9px;border-radius:20px;
    white-space:nowrap;
  }

  /* ---------- Live Eng/Nepali date + time strip (topbar) ---------- */
  .dt-strip{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;
    margin-top:9px;font-family:'IBM Plex Mono',monospace;font-size:11px;
    color:var(--text-2);text-align:center;width:100%;
  }
  .dt-ico{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;flex-shrink:0;}
  .dt-ico svg{width:100%;height:100%;}
  .dt-chip{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
  .dt-chip.dt-np{font-family:'Noto Sans Devanagari','Noto Sans',sans-serif;font-size:11.5px;color:var(--text);}
  .dt-chip.dt-en{color:var(--text);}
  .dt-chip.dt-time{font-weight:600;color:var(--brass);}
  .dt-chip.dt-time #dtAmPm{font-size:9px;font-weight:600;margin-left:1px;color:var(--text-2);}
  .dt-sep{color:var(--border);font-size:10px;}
  @media (max-width:600px){
    .dt-strip{font-size:9.5px;gap:5px 9px;margin-top:7px;}
    .dt-chip.dt-np{font-size:10px;}
    .dt-sep{display:none;}
    .dt-ico{width:11px;height:11px;}
  }
  .searchwrap{margin-top:14px;position:relative;}
  .searchwrap input{
    width:100%;padding:10px 14px 10px 38px;
    border:1px solid var(--border);border-radius:8px;
    background:var(--card-bg);font-size:13.5px;font-family:'Noto Sans',sans-serif;
    color:var(--text);outline:none;
  }
  .searchwrap input::placeholder{color:var(--text-2);}
  .searchwrap input:focus{border-color:var(--brass);}
  .searchwrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:0.5;color:var(--text-2);}
  .searchresults{
    margin-top:10px;font-size:12px;color:var(--text-2);
  }
  .searchresults b{color:var(--text);}

  .content{padding:24px 36px 60px;}
  .cat-desc{font-size:13px;color:var(--text-2);margin:0 0 20px;max-width:640px;line-height:1.5;}

  .toolbar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
  .btn{
    font-family:'Noto Sans',sans-serif;font-size:12.5px;font-weight:600;
    padding:8px 14px;border-radius:6px;border:1px solid var(--border);
    background:var(--card-bg);color:var(--text);cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;
    transition:all .15s;
  }
  .btn:hover{border-color:var(--brass);color:var(--brass);}
  .btn.primary{background:var(--brass);border-color:var(--brass);color:#fff;}
  .btn.primary:hover{background:#9c7642;color:#fff;}
  .btn.ghost{background:transparent;border:none;color:var(--text-2);padding:4px 8px;}
  .btn.ghost:hover{color:var(--warn);}
  .btn.warn{color:var(--warn);border-color:var(--warn);}
  .btn.warn:hover{background:var(--warn-bg);border-color:var(--warn);color:var(--warn);}
  .btn.small{font-size:11px;padding:5px 10px;}

  .card{
    background:var(--card-bg);border:1px solid var(--border);border-radius:10px;
    margin-bottom:16px;overflow:hidden;
    box-shadow:0 1px 2px var(--shadow);
  }
  .card-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;background:var(--card-bg-2);
    border-bottom:1px solid var(--border);
  }
  .card-head .idx{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--text-2);
    letter-spacing:0.5px;
  }
  .card-head-actions{display:flex;align-items:center;gap:2px;}
  .card-head-actions .icon-btn{position:relative;}
  .attach-count{
    position:absolute;top:-2px;right:-2px;background:var(--brass);color:#fff;
    font-size:9px;font-weight:700;border-radius:50%;min-width:14px;height:14px;
    display:flex;align-items:center;justify-content:center;line-height:1;padding:1px;
  }
  .attach-list{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px;}
  .attach-chip{
    display:flex;align-items:center;gap:4px;background:var(--card-bg-2);
    border:1px solid var(--border);border-radius:20px;padding:3px 4px 3px 8px;font-size:11px;
  }
  .attach-chip a{display:flex;align-items:center;gap:5px;color:var(--text);text-decoration:none;}
  .attach-chip svg{width:12px;height:12px;flex-shrink:0;}
  .attach-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .card-body{padding:6px 0;}
  .card-add-field{
    display:flex;align-items:center;gap:6px;
    padding:9px 16px;font-size:12px;font-weight:600;
    color:var(--text-2);cursor:pointer;background:none;border:none;
    border-top:1px dashed var(--border);width:100%;text-align:left;
    font-family:'Noto Sans',sans-serif;
  }
  .card-add-field:hover{color:var(--brass);background:var(--card-bg-2);}
  .field-row{
    display:grid;grid-template-columns:190px 1fr auto;gap:10px;
    padding:9px 16px;align-items:center;
    border-bottom:1px solid var(--row-border);
  }
  .field-row:last-child{border-bottom:none;}
  .field-label{
    font-size:12px;font-weight:600;color:var(--text-2);
    letter-spacing:0.2px;
  }
  .field-value{
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text);
    outline:none;border-radius:4px;padding:3px 6px;margin:-3px -6px;
    word-break:break-word;line-height:1.5;
  }
  .field-value:focus{background:var(--focus-bg);box-shadow:0 0 0 1px var(--brass-light);}
  .field-value.masked{letter-spacing:2px;color:var(--text-2);}
  mark{background:var(--mark-bg);color:var(--text);border-radius:2px;padding:0 1px;}
  .field-value-wrap{min-width:0;}
  .field-age{
    font-size:10.5px;color:var(--text-2);margin:1px 0 0 4px;
    display:flex;align-items:center;gap:4px;font-family:'Noto Sans',sans-serif;
  }
  .field-age svg{width:12px;height:12px;flex-shrink:0;}
  .field-age-warn{color:var(--warn);font-weight:600;}
  .field-age-ok{color:var(--ok);}

  .row-actions{display:flex;gap:4px;align-items:center;}
  .icon-btn{
    border:none;background:none;cursor:pointer;padding:5px;border-radius:5px;
    color:var(--text-2);display:flex;align-items:center;
  }
  .icon-btn:hover{background:var(--card-bg-2);color:var(--text);}
  .icon-btn.warn:hover{color:var(--warn);}
  .field-delete{opacity:0;transition:opacity .15s;}
  .field-row:hover .field-delete,
  .field-row:focus-within .field-delete{opacity:1;}
  .icon-btn.lock-on{color:var(--brass);}
  .icon-btn.lock-on:hover{background:rgba(180,137,79,0.15);color:var(--brass);}
  .icon-btn.lock-off{opacity:0.4;transition:opacity .15s;}
  .field-row:hover .icon-btn.lock-off,
  .field-row:focus-within .icon-btn.lock-off,
  .icon-btn.lock-off:hover,
  .icon-btn.lock-off:focus-visible{opacity:1;}
  .row-actions-icons{display:flex;gap:4px;align-items:center;}
  .row-menu-btn{display:none;}

  .empty{
    text-align:center;padding:60px 20px;color:var(--text-2);
  }
  .empty svg{opacity:0.3;margin-bottom:12px;}

  /* ---------- Overview / Stat cards ---------- */
  .hero-stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px;
  }
  .hero-card{
    background:var(--navy);border-radius:12px;padding:18px 20px;
    color:#F6F1E6;position:relative;overflow:hidden;
    border:1px solid rgba(255,255,255,0.07);
  }
  .hero-card::after{
    content:"";position:absolute;right:-18px;top:-18px;width:80px;height:80px;
    border-radius:50%;background:rgba(216,183,127,0.12);
  }
  .hero-card .hv{font-family:'Fraunces',serif;font-weight:600;font-size:28px;line-height:1;color:var(--brass-light);}
  .hero-card .hl{font-size:11.5px;color:#B9C4D4;margin-top:6px;letter-spacing:0.2px;}
  .hero-card .hi{position:absolute;right:16px;top:16px;opacity:0.55;color:var(--brass-light);}

  .stat-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;
  }
  .stat-card{
    background:var(--card-bg);border-radius:11px;padding:13px 15px 11px;overflow:hidden;
    border:1px solid var(--border);border-left:4px solid var(--sc-color);cursor:pointer;
    transition:transform .15s, box-shadow .15s;
    display:flex;flex-direction:column;
  }
  .stat-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px var(--shadow);}
  .stat-card-row{
    display:flex;align-items:center;gap:12px;
  }
  .stat-card-text{min-width:0;flex:1;}
  .stat-card-icon{
    width:32px;height:32px;border-radius:8px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--sc-grad,var(--sc-color));color:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,0.16);
  }
  .stat-card-icon svg{width:15px;height:15px;}
  .stat-card-num{
    font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:12.5px;color:var(--sc-color);
    flex-shrink:0;background:var(--sc-bg);padding:3px 9px;border-radius:20px;
  }
  .stat-card-title{font-family:'Fraunces',serif;font-weight:600;font-size:13px;color:var(--sc-color);margin:0;}
  .stat-card-sub{font-size:10.5px;color:var(--text-2);margin:9px 0 0;}
  .stat-card-bar{height:4px;width:100%;background:var(--sc-bg);border-radius:2px;margin-top:11px;}
  .stat-card-bar-fill{height:100%;background:var(--sc-color);opacity:0.9;transition:width .3s;border-radius:2px;}
  .alert-block{
    background:var(--card-bg);border:1px solid var(--border);border-radius:10px;
    padding:14px 16px;margin-bottom:16px;
  }
  .alert-heading{
    display:flex;align-items:center;gap:8px;font-family:'Fraunces',serif;font-weight:600;
    font-size:14px;margin:0 0 8px;color:var(--text);
  }
  .alert-rows{display:flex;flex-direction:column;gap:6px;}
  .alert-row{
    display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
    padding:6px 10px;border-radius:6px;background:var(--card-bg-2);color:var(--text);
  }
  .alert-row.is-expired{background:var(--warn-bg);color:var(--warn);font-weight:600;}
  .alert-when{color:var(--text-2);font-family:'IBM Plex Mono',monospace;font-size:11.5px;flex-shrink:0;}
  .alert-row.is-expired .alert-when{color:var(--warn);}

  /* ---------- Linked apps (other record system files) ---------- */
  .linked-apps{margin-bottom:22px;}
  .linked-apps-heading{
    display:flex;align-items:center;gap:8px;font-family:'Fraunces',serif;font-weight:600;
    font-size:14px;margin:0 0 10px;color:var(--text);
  }
  .linked-apps-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;
  }
  .linked-app-card{
    background:var(--card-bg);border-radius:11px;padding:13px 15px;overflow:hidden;
    border:1px solid var(--border);
    border-top:3px solid var(--la-accent, var(--border));
    border-left:4px solid var(--la-accent, var(--border));
    text-decoration:none;color:inherit;cursor:pointer;
    display:flex;flex-direction:column;
    transition:transform .15s, box-shadow .15s, border-color .15s;
  }
  .linked-app-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px var(--shadow);}
  .linked-app-row{display:flex;align-items:center;gap:12px;}
  .linked-app-icon{
    width:32px;height:32px;border-radius:8px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--la-bg,var(--card-bg-2));color:var(--la-color,var(--brass));
    box-shadow:0 4px 10px rgba(0,0,0,0.14);
  }
  .linked-app-icon svg{width:15px;height:15px;}
  .linked-app-arrow{
    flex-shrink:0;color:var(--la-accent,var(--text-2));transform:rotate(45deg);
    background:var(--la-tint,transparent);border-radius:50%;width:22px;height:22px;
    display:flex;align-items:center;justify-content:center;
  }
  .linked-app-arrow svg{width:12px;height:12px;}
  .linked-app-text{min-width:0;flex:1;}
  .linked-app-title{font-family:'Fraunces',serif;font-weight:600;font-size:13px;color:var(--la-accent,var(--text));margin:0;}
  .linked-app-sub{font-size:10.5px;color:var(--text-2);margin:9px 0 0;}

  @media (max-width:900px){ .hero-stats{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .hero-stats{grid-template-columns:1fr;} }

  html[data-theme="dark"] .stat-card-icon{filter:brightness(0.85) saturate(0.9);}
  html[data-theme="dark"] .linked-app-icon{filter:brightness(0.85) saturate(0.9);}
  html[data-theme="dark"] .card-head{filter:brightness(0.55) saturate(0.9);}

  /* ---------- Recycle Bin ---------- */
  .trash-card{opacity:0.94;}
  .trash-when{
    font-family:'IBM Plex Mono',monospace;font-size:10px;
    color:var(--text-2);white-space:nowrap;
  }
  .trash-row{
    display:flex;justify-content:space-between;gap:14px;
    padding:8px 16px;border-bottom:1px solid var(--row-border);
    font-size:12.5px;
  }
  .trash-row:last-child{border-bottom:none;}
  .trash-label{font-weight:600;color:var(--text-2);flex-shrink:0;}
  .trash-value{
    font-family:'IBM Plex Mono',monospace;color:var(--text);
    text-align:right;word-break:break-word;
  }
  .trash-value.masked{letter-spacing:2px;color:var(--text-2);}
  .trash-actions{
    display:flex;gap:8px;padding:10px 16px;
    border-top:1px solid var(--row-border);
  }

  .toast{
    position:fixed;bottom:22px;right:22px;
    background:var(--navy);color:#F6F1E6;
    padding:10px 16px;border-radius:8px;font-size:12.5px;
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
    opacity:0;transform:translateY(8px);
    transition:all .25s;pointer-events:none;z-index:50;
    display:flex;align-items:center;gap:8px;
  }
  .toast.show{opacity:1;transform:translateY(0);}

  @media (max-width:760px){
    body{flex-direction:column;min-height:0;}
    /* Without this, .main's flex:1 (from the desktop row layout) tries to
       stretch it to fill the full 100vh of the flex column, leaving a big
       blank gap between the last card and the toolbar slot below it
       whenever a section's content is shorter than the viewport. */
    .main{flex:none;}
    .sidebar{width:100%;height:auto;position:relative;padding:14px 0;overflow-y:visible;}
    .brand{padding:0 16px 14px;}
    .brand-top{align-items:center;}
    .seal{width:42px;height:42px;font-size:12px;margin-bottom:0;}
    .brand h1{font-size:15px;}
    .tabs{
      display:flex;overflow-x:auto;gap:4px;padding:8px 12px;-webkit-overflow-scrolling:touch;
      /* Without this, a flex item is never allowed to shrink below the
         width its content naturally needs (its "min-content size"). Since
         the tab pills are nowrap/flex-shrink:0, that natural width is the
         full row of all 10 tabs — so .tabs would refuse to stay within the
         sidebar's width and would instead push the WHOLE page wider,
         making the entire header (photo, title, everything) slide
         sideways on swipe instead of just this row scrolling internally.
         min-width:0 + width:100% force .tabs to stay within its parent's
         width so overflow-x:auto actually kicks in here, not on <body>. */
      min-width:0;width:100%;
      /* Constrain touch gestures on this bar to horizontal panning only, and
         stop the horizontal scroll from "chaining" into a vertical page
         scroll. Without these, swiping sideways across the pinned tabs bar
         can be misread by the browser as a tiny vertical scroll, which
         momentarily changes window.scrollY and incorrectly unpins the bar
         (see updateTabsPin() below). */
      touch-action:pan-x pinch-zoom;
      overscroll-behavior:contain;
    }
    .tabs-spacer{display:none;}
    .tabs.tabs-pinned{
      position:fixed;top:0;left:0;right:0;z-index:20;
      background:linear-gradient(180deg,var(--sb-bg-1) 0%,var(--sb-bg-2) 100%);
      box-shadow:0 2px 8px var(--shadow);
      margin:0;
    }
    .tabs.tabs-pinned + .tabs-spacer{display:block;}
    .tab{white-space:nowrap;flex-shrink:0;}
    .sidebar-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 16px 0;}
    .sidebar-foot #lastSaved{width:100%;margin-bottom:2px;}
    .sidebar-foot .foot-pair{width:100%;margin-top:0;}
    .field-row{grid-template-columns:1fr;gap:4px;padding:12px 14px;}
    .row-actions{justify-content:flex-end;margin-top:-24px;}
    .row-menu-btn{display:flex;color:var(--text-2);}
    .row-actions-icons{display:none;}
    .field-row.actions-open .row-actions-icons{display:flex;}
    .field-row.actions-open .row-menu-btn{background:var(--card-bg-2);color:var(--text);}
    .field-delete{opacity:1;}
    .icon-btn.lock-off{opacity:1;}
    .content{padding:16px 14px 18px;}
    .topbar{padding:14px 14px 12px;}
    .topbar h2{font-size:19px;}
    .hero-card{padding:14px 16px;}
    .hero-card .hv{font-size:22px;}
    .stat-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .stat-card{padding:12px 14px 10px;}
    .stat-card-title{font-size:13.5px;}
    .stat-card-sub{display:none;}
    .linked-apps-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .linked-app-card{padding:12px 14px;}
    .linked-app-title{font-size:13.5px;}
    .linked-app-sub{display:none;}
    .toast{left:14px;right:14px;bottom:14px;}
  }
  @media (max-width:400px){
    .stat-grid{grid-template-columns:1fr;}
    .linked-apps-grid{grid-template-columns:1fr;}
  }

  /* Toolbar (export/import/lock/etc.) relocated to the bottom of the
     page on mobile only — see positionMobileToolbar() in the script.
     On desktop this slot stays empty and hidden. */
  .mobile-toolbar-slot{display:none;}
  @media (max-width:760px){
    .mobile-toolbar-slot{
      display:block;
      background:linear-gradient(180deg,var(--sb-bg-1) 0%,var(--sb-bg-2) 100%);
      border-top:1px solid var(--border);
      margin-top:8px;
    }
    .mobile-toolbar-slot .sidebar-foot{
      border-top:none;margin-top:0;padding-top:16px;
    }
  }

  @media (max-width:760px){
    .icon-btn{padding:8px;}
    .trash-row{flex-direction:column;gap:3px;}
    .trash-value{text-align:left;}
  }

  /* ---------- Print ---------- */
  @media print{
    /* Force clean, light, paper-friendly colors no matter which theme
       (light/dark) is active on screen. !important is required here
       because html[data-theme="dark"] is a more specific selector and
       would otherwise win over a plain "html" rule. */
    html{
      --main-bg:#FFFFFF !important;
      --card-bg:#FFFFFF !important;
      --card-bg-2:#F3EEDF !important;
      --text:#22201B !important;
      --text-2:#5B6B82 !important;
      --border:#DCD2BA !important;
      --row-border:#EDE6D4 !important;
      --shadow:transparent !important;
      --focus-bg:transparent !important;
    }
    *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
    body{ display:block; }
    .sidebar,.searchwrap,.searchresults,.dt-strip,.toolbar,.card-add-field,
    .row-actions,.toast,.app-footer,.theme-toggle{ display:none !important; }
    .main{ background:#fff; }
    .topbar{ position:static; padding:0 0 14px; border-bottom:2px solid var(--brass); }
    .content{ padding:0; }
    .card{ box-shadow:none; break-inside:avoid; page-break-inside:avoid; margin-bottom:10px; }
    .card-head,.stat-card-icon,.linked-app-icon{ filter:none !important; }
    .hero-stats,.stat-grid{ break-inside:avoid; }
    .card-head-actions{ display:none !important; }
    body.print-single .card:not(.print-target){ display:none !important; }
    body.print-single .cat-desc,body.print-single .alert-block{ display:none !important; }
    @page{ margin:1.4cm; }
  }

  /* ===== Login screen ===== */
  #loginScreen{
    position:fixed; inset:0; z-index:9999;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:24px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:
      radial-gradient(circle at 15% 15%, rgba(99,102,241,0.35), transparent 55%),
      radial-gradient(circle at 85% 80%, rgba(16,185,129,0.25), transparent 55%),
      linear-gradient(160deg, #0B1120 0%, #131A33 45%, #171233 100%);
  }
  #loginScreen.hidden{ display:none; }
  html.lg-locked, html.lg-locked body{ overflow:hidden !important; height:100% !important; }
  html.lg-locked #uSuiteBtn{ display:none !important; }
  .login-inner{
    width:100%; display:flex; flex-direction:column; align-items:center;
    margin:auto 0;
  }
  .login-card{
    position:relative;
    width:100%; max-width:420px;
    background:rgba(20,24,45,0.92);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:22px;
    padding:38px 34px 28px;
    box-shadow:0 25px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02);
    text-align:center;
    overflow:hidden;
    animation:loginCardIn .45s ease;
  }
  @keyframes loginCardIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
  .login-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:5px;
    background:linear-gradient(90deg,#4F7CFF,#8B5CF6,#10B981,#F59E0B);
  }
  /* चरण १ (Firebase खाता प्रमाणीकरण) — नीलो टप-बार, चरण २ (vault लगइन) —
     हरियो टप-बार, ताकि दुई कार्ड एकैखाले नदेखिइकन कुन चरणमा छौं भन्ने
     आँखाले तुरुन्तै छुट्याउन सकून्। */
  .login-card-accent-blue::before{ background:linear-gradient(90deg,#3378DD,#4F7CFF); }
  .login-card-accent-green::before{ background:linear-gradient(90deg,#1D9E75,#10B981); }

  .login-steps{
    display:flex; align-items:center; gap:10px;
    width:100%; max-width:420px; margin:0 auto 18px;
  }
  .login-step{ display:flex; align-items:center; gap:8px; }
  .login-step-dot{
    width:24px; height:24px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700;
    background:rgba(255,255,255,0.08); color:#7A82A6;
    border:1px solid rgba(255,255,255,0.12);
    transition:background .25s,color .25s,border-color .25s;
  }
  .login-step-label{ font-size:12.5px; color:#7A82A6; font-weight:600; transition:color .25s; }
  .login-step-line{ flex:1; height:1px; background:rgba(255,255,255,0.12); }
  .login-step.active .login-step-dot{ background:#4F7CFF; color:#fff; border-color:#4F7CFF; }
  .login-step.active .login-step-label{ color:#C7CCE6; }
  .login-step.done .login-step-dot{ background:#10B981; color:#fff; border-color:#10B981; }
  .login-step.done .login-step-label{ color:#67D6C4; }
  .login-avatar{
    width:110px; height:110px; border-radius:50%; margin:6px auto 18px;
    position:relative; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(145deg,#1c2340,#232a4d);
    padding:4px;
  }
  .login-avatar::before{
    content:""; position:absolute; inset:-4px; border-radius:50%;
    background:conic-gradient(from 0deg,#4F7CFF,#8B5CF6,#10B981,#F59E0B,#4F7CFF);
    filter:blur(6px); opacity:0.75; z-index:0;
  }
  .login-avatar-inner{
    position:relative; z-index:1; width:100%; height:100%; border-radius:50%;
    overflow:hidden; display:flex; align-items:center; justify-content:center;
    background:#0F1B2E; color:#D8B77F; border:3px solid #171233;
  }
  .login-avatar-inner img{ width:100%; height:100%; object-fit:cover; display:none; }
  .login-avatar-inner span{ font-family:'Fraunces',Georgia,serif; font-size:26px; font-weight:600; }
  .login-title{
    font-family:'Fraunces',Georgia,serif; font-size:24px; font-weight:600; margin:0 0 6px;
    background:linear-gradient(90deg,#F59E0B,#8B5CF6,#10B981);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .login-sub{ color:#9BA3C4; font-size:13.5px; margin:0 0 26px; }
  .login-field{
    position:relative; margin-bottom:16px; text-align:left;
  }
  .login-field .lf-icon{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    color:#8B93B8; display:flex; pointer-events:none;
  }
  .login-field input{
    width:100%; box-sizing:border-box;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    padding:13px 16px 13px 46px;
    font-size:14.5px; color:#EDEFFA;
    font-family:'Noto Sans','Noto Sans Devanagari',sans-serif;
  }
  .login-field input::placeholder{ color:#7A82A6; }
  .login-field input:focus{ outline:none; border-color:#8B5CF6; background:rgba(139,92,246,0.08); }
  .login-field .lf-eye{
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:#F0A868; cursor:pointer; padding:4px; display:flex;
  }
  .login-row{
    display:flex; align-items:center; justify-content:space-between;
    margin:2px 0 22px; font-size:13px;
  }
  .login-remember{ display:flex; align-items:center; gap:8px; color:#C7CCE6; cursor:pointer; user-select:none; }
  .login-remember input[type="checkbox"]{
    appearance:none; -webkit-appearance:none; width:17px; height:17px; border-radius:5px;
    border:1.5px solid #6B74A8; background:rgba(255,255,255,0.05); cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .login-remember input[type="checkbox"]:checked{
    background:linear-gradient(135deg,#6D5DF6,#4F7CFF); border-color:#6D5DF6;
  }
  .login-remember input[type="checkbox"]:checked::after{
    content:"✓"; color:#fff; font-size:11px; font-weight:700; line-height:1;
  }
  .login-forgot{ color:#67D6C4; text-decoration:none; font-weight:600; }
  .login-forgot:hover{ text-decoration:underline; }
  .login-btn{
    width:100%; border:none; cursor:pointer;
    padding:14px 16px; border-radius:12px;
    font-size:15px; font-weight:700; letter-spacing:.2px;
    color:#fff; font-family:'Noto Sans','Noto Sans Devanagari',sans-serif;
    background:linear-gradient(90deg,#6D5DF6,#4F7CFF,#10B981);
    box-shadow:0 10px 26px rgba(79,124,255,0.35);
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .login-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(79,124,255,0.45); }
  .login-btn:active{ transform:translateY(0); }
  .login-btn:disabled{ opacity:0.6; cursor:default; transform:none; }
  .login-biometric-btn{
    width:100%; cursor:pointer;
    padding:12px 16px; border-radius:12px; margin-top:10px;
    font-size:14px; font-weight:700; letter-spacing:.2px;
    color:#D8DCF5; font-family:'Noto Sans','Noto Sans Devanagari',sans-serif;
    background:rgba(255,255,255,0.05);
    border:1.5px solid rgba(139,92,246,0.4);
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background .15s ease, border-color .15s ease;
  }
  .login-biometric-btn:hover{ background:rgba(139,92,246,0.12); border-color:#8B5CF6; }
  .login-biometric-btn:disabled{ opacity:0.55; cursor:default; }
  .login-biometric-btn.hidden{ display:none; }
  .login-biometric-manage{
    display:block; margin-top:12px; font-size:11.5px; color:#8B93B8;
    text-decoration:none; cursor:pointer; background:none; border:none;
  }
  .login-biometric-manage:hover{ color:#C7CCE6; text-decoration:underline; }
  .login-biometric-manage.hidden{ display:none; }
  .login-error{
    color:#FF9B9B; font-size:12.5px; margin:-6px 0 14px; min-height:0; display:none;
  }
  .login-error.show{ display:block; }
  .login-card.shake{ animation:loginShake .4s; }
  @keyframes loginShake{
    10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);}
    30%,50%,70%{transform:translateX(-8px);} 40%,60%{transform:translateX(8px);}
  }
  .login-foot{ margin-top:22px; font-size:11.5px; color:#767EA0; }
  .login-foot .login-dev{ margin-top:4px; font-size:12px; font-weight:700;
    background:linear-gradient(90deg,#67D6C4,#8B5CF6); -webkit-background-clip:text; background-clip:text; color:transparent; }

  /* OTP + reveal views */
  .login-card.secondary{ display:none; }
  .login-otp-icon{ font-size:38px; margin:4px 0 10px; }
  .login-desc{ color:#9BA3C4; font-size:13px; line-height:1.7; margin:0 0 22px; }
  .login-desc b{ color:#D8DCF5; }
  .otp-input-row{ display:flex; gap:8px; justify-content:center; margin-bottom:8px; }
  .otp-box{
    width:44px; height:52px; text-align:center; font-size:22px; font-weight:800;
    color:#EDEFFA; background:rgba(255,255,255,0.05); border:1.5px solid rgba(255,255,255,0.14);
    border-radius:10px; font-family:'IBM Plex Mono',monospace;
  }
  .otp-box:focus{ outline:none; border-color:#8B5CF6; background:rgba(139,92,246,0.1); }
  .login-back{
    display:inline-flex; align-items:center; gap:5px; color:#8B93B8; font-size:12.5px;
    text-decoration:none; margin-top:16px; cursor:pointer; background:none; border:none;
  }
  .login-back:hover{ color:#C7CCE6; }
  .login-resend{ color:#67D6C4; font-size:12.5px; text-decoration:none; font-weight:600; cursor:pointer; background:none; border:none; }
  .login-resend:disabled{ color:#5B6180; cursor:default; }