/* Security workspace. Scoped independently from API and recharge pages. */
.security-showcase .main-area{position:relative;isolation:isolate;background:radial-gradient(ellipse at 90% 4%,#dddfff8c,transparent 46%),linear-gradient(145deg,var(--night-tint-blue,#edf4ff),var(--night-soft,#f6f7ff) 60%,var(--night-tint-blue,#eff5ff))}
.security-showcase .page-content{padding:26px 28px 30px}
.security-showcase .page-intro{position:relative;min-height:104px;margin-bottom:20px;padding:8px 0 15px;align-items:center}
.security-showcase .page-heading{position:relative;z-index:1;gap:17px}
.security-showcase .page-heading h1{font-size:27px;line-height:1.3;color:var(--night-ink,#1e3261);letter-spacing:-.5px}
.security-showcase .page-subtitle{font-size:13px;color:var(--night-muted,#60718d);margin-top:7px}
.security-showcase .security-title-icon{display:grid;place-items:center;flex-shrink:0;width:54px;height:56px;border:1px solid var(--night-line,#a0bcff);border-radius:17px;color:#fff;background:linear-gradient(145deg,var(--night-raised,#769dfd),#3b6af2 57%,#3458d1);box-shadow:0 9px 23px #3b6df526,inset 0 1px #ffffff65}
.security-showcase .security-title-icon svg{width:31px;height:31px;filter:drop-shadow(0 2px 2px #2247a330)}
.security-showcase .security-title-decoration{position:absolute;right:32px;top:-16px;width:210px;height:134px;pointer-events:none}
.security-showcase .security-title-orbit{position:absolute;left:6px;bottom:10px;width:200px;height:56px;border:1px solid #b8ccfb88;border-radius:50%;transform:rotate(-14deg);background:radial-gradient(ellipse,#b8d0ff52,transparent 70%)}
.security-showcase .security-title-shield{position:absolute;right:44px;top:3px;display:grid;place-items:center;width:87px;height:102px;color:var(--night-blue,#6388e5);transform:rotate(13deg);filter:drop-shadow(8px 12px 12px #597be83d)}
.security-showcase .security-title-shield svg{width:100%;height:100%;stroke-width:1.15;fill:#d7e5ffb3}
.security-showcase .security-title-spark{position:absolute;background:linear-gradient(140deg,var(--night-panel,#fff),var(--night-raised,#8facf5));border:1px solid var(--night-line,#c3d4ff);box-shadow:3px 4px 10px #5e82da20;border-radius:7px;transform:rotate(25deg)}
.security-showcase .security-title-spark.is-one{width:18px;height:18px;right:9px;top:38px}
.security-showcase .security-title-spark.is-two{width:11px;height:11px;left:15px;top:22px}
.security-showcase .security-v3{font-size:14px}
.security-showcase .security-v3-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.security-showcase .security-v3 .security-v3-panel{min-width:0;margin:0;background:linear-gradient(152deg,var(--night-panel,#fff) 52%,var(--night-soft,#f7faff));border:1px solid var(--night-line,#dce5f6);border-radius:18px;box-shadow:0 5px 20px #294e9810;overflow:hidden}
.security-showcase .security-v3-panel-head{display:flex;align-items:center;gap:13px;padding:23px 24px 19px;border-bottom:1px solid var(--night-line,#ebeff8)}
.security-showcase .security-v3-panel-head>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--night-tint-blue,#edf3ff);color:var(--night-blue,#4b70cf);border:1px solid var(--night-line,#e1eaff);flex-shrink:0}
.security-showcase .security-v3-panel-head svg{width:21px;height:21px}
.security-showcase .security-v3-panel-head h2{font-size:17px;line-height:24px;font-weight:600;color:var(--night-ink,#243961);margin:0}
.security-showcase .security-v3-panel-head p{margin:3px 0 0;font-size:12px;line-height:18px;color:var(--night-muted,#60718d)}
.security-showcase .security-v3-panel-body{padding:22px 24px 20px}
.security-showcase .security-v3-protected{display:flex;align-items:center;gap:12px;padding:16px 15px;margin-bottom:17px;background:linear-gradient(105deg,var(--night-tint-green,#edf9f3),var(--night-tint-green,#f2faf7));border:1px solid var(--night-line,#d1eadc);border-radius:12px}
.security-showcase .security-v3-protected-icon{display:grid;place-items:center;width:37px;height:39px;flex-shrink:0;color:var(--night-green,#2ea579)}
.security-showcase .security-v3-protected-icon svg{width:31px;height:35px;fill:#cdeedd70}
.security-showcase .security-v3-protected h3{font-size:14px;line-height:20px;font-weight:600;color:var(--night-green,#2a8466);margin:0}
.security-showcase .security-v3-protected p{font-size:12px;line-height:18px;color:var(--night-ink,#3e725e);margin:4px 0 0}
.security-showcase .security-v3-protected-badge{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:12px;margin-left:auto;color:var(--night-green,#2d755a)}
.security-showcase .security-v3-protected-badge i{width:6px;height:6px;border-radius:50%;background:#44ac84}
.security-showcase .security-v3-operations{display:grid;gap:10px}
.security-showcase .security-v3-operation{min-width:0;background:var(--night-panel,#ffffffb3);border:1px solid var(--night-line,#e1e8f5);border-radius:11px;overflow:hidden}
.security-showcase .security-v3-operation summary{display:flex;align-items:center;gap:12px;padding:14px;list-style:none;cursor:pointer;user-select:none;min-height:72px}
.security-showcase .security-v3-operation summary::-webkit-details-marker{display:none}
.security-showcase .security-v3-operation summary:hover{background:var(--night-soft,#f7faff)}
.security-showcase .security-v3-action-icon{display:grid;place-items:center;flex-shrink:0;width:34px;height:36px;border-radius:10px;background:var(--night-tint-blue,#f0f5ff);color:var(--night-blue,#6888ca)}
.security-showcase .security-v3-action-icon svg{width:20px;height:20px}
.security-showcase .security-v3-action-copy{min-width:0;display:grid;gap:3px}
.security-showcase .security-v3-action-copy strong{font-size:14px;font-weight:500;line-height:20px;color:var(--night-ink,#344b73)}
.security-showcase .security-v3-action-copy small{font-size:12px;color:var(--night-muted,#60718d);line-height:18px}
.security-showcase .security-v3-expand{margin-left:auto;font-size:21px;line-height:24px;flex-shrink:0;color:var(--night-muted,#6d82a3);transition:transform .12s}
.security-showcase .security-v3-operation[open] .security-v3-expand{transform:rotate(45deg)}
.security-showcase .security-v3-operation[open] summary{border-bottom:1px solid var(--night-line,#e7edf7);background:var(--night-panel,#f8faff)}
.security-showcase .security-v3-operation.is-disable .security-v3-action-icon{color:var(--night-muted,#b47d75);background:var(--night-tint-rose,#fbf2ef)}
.security-showcase .security-v3-auth-form{display:grid;gap:13px;padding:16px}
.security-showcase .security-v3-auth-form .field>span{font-size:12px;color:var(--night-muted,#607799)}
.security-showcase .security-v3-auth-form .btn{min-height:38px;justify-self:start}
.security-showcase .security-v3-local-note{display:flex;align-items:flex-start;gap:7px;margin:15px 0 0;color:var(--night-muted,#60718d);font-size:12px;line-height:19px}
.security-showcase .security-v3-local-note svg{width:15px;height:17px;flex-shrink:0;margin-top:1px}
.security-showcase .security-v3-password-form{display:grid;gap:18px}
.security-showcase .security-v3-password-field{display:grid;gap:8px;min-width:0}
.security-showcase .security-v3-password-field>label{font-size:13px;color:var(--night-muted,#50688c);line-height:20px}
.security-showcase .security-v3-password-input{position:relative;display:flex;align-items:center;min-width:0}
/* Outrank the shared settings input :not() selector without affecting other fields. */
body.security-showcase .security-v3-password-form .security-v3-password-input>input{width:100%;min-width:0;height:44px;min-height:44px;padding:10px 44px 10px 38px;border:1px solid var(--night-line,#dce5f5);border-radius:9px;background:var(--night-panel,#fbfcff);box-shadow:inset 0 1px 2px #29416c03;font-size:14px;color:var(--night-ink,#2d456a);line-height:22px}
body.security-showcase .security-v3-password-form .security-v3-password-input>input::placeholder{font-size:13px;color:var(--night-muted,#60718d)}
body.security-showcase .security-v3-password-form .security-v3-password-input>input:focus{border-color:var(--night-line,#81a2f7);background:var(--night-panel,#fff);outline:2px solid #cbdafd;outline-offset:1px}
.security-showcase .security-v3-input-icon{position:absolute;left:13px;width:17px;height:18px;color:var(--night-muted,#94a7c6);pointer-events:none}
.security-showcase .security-v3-input-icon svg{display:block;width:100%;height:100%}
.security-showcase .security-v3-eye{position:absolute;right:6px;top:5px;display:grid;place-items:center;width:34px;height:34px;min-height:34px;padding:7px;border:0;border-radius:7px;color:var(--night-muted,#6b81a4);background:transparent;cursor:pointer}
.security-showcase .security-v3-eye svg{width:19px;height:19px}
.security-showcase .security-v3-eye:hover,.security-showcase .security-v3-eye[aria-pressed=true]{color:var(--night-blue,#456bcc);background:var(--night-tint-blue,#edf3ff)}
.security-showcase .security-v3 .security-v3-submit{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;gap:11px;margin-top:2px;padding:10px 14px;border:1px solid var(--night-line,#4967e9);border-radius:10px;color:#fff;background:linear-gradient(105deg,#416bfa,#3155df);font-size:14px;font-weight:500;box-shadow:0 5px 12px #3c63ec20}
.security-showcase .security-v3 .security-v3-submit:hover{color:#fff;background:linear-gradient(105deg,#315ef0,#274bd0);border-color:var(--night-line,#3f5ede)}
.security-showcase .security-v3-submit svg{width:18px;height:18px}
.security-showcase .security-v3-form-note{font-size:12px;line-height:19px;color:var(--night-muted,#60718d);margin:-7px 0 0;text-align:center}
.security-showcase .security-v3 :is(button,summary,input):focus-visible{outline:2px solid #7296df;outline-offset:3px}
@media(max-width:1050px){
 .security-showcase .security-v3-grid{gap:16px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
 .security-showcase .security-v3-panel-head{padding:20px 18px 16px}
 .security-showcase .security-v3-panel-body{padding:18px}
 .security-showcase .security-v3-protected{gap:9px;padding:13px 11px}
 .security-showcase .security-v3-protected-badge{display:none}
}
@media(max-width:800px){
 .security-showcase .page-content{padding:20px 18px 24px}
 .security-showcase .page-intro{min-height:96px;margin-bottom:14px}
 .security-showcase .security-title-decoration{right:0;transform:scale(.8);transform-origin:right center;opacity:.8}
 .security-showcase .security-v3-grid{grid-template-columns:1fr;gap:18px}
 .security-showcase .security-v3-protected-badge{display:flex}
 .security-showcase .security-v3-auth-form .btn{min-height:44px}
}
@media(max-width:520px){
 .security-showcase .page-content{padding:18px 14px 22px}
 .security-showcase .page-intro{min-height:84px;margin-bottom:10px}
 .security-showcase .page-heading{gap:12px}
 .security-showcase .page-heading h1{font-size:24px}
 .security-showcase .page-subtitle{font-size:12px;line-height:18px;max-width:230px}
 .security-showcase .security-title-icon{width:46px;height:49px;border-radius:14px}
 .security-showcase .security-title-decoration{display:none}
 .security-showcase .security-v3-panel-head{padding:18px 16px 15px}
 .security-showcase .security-v3-panel-body{padding:16px}
 .security-showcase .security-v3-operation summary{padding:12px;gap:10px}
 .security-showcase .security-v3-action-copy small{font-size:12px}
 .security-showcase .security-v3-protected-badge{display:none}
 .security-showcase .security-v3-password-form{gap:16px}
 body.security-showcase .security-v3-password-form .security-v3-password-input>input{height:46px;min-height:46px}
 .security-showcase .security-v3-eye{top:1px;right:2px;width:44px;height:44px;min-height:44px;padding:12px}
}