body{font-family:system-ui,sans-serif;margin:0;background:#f5f7fb;color:#111}header{display:flex;gap:12px;align-items:center;background:#1d4ed8;color:#fff;padding:8px 14px;flex-wrap:wrap}h1{font-size:18px;margin:0}
nav{display:flex;gap:4px;padding:6px;background:#e0e7ff;flex-wrap:wrap}nav button{border:0;padding:8px 12px;border-radius:6px;background:#fff}nav button.on{background:#1d4ed8;color:#fff}
main{padding:12px;max-width:1000px;margin:auto}.pill{padding:2px 8px;border-radius:9px;background:#16a34a;font-size:12px}.pill.off{background:#dc2626}
.row{display:flex;gap:8px;align-items:center;padding:8px;border-bottom:1px solid #ddd;background:#fff}.row:hover{background:#eef}.grow{flex:1}
.field{display:flex;gap:6px;align-items:center;margin:4px 0}.field b{width:110px}.copy{font-size:12px;padding:2px 8px}
table{border-collapse:collapse;width:100%;background:#fff}td,th{border:1px solid #ddd;padding:5px;font-size:13px}.miss{background:#fee2e2}.ok{background:#dcfce7}
input,textarea,select{padding:6px;font:inherit}.card{background:#fff;padding:12px;border-radius:8px;margin:8px 0;box-shadow:0 1px 3px #0002}
#banner{background:#fef3c7;padding:4px 14px;font-size:13px}#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:8px 14px;border-radius:6px;display:none}
/* ---- Travel vault (mobile-first) ---- */
button{font:inherit;padding:8px 12px;border-radius:8px;border:1px solid #c7d2fe;background:#fff;cursor:pointer;min-height:40px}
.pri{background:#1d4ed8;color:#fff;border-color:#1d4ed8}.danger{color:#b91c1c;border-color:#fca5a5}.wide{width:100%;margin-top:8px}.sm{min-height:34px;padding:4px 10px;font-size:13px}
.muted{color:#555;font-size:13px}.mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.5px}
.lockcard{max-width:420px;margin:24px auto;text-align:center}.lockcard input{width:100%;box-sizing:border-box;margin:6px 0;font-size:18px;padding:12px}.lockicon{font-size:48px}
.vbar{display:flex;gap:8px;align-items:center;margin-bottom:8px}.vbar input{font-size:16px;padding:10px}
.addrow{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}.addrow button{white-space:nowrap;font-size:14px}
.vgrid{display:grid;gap:8px;grid-template-columns:1fr}.vitem{margin:0}.vh{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.vf{display:flex;gap:6px;align-items:center;border-top:1px solid #eee;padding:6px 0}.vf small{color:#666}.vv{font-size:16px;word-break:break-all}
.copy.big{min-width:64px;background:#eef2ff;font-weight:600;font-size:14px;padding:8px}
#veditor label{display:block;margin:6px 0;font-size:13px;color:#444}#veditor input:not([type=checkbox]),#veditor select,#veditor textarea{display:block;width:100%;box-sizing:border-box;font-size:16px}
.row0{display:flex;gap:8px;margin-top:10px}.filebtn{display:inline-block;padding:8px 12px;border:1px solid #c7d2fe;border-radius:8px;cursor:pointer}.filebtn input{display:none}
.tgrid{display:grid;gap:10px;grid-template-columns:1fr}.tcard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border-radius:14px;background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;border:0;text-align:left;min-height:96px}
.tcard small{opacity:.85}.tcard .tv{font-size:26px;font-weight:700;word-break:break-all}.tcard em{font-size:12px;opacity:.75}
#toast{z-index:9;font-size:15px}
@media(min-width:700px){.vgrid{grid-template-columns:1fr 1fr}.tgrid{grid-template-columns:1fr 1fr}}
#toast{pointer-events:none}
/* ---- Outlook (outlook.js) ---- */
.ol-row{cursor:pointer;min-height:44px}a.olact{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#1d4ed8;border:1px solid #c7d2fe;border-radius:8px;min-height:40px;box-sizing:border-box}#ollog li{margin:4px 0;font-size:13px}code{word-break:break-all;background:#eef2ff;padding:1px 4px;border-radius:4px}

.tsec{background:#fff1;border:1px solid #8883;border-radius:14px;margin:10px 0;padding:0 12px}.tsec summary{display:flex;justify-content:space-between;align-items:center;padding:14px 2px;font-weight:700;font-size:18px;cursor:pointer;list-style:none}.tsec summary::-webkit-details-marker{display:none}.tsec summary small{background:#3b82f6;color:#fff;border-radius:10px;padding:2px 9px;font-size:13px}.tsec[open] summary{border-bottom:1px solid #8883;margin-bottom:10px}.tsec .tgrid{padding-bottom:12px}

/* ---- Night mode ---- */
html.dark{color-scheme:dark}html.dark body{background:#0b1220;color:#e5e7eb}
html.dark header{background:#111a2e}html.dark nav{background:#0f172a}html.dark nav button{background:#1e293b;color:#e5e7eb}html.dark nav button.on{background:#2563eb;color:#fff}
html.dark .card,html.dark .row,html.dark table{background:#151e31;color:#e5e7eb;box-shadow:none}html.dark .row:hover{background:#1e293b}
html.dark .row,html.dark td,html.dark th,html.dark .vf{border-color:#2a3550}
html.dark button,html.dark .filebtn{background:#1e293b;color:#e5e7eb;border-color:#334155}html.dark .pri{background:#2563eb;border-color:#2563eb;color:#fff}html.dark .danger{color:#f87171;border-color:#7f1d1d}
html.dark .copy.big{background:#1e3a8a;color:#fff}html.dark input,html.dark textarea,html.dark select{background:#0f172a;color:#e5e7eb;border:1px solid #334155}
html.dark .muted,html.dark .vf small,html.dark #veditor label{color:#9ca3af}html.dark #banner{background:#422006;color:#fde68a}
html.dark .miss{background:#450a0a}html.dark .ok{background:#052e16}html.dark #toast{background:#e5e7eb;color:#111}
html.dark .tsec{background:#111a2e;border-color:#2a3550}html.dark .tcard{background:linear-gradient(135deg,#1e3a8a,#1d4ed8)}
.tsec .tbody{padding-bottom:12px}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}.tscroll table{min-width:420px}
.tlist{border-radius:10px;overflow:hidden;margin-bottom:12px}.tlist .row:last-child{border-bottom:0}.tbar{border-radius:10px;position:sticky;top:0;z-index:2}
.row0.wrap{flex-wrap:wrap;align-items:center}.tsec .tbody ul{margin:0 0 12px;padding-left:20px}.tsec .tbody li{margin:4px 0}.tsec .tbody>p:first-child{margin-top:0}
.tsec .card{box-shadow:none;border:1px solid #8883}#olstatus .row0,#olsetup .row0{margin-bottom:10px}
@media(max-width:480px){.tsec{padding:0 8px}.tsec summary{font-size:16px;padding:12px 2px}.tbar{flex-wrap:wrap}.tbar #q{flex-basis:100%}.row small{font-size:12px}}
html.dark .tsec .card{border-color:#2a3550}html.dark .tsec summary small{background:#2563eb}html.dark .tbar{background:#151e31}

/* ---- ID photos ---- */
.vthumbs{display:flex;gap:8px;margin-top:6px}.vthumb{padding:2px;display:flex;flex-direction:column;align-items:center;gap:2px;background:none}
.vthumb img{width:88px;height:56px;object-fit:cover;border-radius:6px;display:block}
.vphotos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.vslot{display:flex;flex-direction:column;gap:4px;min-width:0}
.vprev{width:100%;aspect-ratio:1.586;object-fit:cover;border-radius:8px;background:#f1f5f9}.vprev.empty{display:flex;align-items:center;justify-content:center;color:#64748b;font-size:.85em;border:1px dashed #cbd5e1}
#veditor .vslot .filebtn input[type=file]{display:none}#veditor .vslot label.filebtn{display:inline-block;margin:0;font-size:.9em;color:inherit}.vslot .row0{margin-top:2px;flex-wrap:wrap;gap:6px}.vslot .filebtn,.vslot .row0 button{padding:6px 10px;font-size:.9em}
.tphotos{display:flex;gap:6px;margin:-2px 0 6px}
#vviewer{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center}
#vviewer img{max-width:100vw;max-height:100vh;object-fit:contain}
#vvclose{position:fixed;top:10px;right:10px;z-index:1;font-size:1.4em;background:rgba(255,255,255,.9);color:#111;border-radius:50%;width:44px;height:44px}
html.dark .vprev{background:#0f172a}html.dark .vprev.empty{border-color:#334155;color:#9ca3af}html.dark .vthumb{background:none}

/* security: password rule / generator / kit */
.genrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.genout{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.genpw{word-break:break-all;background:#eef2ff;padding:4px 6px;border-radius:4px;font-size:14px}
.pwmsg{font-size:13px;margin:4px 0}.pwmsg.bad{color:#b91c1c}.pwmsg.good{color:#15803d}.warn{color:#b45309;font-size:13px;margin:4px 0}.warn:empty,.pwmsg:empty{display:none}
#kitcard .chk,#vautolock{margin:6px 0}#cpwbox input{display:block;width:100%;margin:4px 0;box-sizing:border-box}
html.dark .genpw{background:#1e293b;color:#e5e7eb}html.dark .pwmsg.bad{color:#f87171}html.dark .pwmsg.good{color:#4ade80}html.dark .warn{color:#fbbf24}

.linkbtn{background:none;border:none;color:#1d4ed8;text-decoration:underline;padding:4px 0;cursor:pointer;font-size:14px}.seclink{margin:8px 0 0;text-align:center}
.secpage{line-height:1.5;overflow-wrap:anywhere}.secpage h2{font-size:20px;margin-top:0}.secpage h3{font-size:16px}.secpage li{margin:6px 0}.secpage a{color:#1d4ed8}.secpage ol.sources{font-size:13px}
html.dark .linkbtn,html.dark .secpage a{color:#93c5fd;background:none;border:none}

.kwgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:6px 0}.kwgrid .kw{min-width:0;width:100%}
.pwwrap{display:flex;gap:4px;align-items:center;width:100%}.pwwrap input{flex:1;min-width:0}.pweye{flex:none;padding:4px 8px}
#vcrop{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px;touch-action:none}
#vcrop .cphint{color:#ddd;margin:0}.cpstage{position:relative;touch-action:none;user-select:none}.cpstage canvas{display:block}
.cpbox{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.55);cursor:move;touch-action:none}
.cpbox i{position:absolute;width:34px;height:34px;background:#fff;border-radius:50%;border:3px solid #2563eb;touch-action:none}
.cpbox i[data-h=nw]{left:-18px;top:-18px}.cpbox i[data-h=ne]{right:-18px;top:-18px}.cpbox i[data-h=sw]{left:-18px;bottom:-18px}.cpbox i[data-h=se]{right:-18px;bottom:-18px}
.cpbar{display:flex;gap:12px;width:100%;max-width:480px}.cpbar button{flex:1;padding:14px;font-size:1.1em}
@keyframes svp{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.7)}50%{box-shadow:0 0 0 8px rgba(37,99,235,0)}}.pulse{animation:svp .8s 3}

#vpwdlg{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}#vpwdlg .card{max-width:440px;width:100%}#vpwdlg input{width:100%;box-sizing:border-box}.warn#vbad{margin:8px 0}
#vcrop .cpbar,#vcrop .cphint{position:relative;z-index:5}#vcrop .cpbar button{background:#2a2f3a;color:#fff;border:1px solid #555}#vcrop .cpbar button.pri{background:#2563eb;border-color:#2563eb;font-weight:700}
#vcrop{background:#000!important;z-index:9999!important}#vcrop .cpstage{margin:20px}.cpbox{box-shadow:0 0 0 2000px rgba(0,0,0,.55)}#vcrop .cpstage{overflow:visible;clip-path:inset(-20px)}
.pwbox[data-mode=words] .pwsingle,.pwbox[data-mode=single] .kwgrid,.pwbox[data-mode=words] .m-s,.pwbox[data-mode=single] .m-w{display:none}.pwbox .linkbtn{margin:2px 0 6px}
.restore label[for=vrestpw]{display:block;margin:6px 0 2px}.restore label small{display:block}.rlabel{margin:10px 0 4px}.filebtn.disabled{opacity:.45;pointer-events:none;cursor:not-allowed}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.restorecard{border:2px solid #2563eb}.restorecard h3,.restorecard summary{margin-top:0}.ctitle{margin:18px 0 6px;padding-top:12px;border-top:1px dashed #94a3b8}
