/* ==========================================================================
   DashView — Security: lock screen + Settings → Security panel
   ========================================================================== */
/* ==== macOS-style lock screen (Sonoma wallpaper waves, translucent clock, avatar + password pill) ==== */
html.dv-locked body > *:not(#dvLock) { visibility: hidden !important; }
#dvLock { --mx: .5; --my: .5; position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; background: #0b0d0c; color: #e7ede7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; cursor: default; }
#dvLock[hidden] { display: none; }
.dv-lock-wall { position: absolute; inset: -6%; width: 112%; height: 112%; z-index: 0; translate: calc((var(--mx) - .5) * -14px) calc((var(--my) - .5) * -10px); transition: filter .6s ease; }
.dv-lock-wall g { transform-box: fill-box; }
.dv-lock-wall .w1 { animation: dvWv1 22s ease-in-out infinite alternate; } .dv-lock-wall .w2 { animation: dvWv2 28s ease-in-out infinite alternate; }
.dv-lock-wall .w3 { animation: dvWv1 34s ease-in-out infinite alternate-reverse; } .dv-lock-wall .w4 { animation: dvWv2 40s ease-in-out infinite alternate-reverse; }
@keyframes dvWv1 { from { transform: translate(-2.5%, 1.5%) scale(1.03); } to { transform: translate(2.5%, -1.5%) scale(1.06); } }
@keyframes dvWv2 { from { transform: translate(2%, 2%) rotate(-.6deg); } to { transform: translate(-2%, -2%) rotate(.6deg); } }
#dvLock.is-wake .dv-lock-wall { filter: blur(10px) brightness(.88) saturate(1.1); }
.dv-lock-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,.28), transparent 60%), linear-gradient(180deg, rgba(232,163,61,.10), transparent 35%); }

.dv-lock-clock { position: absolute; z-index: 2; left: 0; right: 0; top: clamp(34px, 8vh, 96px); text-align: center; pointer-events: none; }
.dv-lock-date { margin: 0; font-size: clamp(17px, 1.9vw, 26px); font-weight: 600; letter-spacing: .005em; color: rgba(255,226,175,.82); mix-blend-mode: plus-lighter; text-shadow: 0 1px 14px rgba(120,70,0,.3); }
.dv-lock-time { display: block; margin-top: -.04em; font-size: clamp(84px, 11.5vw, 168px); line-height: 1; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  color: rgba(255,236,200,.72); mix-blend-mode: plus-lighter; text-shadow: 0 2px 30px rgba(160,100,10,.4); }
.dv-lock-time i { font-style: normal; display: inline-block; margin: 0 .01em; transform: translateY(-.05em); }
.dv-lock-time em { font-style: normal; font-size: .2em; font-weight: 600; letter-spacing: 0; margin-left: .3em; vertical-align: .6em; opacity: .85; }
.dv-lock-greet { display: none; }

.dv-lock-status { position: absolute; z-index: 2; top: 10px; right: 16px; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.88); text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.dv-lock-status #dvLockNet.bad { color: #ffb4ad; }
.dv-lock-status svg { vertical-align: -2px; margin-right: 5px; }

.dv-lock-user { position: absolute; z-index: 3; left: 0; right: 0; margin: 0 auto !important; bottom: clamp(48px, 13vh, 120px); width: min(92vw, 320px); transform: none !important; animation: none !important; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dv-lock-avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 700; margin-bottom: 8px;
  background: radial-gradient(circle at 30% 25%, #ffd27a, #e8a33d 55%, #a8650f); color: #1a1305; border: 2px solid rgba(255,235,200,.6); box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.dv-lock-name { margin: 0; font-size: 17px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.dv-lock-hint { margin: 6px 0 0; font-size: 12.5px; color: rgba(255,255,255,.78); text-shadow: 0 1px 6px rgba(0,0,0,.3); transition: opacity .25s ease, height .3s ease; animation: dvLkHint 3s ease-in-out infinite; }
@keyframes dvLkHint { 50% { opacity: .55; } }
.dv-lock-card { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.dv-lock-field { position: relative; width: 210px; margin-top: 10px; }
.dv-lock-card input { width: 100%; box-sizing: border-box; height: 32px; padding: 0 34px 0 16px; border-radius: 99px; border: 0; outline: none; text-align: center; font-size: 13px; letter-spacing: .08em; color: #fff; user-select: text; -webkit-user-select: text;
  background: rgba(255,240,215,.2); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35), 0 4px 14px rgba(0,0,0,.14); transition: background .2s, box-shadow .2s; }
.dv-lock-card input::placeholder { color: rgba(255,255,255,.82); letter-spacing: 0; }
.dv-lock-card input:focus { background: rgba(255,255,255,.34); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.6), 0 0 0 3px rgba(255,255,255,.22), 0 4px 14px rgba(0,0,0,.14); }
.dv-lock-go { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.3); opacity: 0; pointer-events: none; transition: opacity .2s, background .2s; }
.dv-lock-card input:not(:placeholder-shown) ~ .dv-lock-go { opacity: 1; pointer-events: auto; } .dv-lock-go:hover { background: rgba(255,255,255,.5); } .dv-lock-go:disabled { opacity: .5; }
.dv-lock-err { min-height: 16px; margin: 10px 0 0; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(120,0,20,.55); }
.dv-lock-sub { margin: 0; font-size: 12px; color: rgba(255,255,255,.8); text-shadow: 0 1px 6px rgba(0,0,0,.3); }
#dvLock.is-wake .dv-lock-card { max-height: 120px; opacity: 1; transform: none; }
#dvLock.is-wake .dv-lock-hint { opacity: 0; height: 0; margin: 0; overflow: hidden; animation: none; }
.dv-lock-card.shake .dv-lock-field { animation: dvLkShake .4s; }
@keyframes dvLkShake { 20%,60% { transform: translateX(-9px); } 40%,80% { transform: translateX(9px); } }

.dv-lock-home { position: absolute; z-index: 4; top: 10px; left: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px 6px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; color: rgba(255,240,215,.95);
  background: rgba(255,240,215,.14); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); text-shadow: 0 1px 6px rgba(0,0,0,.3); transition: background .2s; }
.dv-lock-home:hover, .dv-lock-home:focus-visible { background: rgba(255,240,215,.26); outline: none; }
.dv-lock-caps { margin: 8px 0 0; font-size: 11.5px; font-weight: 600; color: rgba(255,226,175,.95); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.dv-lock-caps[hidden] { display: none; }
.dv-lock-card input:disabled { opacity: .75; cursor: not-allowed; }
.dv-lock-home:focus-visible, .dv-lock-go:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
#dvLock:not([hidden]) { animation: dvLkIn .45s ease both; }
@keyframes dvLkIn { from { opacity: 0; } }
#dvLock.is-unlocking { animation: none; opacity: 0; transform: scale(1.04); transition: opacity .35s ease, transform .38s cubic-bezier(.4,0,.2,1); pointer-events: none; }
#dvLock.is-unlocking .dv-lock-avatar { transform: scale(1.12); }
@media (hover: none) and (pointer: coarse), (max-width: 560px) { .dv-lock-card input { font-size: 16px; height: 36px; } .dv-lock-field { width: 230px; } .dv-lock-go { top: 6px; } .dv-lock-home { padding: 8px 14px 8px 10px; } }
#dvLock { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.dv-lock-home { top: max(10px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
.dv-lock-status { top: max(10px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
.dv-lock-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 11.5px; color: rgba(255,255,255,.7); text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.dv-lock-foot span + span::before { content: '\00b7'; margin: 0 8px; opacity: .7; }
.dv-lock-foot kbd { font: inherit; font-weight: 600; }
@media (max-width: 560px) { .dv-lock-foot .hide-sm { display: none; } }
@media (max-height: 520px) { .dv-lock-time { font-size: clamp(60px, 20vh, 110px); } .dv-lock-foot { display: none; } }
@media (prefers-reduced-motion: reduce) { #dvLock *, #dvLock svg * { animation: none !important; transition-duration: .01s !important; } }
@media (prefers-reduced-transparency: reduce) { .dv-lock-card input { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(40,60,140,.7); } }

/* Settings → Security */
.sec-score { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.sec-ring { --p: 0; width: 116px; height: 116px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--c, #e8a33d) calc(var(--p) * 1%), rgba(127,127,127,.18) 0); }
.sec-ring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--paper-soft, #141815); }
.sec-ring span { position: relative; font-size: 30px; font-weight: 800; font-family: var(--f-display, inherit); }
.sec-ring.ok { --c: var(--ios-green,#30d158); } .sec-ring.warn { --c: #e8a33d; } .sec-ring.bad { --c: var(--ios-red,#ff453a); }
.sec-grade { font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.sec-checks, .sec-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; min-width: 260px; }
.sec-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.sec-checks b { font-weight: 600; display: block; } .sec-checks em { font-style: normal; color: var(--ink-50); font-size: 12px; }
.sec-ico { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; margin-top: 1px; }
.sec-checks .na .sec-ico { background: var(--paper-soft, rgba(128,128,128,.14)); color: var(--ink-50); }
.sec-checks .ok .sec-ico { background: color-mix(in srgb,var(--ios-green,#30d158) 18%,transparent); color: var(--ios-green,#30d158); } .sec-checks .todo .sec-ico { background: color-mix(in srgb,var(--ios-red,#ff453a) 16%,transparent); color: var(--ios-red,#ff453a); }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sec-meter { display: flex; gap: 4px; margin-top: 6px; } .sec-meter i { flex: 1; height: 4px; border-radius: 4px; background: rgba(127,127,127,.25); }
.sec-meter[data-s="1"] i:nth-child(-n+1) { background: var(--ios-red,#ff453a); } .sec-meter[data-s="2"] i:nth-child(-n+2) { background: #e8a33d; }
.sec-meter[data-s="3"] i:nth-child(-n+3) { background: #9acd63; } .sec-meter[data-s="4"] i { background: var(--ios-green,#30d158); }
.sec-msg { min-height: 18px; font-size: 12.5px; margin: 8px 0 0; } .sec-msg.ok { color: var(--ios-green,#30d158); } .sec-msg.bad { color: var(--ios-red,#ff453a); }
.sec-toggle { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.sec-toggle input { margin-top: 3px; accent-color: #e8a33d; } .sec-toggle small { display: block; color: var(--ink-50); font-size: 12px; margin-top: 2px; }
.sec-code { position: relative; margin: 0; padding: 14px 16px; border-radius: 10px; background: rgba(127,127,127,.12); border: 1px solid var(--line); font: 12.5px/1.7 var(--f-mono, monospace); overflow-x: auto; white-space: pre; }
.sec-log li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sec-log li:last-child { border-bottom: 0; } .sec-log li.empty { color: var(--ink-50); }
.sec-log i { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--ios-green,#30d158); } .sec-log i.warn { background: #e8a33d; } .sec-log i.bad { background: var(--ios-red,#ff453a); }
.sec-log div { flex: 1; min-width: 0; } .sec-log b { display: block; font-weight: 600; } .sec-log span, .sec-log time { color: var(--ink-50); font-size: 11.5px; }
.sec-danger { display: flex; gap: 10px; flex-wrap: wrap; }
.sec-danger .btn { color: var(--danger); border-color: var(--danger-10); }

.sec-ring{filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));transition:--p .6s}
#secGrade{font-weight:600;letter-spacing:.01em}

/* -- Account dropdown menu (shared: dashboard + People) -------------------- */
.dv-account-menu { position: fixed; z-index: 650; width: 240px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--sp-3); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.dv-account-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.dv-account-menu-head { display: flex; align-items: center; gap: 10px; padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.dv-account-menu-head p { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); margin: 0; }
.dv-account-menu-head span { font-size: 11px; color: var(--ink-30); }
.dv-account-menu-role { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--ink-70); padding: 6px 4px; }
.dv-role-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dv-role-pill { font-size: 10px; border: 1px solid currentColor; border-radius: 99px; padding: 1px 7px; }
.dv-account-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--ink-70); font-size: var(--fs-xs); font-weight: 600; padding: 8px; border-radius: 6px; cursor: pointer; }
.dv-account-menu-item:hover { background: var(--paper-soft); color: var(--ink); }