/* Security: header chip, user menu, lock screen, permission dialog, Security page. */
.sec-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 12px 3px 3px;cursor:pointer;font:600 12px var(--sans);color:var(--ink)}
.sec-chip:hover{border-color:#c9d6cf}.sec-chip .avatar.mini{margin:0}
.sec-chip-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.sec-chip-name{display:none}.sec-chip{padding:3px}}
.sec-menu{position:fixed;z-index:60;width:250px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px #1f3a3022;padding:6px}
.sec-menu-who{display:flex;gap:10px;align-items:center;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.sec-menu-who b{display:block;font-size:13px}.sec-menu-who small{color:var(--muted);font-size:11px}
.sec-menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 10px;border-radius:8px;font:500 13px var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.sec-menu button:hover,.sec-menu button:focus-visible{background:#f1f5f2}.sec-menu .icon{width:16px;height:16px}

/* lock screen */
.sec-lock{width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0;padding:0;border:0;border-radius:0;background:radial-gradient(1200px 600px at 50% -10%,#e5efe8,#f6f8f5 60%);display:none;align-items:center;justify-content:center;box-shadow:none}
.sec-lock[open]{display:flex}.sec-lock::backdrop{background:#f6f8f5}
.sec-lock-card{width:min(600px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 90px #1f3a301c;padding:30px}
.sec-lock-brand{display:flex;align-items:center;gap:6px;font:800 24px Manrope,var(--sans);letter-spacing:-1px}.sec-lock-brand .brand-mark{color:var(--green);font-size:30px}.sec-lock-brand i{color:#86a45d;font-style:normal}
.sec-lock-time{margin:18px 0 20px}.sec-lock-time b{display:block;font:800 40px Manrope,var(--sans);letter-spacing:-1.5px}.sec-lock-time span{color:var(--muted);font-size:13px}
.sec-lock h2{font-size:16px;margin:0 0 12px}
.sec-lock-users{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.sec-lock-users button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:#fbfcfb;border-radius:12px;padding:10px;cursor:pointer;font:inherit;color:var(--ink)}
.sec-lock-users button:hover,.sec-lock-users button:focus-visible{border-color:var(--green);background:#f1f7f3}
.sec-lock-users .avatar{grid-row:span 2;margin:0}.sec-lock-users b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sec-lock-users small{color:var(--muted);font-size:11px}
.sec-lock-who{display:flex;align-items:center;gap:12px;margin-bottom:14px}.sec-lock-who b{display:block}.sec-lock-who small{color:var(--muted);font-size:12px}.sec-lock-who .link-btn{margin-left:auto}
.sec-lock-pin input{width:100%;box-sizing:border-box;font:700 22px var(--sans);letter-spacing:8px;text-align:center;padding:12px;border:1px solid #d4ddd8;border-radius:12px;margin-bottom:12px}
.sec-lock-pin input::placeholder{letter-spacing:.5px;font-size:15px;font-weight:500}.sec-lock-pin input:focus{outline:2px solid var(--green);outline-offset:1px}
.sec-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sec-pad button{height:52px;border:1px solid var(--line);background:#fbfcfb;border-radius:12px;font:700 18px var(--sans);color:var(--ink);cursor:pointer}
.sec-pad button:hover{background:#f1f5f2}.sec-pad button.go{background:var(--green);color:#fff;border-color:var(--green)}
.sec-lock .error{min-height:18px;margin-top:10px;color:#a5442f;font-size:13px;font-weight:600}
.sec-lock-demo{margin-top:18px;border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:var(--muted)}
.sec-lock-demo summary{cursor:pointer;font-weight:700;color:var(--ink)}.sec-lock-demo p{margin:8px 0}
.sec-lock-demo div{display:flex;flex-wrap:wrap;gap:6px}.sec-lock-demo span{background:#f3f6f4;border-radius:6px;padding:3px 8px}
.sec-lock-foot{margin:14px 0 0;font-size:11px;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* permission dialog */
.sec-dialog{width:min(520px,94vw)}
.sec-deny-head{display:flex;gap:14px;align-items:flex-start}.sec-deny-head h2{margin:2px 0 4px;font-size:19px}.sec-deny-head p{margin:0;color:var(--muted);font-size:13px}
.sec-shield{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fbe7e2;color:#a5442f}.sec-shield .icon{width:20px;height:20px}
.sec-shield.big{width:56px;height:56px;border-radius:16px;margin:0 auto 14px}.sec-shield.big .icon{width:26px;height:26px}
.sec-need{list-style:none;padding:0;margin:18px 0 12px;display:grid;gap:6px}
.sec-need li{border:1px solid #f0d6cf;background:#fdf6f4;border-radius:10px;padding:9px 12px;font-size:13px}.sec-need small{display:block;color:#8a5a4e;margin-top:3px}
.sec-what{display:grid;gap:4px;font-size:12px;color:var(--ink);margin-bottom:6px}.sec-what div{display:grid;grid-template-columns:96px 1fr;gap:8px}.sec-what span{color:var(--muted);font-weight:700}
.sec-override{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}.sec-override>b{font-size:14px}.sec-override>p{margin:4px 0 10px;color:var(--muted);font-size:12px}
.sec-dialog .error{color:#a5442f;font-size:13px;font-weight:600;min-height:4px}

/* no access */
.sec-noaccess{max-width:520px;margin:70px auto;text-align:center}.sec-noaccess h1{font-size:26px;margin:0 0 10px}.sec-noaccess p{color:var(--muted);line-height:1.55}
.sec-noaccess-actions{display:flex;gap:8px;justify-content:center;margin-top:18px}

/* security page */
label.check{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:13px;cursor:pointer}
label.check input{margin-top:3px;accent-color:var(--green)}label.check b{font-weight:600}label.check small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.sec-groups{border:1px solid var(--line);border-radius:12px;padding:6px 14px;margin:12px 0}.sec-groups legend{font-size:12px;font-weight:700;padding:0 6px}
.sec-matrix-wrap{max-height:70vh}
.sec-matrix th{white-space:nowrap;text-align:center;position:sticky;top:0;background:#fbfcfb;z-index:1}.sec-matrix th:first-child{text-align:left}
.sec-matrix th small{display:block;font-weight:500;color:var(--muted);letter-spacing:0;text-transform:none}
.sec-matrix th .link-btn{font-weight:700;font-size:12px}.sec-matrix th .link-btn:disabled{color:var(--ink);cursor:default;text-decoration:none}
.sec-matrix td.c{text-align:center}.sec-matrix input{width:16px;height:16px;accent-color:var(--green)}
.sec-matrix tr.sec-cat td{background:#f6f8f5;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding-top:10px;padding-bottom:6px}
.sec-matrix td:first-child{min-width:240px}
.sec-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.6fr) auto;gap:10px;align-items:end;padding:16px 18px;border-bottom:1px solid var(--line)}
.sec-filters .field{margin:0}.sec-filter-btns{display:flex;gap:6px}
@media(max-width:1100px){.sec-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.sec-q{grid-column:span 2}}
@media(max-width:600px){.sec-filters{grid-template-columns:1fr 1fr}.sec-q{grid-column:span 2}.sec-filter-btns{grid-column:span 2}}
.sec-audit td{vertical-align:top}.sec-audit td small{display:block;color:var(--muted);font-size:11px}
.sec-audit td .rec-pill{margin-bottom:4px}
.sec-audit details summary{cursor:pointer;font-size:12px;color:var(--green);font-weight:600}
.sec-audit ul{margin:6px 0 0;padding-left:16px;font-size:12px;display:grid;gap:5px}
.sec-op{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}.sec-op.add{color:#357a59}.sec-op.edit{color:#9c6a2d}.sec-op.remove{color:#a5442f}
.sec-fields{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.sec-fields span{background:#f3f6f4;border-radius:6px;padding:2px 7px;font-size:11px}.sec-fields i{font-style:normal;color:var(--muted);margin-right:3px}
.sec-set-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:6px 18px 10px}.sec-set-grid h3{font-size:14px;margin:10px 0 4px}
@media(max-width:800px){.sec-set-grid{grid-template-columns:1fr}}
.sec-inline{width:86px;padding:4px 6px;border:1px solid #d4ddd8;border-radius:6px;font:inherit;margin:0 4px}.sec-inline[type=date]{width:150px}
.sec-lock-now{background:#f3f6f4;border-radius:10px;padding:10px 12px;font-size:13px;margin-top:10px}
.sec-access .note{margin:0 0 10px}.sec-access td small{display:block;color:var(--muted);font-size:11px}
.sync-status{font-size:10px;color:#5d7f6b;background:#eaf3ed;padding:7px 11px;border-radius:20px;white-space:nowrap}
.sync-status[data-state=off]{color:#ad7f58;background:#fbefe7}
.login-page{margin:0;min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#e5efe8,#f6f8f5 60%);padding:16px}
.stripe-card{border:1px solid #dfe6df;border-radius:6px;padding:12px 11px;background:#fff}
/* Two-step sign-in */
.sec-code p{font-size:13px;color:#4f625b;margin:0 0 10px;line-height:1.5}
.sec-code input{letter-spacing:6px}
.sec-code .sec-code-go{width:100%;padding:12px;font-size:14px}
.sec-code details{margin-top:12px;font-size:12px;color:var(--muted)}.sec-code summary{cursor:pointer}
.login-page .error{min-height:18px;margin-top:10px;color:#a5442f;font-size:13px;font-weight:600}
.ts-status{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:#f3f1e6;margin-bottom:12px}.ts-status.on{background:#eaf3ed}.ts-status b{font-size:14px}.ts-status span{font-size:12px;color:#4f625b}
.ts-setup{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:start;margin-bottom:12px}
.ts-qr{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}.ts-qr svg{display:block;width:100%;height:auto}
.ts-setup ol{margin:0;padding-left:18px;font-size:13px;line-height:1.6}.ts-setup li{margin-bottom:8px}
.ts-key{display:inline-block;margin-top:4px;font-size:13px;letter-spacing:1px;background:#f4f6f5;padding:4px 8px;border-radius:6px;word-break:break-all}
.ts-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}.ts-codes code{font-size:15px;letter-spacing:1px;text-align:center;background:#f4f6f5;padding:8px;border-radius:8px}
#ts-panel textarea{width:100%;box-sizing:border-box;font:13px ui-monospace,Menlo,monospace;padding:8px;border:1px solid var(--line);border-radius:8px}
#ts-set .actions,#ts-set .error{grid-column:1/-1}#ts-set .actions{padding:0 0 4px}
@media(max-width:560px){.ts-setup{grid-template-columns:1fr}.ts-qr{max-width:220px;margin:auto}}
#ts-panel{margin-top:18px}