:root{
  --bg-cream:#FDF8F3;
  --bg-dots:radial-gradient(#EADFD3 1.2px, transparent 1.2px);
  --card-bg:#FFFFFF;
  --card-soft:#FAF5EF;
  --card-border:#EDE2D6;
  --card-border-hover:#DECBB8;

  --text-main:#42312A;
  --text-muted:#8C786C;
  --text-light:#BAA79A;

  --caramel:#A36B4F;   --caramel-bg:#F8EFE8;  --caramel-border:#EBD8CA;
  --green:#2A8558;     --green-bg:#EBF8F1;    --green-border:#CBEBD9;
  --rose:#D6336C;      --rose-bg:#FFF0F6;     --rose-border:#FFDEEB;
  --amber:#D96B27;     --amber-bg:#FFF4E6;    --amber-border:#FFD8A8;
  --slate:#3B76A6;     --slate-bg:#EDF5FC;    --slate-border:#CFE3F5;
  --grey:#8C786C;      --grey-bg:#F4EFEA;     --grey-border:#E6DDD4;
  --claude:#D97757;    --claude-bg:#FDF3EF;   --claude-border:#F5D5C6;
  --sub:#9B7E93;       --sub-bg:#F7F1F5;      --sub-border:#E8DBE4;
  --purple:#7C3AED;    --purple-bg:#F3E8FF;   --purple-border:#DDD6FE;
  --cyan:#0284C7;      --cyan-bg:#E0F2FE;     --cyan-border:#BAE6FD;

  --jelly-shadow: 0 8px 24px -4px rgba(82,56,42,.08), 0 3px 0 #EAE0D5, inset 0 2px 0 rgba(255,255,255,.9);
  --jelly-shadow-hover: 0 14px 30px -4px rgba(82,56,42,.13), 0 4px 0 #DFD1C3, inset 0 2px 0 #FFFFFF;
  --jelly-btn-shadow: 0 3px 0 #E4D7C8, 0 4px 10px rgba(82,56,42,.06), inset 0 1.5px 0 #FFFFFF;
  --shadow-card: 0 6px 20px rgba(66,49,42,.06);
  --shadow-hover: 0 12px 28px rgba(66,49,42,.11);

  --mono:'SF Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;width:100%;overflow:hidden;background-color:var(--bg-cream);background-image:var(--bg-dots);background-size:20px 20px;color:var(--text-main);font-family:var(--sans);font-size:14px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;color:var(--text-main);outline:none}

/* Lock Screen */
#lockScreen{position:fixed;inset:0;z-index:999;background-color:var(--bg-cream);background-image:radial-gradient(circle at 50% 35%, #FFFDFB 0%, #F9EFE4 100%);display:flex;align-items:center;justify-content:center}
#lockScreen.hidden{display:none}
.lock-stack{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(360px,calc(100vw - 32px));position:relative}
.lock-stage{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:68px}
.lock-mascots{position:absolute;top:0;left:50%;transform:translateX(-50%);width:220px;height:95px;pointer-events:none;z-index:2;filter:drop-shadow(0 6px 10px rgba(66,49,42,.08))}
.unlock-btn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 54px 24px;border-radius:32px;background:linear-gradient(180deg,#FFFFFF 0%,#FFF8F2 100%);border:2px solid #EFE3D6;box-shadow:0 12px 32px rgba(110,75,55,.11), 0 5px 0 #E5D5C5, inset 0 2px 0 #FFFFFF;font-size:15px;font-weight:800;color:var(--text-main);transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s,border-color .16s}
.unlock-btn:hover{border-color:#E0CBB6;box-shadow:0 16px 36px rgba(110,75,55,.15), 0 6px 0 #DBC7B4, inset 0 2px 0 #FFFFFF;transform:translateY(-2px)}
.unlock-btn:active{transform:translateY(2px);box-shadow:0 6px 16px rgba(110,75,55,.1), 0 2px 0 #DBC7B4}
.unlock-btn svg{width:38px;height:38px;color:#D97757;filter:drop-shadow(0 2px 4px rgba(217,119,87,.2))}

/* Header & Layout */
#app{display:flex;flex-direction:column;height:100%;max-width:1280px;margin:0 auto;padding:0 22px}
header{display:flex;align-items:center;justify-content:space-between;height:64px;flex:none;gap:12px;border-bottom:2px dashed rgba(222,203,184,.55)}
.brand{display:inline-flex;align-items:center;gap:8px;font:800 20px var(--mono);letter-spacing:-.03em;color:var(--text-main);margin-right:6px;user-select:none}
.brand-mascot{width:38px;height:28px;flex:none;filter:drop-shadow(0 2px 4px rgba(66,49,42,.08))}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--text-muted);background:rgba(255,255,255,.55);border:1.5px solid transparent;white-space:nowrap;transition:all .16s cubic-bezier(.34,1.56,.64,1)}
.tab:hover{color:var(--text-main);background:#FFFFFF;border-color:var(--card-border)}
.tab.active{color:var(--text-main);background:linear-gradient(180deg,#FFFFFF 0%,#FFF8F1 100%);border-color:#E5D4C3;box-shadow:var(--jelly-btn-shadow);transform:translateY(-1px)}
.tab span.cnt{font:700 11px var(--mono);color:var(--text-muted);padding:1.5px 7px;border-radius:999px;background:var(--grey-bg)}
.tab.active span.cnt{color:#B85D3B;background:#FFE8D9}

.top-actions{display:flex;align-items:center;gap:9px;flex:none}
.icon-btn{width:38px;height:38px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#FFFFFF 0%,#FAF3EC 100%);border:1.5px solid #E6D8C9;box-shadow:var(--jelly-btn-shadow);color:var(--text-main);transition:all .15s cubic-bezier(.34,1.56,.64,1)}
.icon-btn:hover{border-color:#D8C3AE;transform:translateY(-1px)}
.icon-btn:active{transform:translateY(1px);box-shadow:0 1px 0 #E4D7C8}
.icon-btn svg{width:17px;height:17px}
.icon-btn.primary{background:linear-gradient(180deg,#FF9B73 0%,#E86F42 100%);border-color:#D96034;color:#fff;box-shadow:0 3px 0 #BA4B22, 0 6px 14px rgba(232,111,66,.28), inset 0 1.5px 0 rgba(255,255,255,.45)}
.icon-btn.primary:hover{filter:brightness(1.03);transform:translateY(-1px)}

main{flex:1;overflow-y:auto;padding:22px 2px 48px;scrollbar-width:thin}

/* Copy Button */
.cp-btn{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-light);flex:none;transition:all .14s}
.cp-btn:hover{background:var(--grey-bg);color:var(--text-main);transform:scale(1.06)}
.cp-btn.copied{color:var(--green) !important;background:var(--green-bg) !important}
.cp-btn svg{width:13.5px;height:13.5px}

/* Pills & Tags (Jelly Candy Pills) */
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;border:1.5px solid var(--grey-border);background:linear-gradient(180deg,#FFFFFF 0%,var(--grey-bg) 100%);color:var(--grey);white-space:nowrap;box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(66,49,42,.04)}
.tag.caramel{color:var(--caramel);background:linear-gradient(180deg,#FFFDFB 0%,var(--caramel-bg) 100%);border-color:var(--caramel-border)}
.tag.green{color:var(--green);background:linear-gradient(180deg,#FAFFFC 0%,var(--green-bg) 100%);border-color:var(--green-border)}
.tag.amber{color:var(--amber);background:linear-gradient(180deg,#FFFDFA 0%,var(--amber-bg) 100%);border-color:var(--amber-border)}
.tag.rose{color:var(--rose);background:linear-gradient(180deg,#FFFAFC 0%,var(--rose-bg) 100%);border-color:var(--rose-border)}
.tag.slate{color:var(--slate);background:linear-gradient(180deg,#FAFDFF 0%,var(--slate-bg) 100%);border-color:var(--slate-border)}
.tag.cyan{color:var(--cyan);background:linear-gradient(180deg,#F7FDFF 0%,var(--cyan-bg) 100%);border-color:var(--cyan-border)}
.mono{font-family:var(--mono)}

/* 1. Jelly Candy Virtual Cards Grid */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px}
.vcard{position:relative;border-radius:24px;padding:18px 20px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;justify-content:space-between;height:158px;overflow:hidden;user-select:none;border:2px solid transparent}
.vcard::before{content:"";position:absolute;top:-50%;left:-20%;width:140%;height:90%;background:radial-gradient(ellipse at center,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 70%);pointer-events:none;transform:rotate(-8deg)}
.vcard:hover{transform:translateY(-4px) scale(1.01)}
.vcard:active{transform:translateY(0) scale(.99)}

/* Card Themes */
.vcard.theme-plasma{background:linear-gradient(135deg,#E0E7FF 0%,#D8B4FE 52%,#FBCFE8 100%);border-color:#F3E8FF;color:#3B1D5E;box-shadow:0 10px 24px -4px rgba(139,92,246,.22), 0 4px 0 #C4B5FD, inset 0 2px 0 rgba(255,255,255,.85)}
.vcard.theme-bybit{background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 48%,#FDBA74 100%);border-color:#FEF08A;color:#572B0C;box-shadow:0 10px 24px -4px rgba(245,158,11,.22), 0 4px 0 #FCD34D, inset 0 2px 0 rgba(255,255,255,.9)}
.vcard.theme-strawberry{background:linear-gradient(135deg,#FFE4E6 0%,#FECDD3 50%,#FDBA8C 100%);border-color:#FFE4E6;color:#5E1B2E;box-shadow:0 10px 24px -4px rgba(244,63,94,.2), 0 4px 0 #FDA4AF, inset 0 2px 0 rgba(255,255,255,.9)}
.vcard.theme-mint{background:linear-gradient(135deg,#CCFBF1 0%,#A7F3D0 55%,#BAE6FD 100%);border-color:#D1FAE5;color:#114232;box-shadow:0 10px 24px -4px rgba(16,185,129,.2), 0 4px 0 #6EE7B7, inset 0 2px 0 rgba(255,255,255,.9)}
.vcard.theme-soda{background:linear-gradient(135deg,#E0F2FE 0%,#BAE6FD 52%,#C7D2FE 100%);border-color:#E0F2FE;color:#17325C;box-shadow:0 10px 24px -4px rgba(14,165,233,.2), 0 4px 0 #7DD3FC, inset 0 2px 0 rgba(255,255,255,.9)}
.vcard.theme-peach{background:linear-gradient(135deg,#FFEDD5 0%,#FED7AA 50%,#FBCFE8 100%);border-color:#FFEDD5;color:#5C2814;box-shadow:0 10px 24px -4px rgba(249,115,22,.2), 0 4px 0 #FDBA74, inset 0 2px 0 rgba(255,255,255,.9)}

/* Primary Card Distinction */
.vcard.primary{border-width:2.5px;border-color:#FFFFFF;box-shadow:0 14px 30px -4px rgba(110,65,40,.24), 0 4px 0 rgba(90,55,35,.22), 0 0 0 3px rgba(255,180,120,.45), inset 0 2px 0 #FFFFFF}
.vcard-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.vcard-plat{font-size:17px;font-weight:800;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:7px}
.vcard-badge{font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.65);color:inherit;border:1.5px solid rgba(255,255,255,.85);backdrop-filter:blur(4px);box-shadow:0 2px 6px rgba(0,0,0,.04)}
.vcard.primary .vcard-badge{background:#422820;color:#FFF9F2;border-color:#633F33;box-shadow:0 2px 8px rgba(66,40,32,.25)}

.vcard-mid{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;margin:auto 0}
.vcard-chip{width:34px;height:25px;border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.4) 100%);border:1.5px solid rgba(255,255,255,.9);position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.vcard-chip::after{content:"";position:absolute;inset:5px;border:1px solid rgba(0,0,0,.08);border-radius:3px}
.vcard-watermark{position:absolute;right:-6px;bottom:14px;width:68px;height:68px;opacity:.22;pointer-events:none;z-index:0}

.vcard-bot{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--mono);position:relative;z-index:1}
.vcard-num{font-size:17px;font-weight:800;letter-spacing:.05em;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.vcard-exp{font-size:12.5px;font-weight:700;opacity:.8}

/* 2. Phones: Mini Smartphone / Jelly SIM Cards */
.phone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.sim-card{background:linear-gradient(180deg,#FFFFFF 0%,#FDF9F4 100%);border:2px solid #EAE0D5;border-radius:26px;box-shadow:var(--jelly-shadow);overflow:hidden;transition:all .18s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column}
.sim-card:hover{transform:translateY(-2px);box-shadow:var(--jelly-shadow-hover);border-color:#DECBB8}
.sim-card.warn-card{border-color:#FBD38D;background:linear-gradient(180deg,#FFFFFF 0%,#FFFBF5 100%)}
.sim-speaker{width:46px;height:5px;border-radius:999px;background:#E5D9CC;margin:10px auto 2px;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}
.sim-body{padding:12px 18px 16px;cursor:pointer;display:flex;flex-direction:column;gap:11px}
.sim-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sim-num-wrap{display:flex;align-items:center;gap:7px;min-width:0}
.sim-num-wrap .apl-flag{width:22px;height:15px;flex:none;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sim-num{font:800 15.5px var(--mono);color:var(--text-main);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-muted);background:#F7F0E8;padding:6px 11px;border-radius:12px;border:1px solid #EDE2D5}
.sim-meta-chip{width:14px;height:11px;border-radius:3px;background:linear-gradient(135deg,#FCD34D,#F59E0B);border:1px solid #D97706;flex:none}
.sim-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sim-card .row-detail{display:none;padding:11px 18px;background:#F7EFE6;border-top:1.5px dashed #E5D6C5;font-size:12.5px;color:var(--text-muted);justify-content:space-between;align-items:center;gap:12px}
.sim-card.open .row-detail{display:flex}

/* 3. Domains List Box */
.list-box{background:linear-gradient(180deg,#FFFFFF 0%,#FDF9F5 100%);border:2px solid #EAE0D5;border-radius:24px;box-shadow:var(--jelly-shadow);overflow:hidden}
.list-row{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1.5px solid #F2E9DF;cursor:pointer;transition:background .12s;flex-wrap:wrap}
.list-row:last-child{border-bottom:none}
.list-row:hover{background:#FAF3EB}
.list-main{display:flex;align-items:center;gap:7px;font:700 14px var(--mono);color:var(--text-main)}
.list-sub{font-size:12.5px;font-weight:600;color:var(--text-muted);display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.list-sub span{white-space:nowrap}
.list-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.row-detail{display:none;padding:11px 18px;background:#F8F1E9;border-bottom:1.5px solid #EDE2D6;font-size:12.5px;color:var(--text-muted);justify-content:space-between;align-items:center;gap:12px}
.list-row.open + .row-detail{display:flex}
.row-actions{display:flex;gap:7px;flex:none;margin-left:auto}
.btn-xs{font-size:12px;font-weight:700;padding:5px 12px;border-radius:10px;border:1.5px solid var(--card-border);background:#fff;color:var(--text-muted);box-shadow:0 2px 0 #EAE0D5}
.btn-xs:hover{border-color:var(--card-border-hover);color:var(--text-main);transform:translateY(-1px)}
.btn-xs.del:hover{color:var(--rose);border-color:var(--rose-border);background:var(--rose-bg)}
.btn-xs.confirming{color:#fff !important;background:var(--rose) !important;border-color:var(--rose) !important;box-shadow:none}

/* 4. Apple ID (Preserved structure & status pills + Jelly wrapper) */
.apl-wrap{background:linear-gradient(180deg,#FFFFFF 0%,#FDF9F5 100%);border:2px solid #EAE0D5;border-radius:24px;padding:16px 18px;box-shadow:var(--jelly-shadow);max-width:780px}
.apl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 4px}
.sheet.apl-sheet .apl-list{margin:0;padding:0}
.sheet.apl-sheet #sheetTitle svg{width:17px;height:17px;vertical-align:-2px;margin-right:4px}
.apl-sum{font:700 12.5px var(--mono);color:var(--text-muted);white-space:nowrap;background:#F7EFE8;padding:4px 11px;border-radius:999px;border:1px solid #EAE0D5}
.apl-sum b{color:var(--green)}
.apl-grp{position:relative;display:flex;align-items:center;gap:7px;border-radius:13px;
  padding:5px 12px;margin:8px 0 4px;overflow:hidden;border:1.5px solid}
.apl-grp:first-child{margin-top:2px}
.apl-grp.us{background:linear-gradient(90deg,#F0F5FF,#FAFCFF);border-color:#DCE8FC}
.apl-grp.jp{background:linear-gradient(90deg,#FFF2F2,#FFFAFA);border-color:#FCDEDE}
.apl-grp b{font-size:12.5px;font-weight:800;color:var(--text-main);position:relative;z-index:1}
.apl-grp .apl-flag{width:20px;height:13.3px;flex:none;border-radius:3px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.12);position:relative;z-index:1}
.apl-grp .apl-pat{position:absolute;right:58px;top:50%;transform:translateY(-50%);opacity:.2;pointer-events:none}
.apl-grp .apl-code{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font:800 22px var(--mono);letter-spacing:-.04em;opacity:.12;line-height:1;pointer-events:none;user-select:none}
.apl-grp.us .apl-code{color:#1E3A8A}
.apl-grp.jp .apl-code{color:#DC2626}
.apl-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:11px;cursor:pointer;transition:background .12s}
.apl-row:hover{background:#F8F2EB}
.apl-row.is-ok{background:#F7FCF9}
.apl-mail{flex:0 1 auto;min-width:0;font:600 12.5px var(--mono);color:#1F3F2D;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apl-copy{flex:none;width:22px !important;height:22px !important;margin-right:auto;color:var(--text-light) !important}
.apl-copy svg{width:12px !important;height:12px !important}
.apl-more-list .apl-copy{margin-right:0}
.apl-row.off .apl-mail{color:var(--text-muted);font-weight:500}
.apl-chk{flex:none;font-size:11px;color:var(--text-light);white-space:nowrap}
.apl-chk.stale{color:var(--amber);font-weight:600}
.apl-pill{flex:none;font-size:11.5px;font-weight:700;padding:1.5px 10px;border-radius:999px;border:1.5px solid}
.apl-pill.ok{color:var(--green);background:var(--green-bg);border-color:var(--green-border)}
.apl-pill.no{color:var(--grey);background:var(--grey-bg);border-color:var(--grey-border)}
.apl-pill.warn{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-border)}
.apl-chev{flex:none;color:var(--text-light);font-size:12px;transition:transform .2s}
.apl-row.open .apl-chev{transform:rotate(90deg)}
.apl-detail{display:none;margin:3px 4px 8px;padding:10px 12px;background:var(--card-soft);
  border:1.5px solid var(--card-border);border-radius:14px;font-size:12px;color:var(--text-muted)}
.apl-row.open + .apl-detail{display:block}
.apl-kv{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2.5px 0}
.apl-kv>span:last-child{font-family:var(--mono);color:var(--text-main);text-align:right;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apl-tag{font-size:11px;padding:1px 7px;border-radius:6px;border:1px solid;font-family:inherit;font-weight:600}
.apl-tag.claude{color:var(--claude);background:var(--claude-bg);border-color:var(--claude-border)}
.apl-tag.rose{color:var(--rose);background:var(--rose-bg);border-color:var(--rose-border)}
.apl-set{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1.5px dashed var(--card-border);align-items:center}
.apl-set button{font:700 11.5px -apple-system,"PingFang SC",sans-serif;padding:3.5px 11px;border-radius:999px;
  border:1.5px solid var(--card-border);background:#fff;color:var(--text-muted);cursor:pointer}
.apl-set button:hover{border-color:var(--card-border-hover);color:var(--text-main)}
.apl-set button.on.ok{color:var(--green);background:var(--green-bg);border-color:var(--green-border)}
.apl-set button.on.no{color:var(--text-main);background:var(--grey-bg);border-color:var(--grey-border)}
.apl-more{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--text-light);
  padding:7px 8px 0;margin-top:5px;border-top:1.5px dashed var(--card-border);cursor:pointer}
.apl-more:hover{color:var(--text-main)}
.apl-more-list{display:none;padding:4px 8px 4px;font:12px var(--mono);color:var(--text-muted)}
.apl-more-list .apl-row{padding:4px 6px}
.apl-more-list i{font-style:normal;font-family:-apple-system,"PingFang SC",sans-serif;color:var(--text-light);width:2.4em;flex:none;font-size:11.5px}
.apl-more.open + .apl-more-list{display:block}
.apl-row.apl-other i{font-style:normal;color:var(--text-light);font-size:12px;width:3.6em;flex:none;white-space:nowrap}

/* Empty State */
.empty-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:54px 20px;gap:10px;user-select:none}
.empty-box svg{width:150px;height:115px;filter:drop-shadow(0 8px 16px rgba(82,56,42,.08))}
.empty-word{font-size:13px;font-weight:800;color:var(--text-light);letter-spacing:.08em}

/* Drawer (Card Details) */
.backdrop{position:fixed;inset:0;background:rgba(66,49,42,.25);backdrop-filter:blur(2px);z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}
.backdrop.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100%;background:linear-gradient(180deg,#FFFFFF 0%,#FDF9F4 100%);border-left:2px solid #EAE0D5;border-radius:28px 0 0 28px;box-shadow:-12px 0 36px rgba(66,49,42,.12);z-index:101;transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.9,.2,1);display:flex;flex-direction:column;padding:22px}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:2px dashed #EDE2D6}
.drawer-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800}
.drawer-body{flex:1;overflow-y:auto;padding:16px 0;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.drawer-vcard{height:132px;margin-bottom:4px;cursor:default;pointer-events:none}
.d-item{display:flex;flex-direction:column;gap:4px;padding:11px 14px;border-radius:16px;background:#FAF4EE;border:1.5px solid #EDE2D5;box-shadow:inset 0 1px 0 #FFFFFF}
.d-label{font-size:11px;color:var(--text-light);font-weight:700}
.d-val-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.d-val{font:700 14px var(--mono);color:var(--text-main);word-break:break-all}
.d-val.sans{font-family:var(--sans);font-size:13px;font-weight:600}
.drawer-foot{display:flex;gap:10px;padding-top:14px;border-top:2px dashed #EDE2D6}
.drawer-foot button{flex:1;padding:10px;border-radius:14px;font-weight:800;font-size:13px;border:1.5px solid #E5D7C8;background:#FFFFFF;box-shadow:var(--jelly-btn-shadow);transition:all .14s}
.drawer-foot button:hover{border-color:#D4C0AC;transform:translateY(-1px)}
.drawer-foot button.del{color:var(--rose)}
.drawer-foot button.del.confirming{background:var(--rose);color:#fff;border-color:var(--rose);box-shadow:none}

/* Modal (Add/Edit) */
.modal-wrap{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(66,49,42,.28);backdrop-filter:blur(3px)}
.modal-wrap.open{display:flex}
.modal{background:linear-gradient(180deg,#FFFFFF 0%,#FDF9F4 100%);border:2px solid #EAE0D5;border-radius:26px;width:100%;max-width:430px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 44px rgba(66,49,42,.18), 0 5px 0 #DFD1C3;overflow:hidden}
.modal-head{padding:16px 20px;border-bottom:2px dashed #EDE2D6;font-weight:800;font-size:16px}
.modal-body{padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.f-row{display:flex;flex-direction:column;gap:5px}
.f-row.inline{flex-direction:row;align-items:center;gap:12px}
.f-row label{font-size:12px;font-weight:700;color:var(--text-muted)}
.f-row input[type="text"],.f-row input[type="date"],.f-row select,.f-row textarea{padding:9px 12px;border-radius:12px;border:1.5px solid #E6D9CB;background:#FAF5EF;font-size:13px;width:100%;transition:border-color .15s,background .15s}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{border-color:#D97757;background:#fff}
.f-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-foot{padding:13px 20px;border-top:2px dashed #EDE2D6;display:flex;justify-content:flex-end;gap:9px;background:#FAF4EE}
.btn{padding:8px 18px;border-radius:12px;font-size:13px;font-weight:800;border:1.5px solid #E4D6C7;background:#fff;color:var(--text-main);box-shadow:var(--jelly-btn-shadow)}
.btn.pri{background:linear-gradient(180deg,#FF9B73 0%,#E86F42 100%);color:#fff;border-color:#D96034;box-shadow:0 3px 0 #BA4B22, inset 0 1px 0 rgba(255,255,255,.4)}

/* Lock & Recovery Extras */
#lockScreen.busy .unlock-btn{opacity:.55;pointer-events:none}
#lockMsg{min-height:18px;font-size:13px;font-weight:600;color:var(--rose)}
.lock-link{background:none;border:0;color:var(--text-light);font-size:12px;font-weight:700;cursor:pointer;padding:4px 8px}
.lock-link:hover{color:var(--text-muted)}
#recoverForm{display:none;width:100%;gap:8px}
#recoverForm.open{display:flex}
#recoverForm input{flex:1;min-width:0;font:13px var(--mono);padding:9px 12px;border:1.5px solid var(--card-border);border-radius:12px;background:var(--card-bg);color:var(--text-main)}
#recoveryShow{display:none;position:fixed;inset:0;background:var(--bg-cream);align-items:center;justify-content:center;z-index:2}
#recoveryShow.open{display:flex}
.rc-card{background:var(--card-bg);border:2px solid var(--card-border);border-radius:24px;box-shadow:var(--jelly-shadow);padding:24px;width:min(400px,calc(100vw - 32px));display:flex;flex-direction:column;gap:12px}
.rc-title{font-weight:800;font-size:16px}
.rc-sub{font-size:12px;color:var(--text-muted)}
.rc-code-row{display:flex;align-items:center;gap:8px;background:var(--card-soft);border:1.5px solid var(--card-border);border-radius:14px;padding:12px}
.rc-code-row code{flex:1;font:700 14px var(--mono);letter-spacing:.5px;word-break:break-all}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--text-main);color:#fff;font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;transition:all .2s;z-index:1000;pointer-events:none;max-width:calc(100vw - 32px);box-shadow:0 8px 20px rgba(66,49,42,.2)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Demo preview toggle button */
.demo-lock-toggle{position:fixed;right:14px;bottom:14px;z-index:1000;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.88);border:1.5px solid #E5D6C6;box-shadow:0 4px 12px rgba(66,49,42,.1);font-size:11.5px;font-weight:700;color:var(--text-muted);backdrop-filter:blur(4px);transition:all .15s}
.demo-lock-toggle:hover{color:var(--text-main);background:#fff;transform:translateY(-1px)}

/* Responsive */
@media (max-width:768px){
  #app{padding:0 12px}
  .card-grid{grid-template-columns:1fr}
  .phone-grid{grid-template-columns:1fr}
  .drawer{top:auto;left:0;right:0;bottom:0;width:100%;max-height:88vh;border-left:none;border-top:2px solid #EAE0D5;border-radius:26px 26px 0 0;transform:translateY(100%)}
  .drawer.open{transform:translateY(0)}
  .list-tags{margin-left:0;width:100%}
}
@media (max-width:640px){
  header{flex-wrap:wrap;height:auto;padding:10px 0 8px;row-gap:8px}
  header > div:first-child{flex:0 0 100% !important;order:2}
  header .brand{display:none}
  .top-actions{order:1;margin-left:auto}
  .tabs{width:100%}
  .rc-code-row code{font-size:13px;letter-spacing:0}
}

/* ---- LINE FRIENDS 贴图（用户提供的官方图，见 public/stickers） ---- */
.lock-heart{position:absolute;top:-6px;left:50%;transform:translateX(-50%);display:flex;z-index:2;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(66,49,42,.10))}
.lock-heart img{width:96px;height:96px;display:block}
.lock-stage{padding-top:84px}
.brand-mascot{width:34px;height:34px;object-fit:contain}
.vcard-pet{position:absolute;right:8px;bottom:26px;width:58px;height:58px;object-fit:contain;pointer-events:none;z-index:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.12))}
.empty-pair{display:flex;align-items:flex-end;gap:0;filter:drop-shadow(0 8px 16px rgba(82,56,42,.08))}
.empty-pair img{width:110px;height:110px}
.empty-pair img+img{margin-left:-18px}
.sim-card{position:relative}
.sim-peek{position:absolute;top:10px;right:-14px;width:54px;height:54px;object-fit:contain;pointer-events:none;z-index:1;transform:rotate(-8deg)}
.sim-peek.brown{right:-10px;transform:rotate(6deg)}
.sim-top{padding-right:34px}
/* 贴图位置微调：卡片贴图让开有效期；Cony 探头图原本朝左探，放右边要翻转 */
.vcard-pet{right:12px;bottom:auto;top:44px;width:52px;height:52px}
.sim-peek{width:50px;height:50px;top:8px}
.sim-peek.cony{right:-6px;transform:scaleX(-1)}
.sim-peek.brown{right:-8px;transform:none}
@media (max-width:640px){ .tabs{gap:2px} .tabs > *{padding-left:9px !important;padding-right:9px !important;flex:none} }