*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background:#09101d;color:#eef4ff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;padding:24px}
.accountShell{width:min(100%,980px);margin:auto}
.accountCard{background:#111b2d;border:1px solid #2c3d5b;border-radius:18px;padding:24px;box-shadow:0 20px 60px #0006}
.accountCard [hidden]{display:none!important}
.accountCard.narrow{max-width:520px;margin:8vh auto}
.accountHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.accountHeader h1{font-size:1.55rem;margin:0}
.accountHeader nav{display:flex;gap:8px;flex-wrap:wrap}
.accountGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.accountPanel{border:1px solid #2c3d5b;border-radius:14px;padding:16px;background:#0c1525}
.accountPanel h2{margin:0 0 14px;font-size:1.15rem}
.adminTabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 16px;padding:5px;border:1px solid #2c3d5b;border-radius:13px;background:#081120}
.adminTabs button{min-height:44px;border:1px solid transparent;border-radius:9px;padding:8px 12px;background:transparent;color:#aebdd2;font:inherit;font-weight:850;cursor:pointer}
.adminTabs button:hover{background:#14233b;color:#fff}
.adminTabs button.active{border-color:#69a5ff;background:#1d365c;color:#fff;box-shadow:inset 0 -2px 0 #7db2ff}
.adminTabs button:focus-visible{outline:3px solid #7db2ff;outline-offset:2px}
.adminTabPanel{animation:adminTabIn .16s ease-out}
.diagnosticLog{max-height:440px;min-height:100px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;border:1px solid #2c3d5b;border-radius:10px;background:#081120;color:#c9d8ed;font-size:.78rem}
@keyframes adminTabIn{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:none}}
.accountForm{display:grid;gap:12px}
.accountForm label{display:grid;gap:6px;color:#b9c7dc;font-weight:700}
.accountForm input,.accountForm select{width:100%;min-height:46px;border:1px solid #3a4d6e;border-radius:10px;padding:10px 12px;background:#081120;color:#fff;font:inherit;font-size:16px}
.accountButton,a.accountButton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #5578ad;border-radius:10px;padding:9px 14px;background:#1d365c;color:#fff;font:inherit;font-weight:800;text-decoration:none;cursor:pointer}
.accountButton.primary{background:#2563eb;border-color:#60a5fa}
.accountButton.wide{display:flex;width:100%;margin-top:10px}
.accountButton.danger{background:#5f1e2b;border-color:#dc5b70}
.accountButton:disabled{opacity:.45;cursor:not-allowed}
.accountNotice{padding:11px 13px;border-radius:10px;background:#172943;color:#cbdaf2;margin:0 0 14px}
.accountNotice.error{background:#4c1d2a;color:#ffd1d8}
.accountNotice.success{background:#123c2b;color:#bcf8d5}
.accountTable{width:100%;border-collapse:collapse}
.accountTable th,.accountTable td{padding:10px 8px;border-bottom:1px solid #2b3b56;text-align:left;vertical-align:middle}
.accountTable th{color:#9fb1ca;font-size:.85rem}
.accountActions{display:flex;gap:6px;flex-wrap:wrap}
.accountActions .accountButton{min-height:36px;padding:6px 9px}
.accountDelete>summary{list-style:none;cursor:pointer}
.accountDelete>summary::-webkit-details-marker{display:none}
.accountDeleteForm{max-width:310px;margin-top:8px;padding:12px;border:1px solid #985063;border-radius:10px;background:#201724}
.accountDeleteForm p{margin:0;color:#f2c5cc;font-size:.86rem;line-height:1.4}
.inviteEditor{position:relative}
.inviteEditor>summary{list-style:none;display:inline-flex;align-items:center;cursor:pointer}
.inviteEditor>summary::-webkit-details-marker{display:none}
.compactInvitationForm{position:absolute;z-index:20;right:0;top:calc(100% + 8px);width:min(330px,calc(100vw - 36px));padding:14px;border:1px solid #456184;border-radius:12px;background:#101b2d;box-shadow:0 14px 38px #000a}
.muted{color:#91a2bc}
.languageLinks{display:flex;gap:8px;justify-content:center;margin-top:16px}
.languageLinks a{color:#9bc0ff}
.inviteOutput{word-break:break-all;padding:10px;background:#07101d;border-radius:8px;margin-top:10px}
.badge{display:inline-flex;border-radius:999px;padding:3px 8px;background:#203654;color:#d9e8ff;font-size:.78rem;font-weight:800}
.badge.good{background:#164e36;color:#c7f9dd}
.badge.warning{background:#5b3517;color:#ffe1a8}
.accountEyebrow{margin:0 0 4px;color:#7fa5dd;font-size:.78rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.accountSummary{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:16px;border:1px solid #2c3d5b;border-radius:14px;background:linear-gradient(135deg,#14233b,#0b1525)}
.accountIdentity{display:flex;align-items:center;gap:12px;min-width:0}
.accountIdentity>div,.accountStatus{display:grid;gap:3px}
.accountIdentity strong{font-size:1.08rem}
.accountIdentity span:not(.accountAvatar),.accountStatus span:not(.badge){color:#91a2bc;font-size:.88rem}
.accountAvatar{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:50%;background:#27558e;color:#fff;font-size:1.25rem;font-weight:900}
.accountStatus{text-align:right;justify-items:end}
.storageAmount{margin:0 0 12px;color:#b9c7dc}
.storageAmount strong{color:#fff;font-size:1.65rem}
.storageMeter{height:13px;overflow:hidden;border:1px solid #3a4d6e;border-radius:999px;background:#07101d}
.storageMeter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#34d399,#38bdf8);transition:width .2s ease}
.storageCaption{margin:8px 0 0;color:#d4e1f4;font-weight:750}
.accountHint{margin:8px 0 0;font-size:.86rem;line-height:1.45}
.accountFacts{display:grid;gap:10px;margin:0 0 16px}
.accountFacts div{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid #243550}
.accountFacts dt{color:#91a2bc}
.accountFacts dd{margin:0;text-align:right;font-weight:800}
.fieldStatus{margin:-3px 0 0;font-size:.85rem;font-weight:800}
.fieldStatus.verified{color:#69dba3}
.fieldStatus.pending{color:#ffc877}
.securityPanel{display:grid;gap:10px}.securityPanel h2{margin:0}.securityChoice{display:flex;align-items:center;gap:10px;margin:18px 0 8px;color:#91a2bc;font-size:.82rem;font-weight:900;text-transform:uppercase}.securityChoice::before,.securityChoice::after{content:"";height:1px;flex:1;background:#2c3d5b}.securityQr{display:grid;place-items:center;min-height:220px;padding:10px;border-radius:14px;background:#fff}.securityQr svg{display:block;max-width:100%;height:auto}.securityCodeLabel{margin:0;color:#91a2bc;text-align:center}.securityCode{margin:0;text-align:center;font-size:2rem;font-weight:900;letter-spacing:.18em}.securityManager{grid-column:1/-1}.securityManagerHeading{display:flex;align-items:flex-start;gap:12px}.securityManagerHeading h2{margin:0}.securityManagerIcon{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:13px;background:#1d365c;font-size:1.35rem}.securityKeyCaution{display:flex;align-items:flex-start;gap:9px;margin:14px 0;padding:11px 13px;border:1px solid #d89a3d;border-radius:11px;background:#3b2915;color:#ffe2ae;line-height:1.45}.securitySetupStart{margin-top:12px}.securityConfirmForm{max-width:480px;margin-top:14px;padding:14px;border:1px solid #365277;border-radius:12px;background:#101d31}.securityConfirmText{margin:0;color:#dce8fa;font-weight:750}.securityConfirmActions,.securityKeyActions{display:flex!important;justify-content:flex-end;gap:8px}.securityKeyList{display:grid;gap:8px;margin:12px 0 16px;padding:0;list-style:none}.securityKeyList li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid #2c3d5b;border-radius:10px;background:#081120}.securityKeyList li>span{font-size:1.35rem}.securityKeyList li div{display:grid;gap:3px}.securityKeyList small{color:#91a2bc}.securityKeyList .accountButton{min-width:44px;padding:7px}
@media(max-width:700px){
  body{padding:10px}
  .accountCard{padding:16px}
  .accountHeader,.accountSummary{align-items:stretch;flex-direction:column}
  .accountHeader nav{display:grid;grid-template-columns:1fr 1fr}
  .accountStatus{text-align:left;justify-items:start}
  .accountGrid{grid-template-columns:1fr}
  .adminTabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .accountTable,.accountTable tbody,.accountTable tr,.accountTable td{display:block}
  .accountTable thead{display:none}
  .accountTable tr{padding:10px 0;border-bottom:1px solid #2b3b56}
  .accountTable td{border:0;padding:4px 0}
}