/* Conta e segurança (web/js/conta.js; the owner's mockup of 2026-10-23, c1–c34): the Store's modal pieces with the
   golden key, the code boxes, the recovery key and backup codes shown once, the QR of the authenticator app. */
.lg-error:empty{display:none}
dialog#dialog.cs-modal .wb{gap:6px}
.cs-modal .pf-panel{margin:0}
.cs-modal .pf-head small{margin-left:auto;color:#a9a9a9}
.cs-modal .lg-error{margin:0}
.cs-modal .lg-error.warn{color:#e8c547}
.an-kv b.ok{color:#5fc85f}.an-kv b.warn{color:#e8c547}.an-kv b.bad{color:#e8756c}
.cs-ic{image-rendering:pixelated;flex:0 0 auto}
/* the account's header: the Store's balance well with the golden key */
.cs-top{grid-template-columns:minmax(0,1fr)}
.cs-top .st-bal b{font-size:22px;line-height:22px;overflow:hidden;text-overflow:ellipsis}
/* protection: plain segments, like the client's bars */
.cs-level{display:grid;gap:4px;padding:6px 8px}
.cs-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.cs-seg i{height:8px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.cs-seg i.ok{background:#5fc85f}.cs-seg i.warn{background:#e8c547}.cs-seg i.bad{background:#e8756c}
.cs-level p{margin:0;font:11px/13px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0}
.cs-level p b{font-weight:normal}.cs-level p b.warn{color:#e8c547}.cs-level p b.ok{color:#5fc85f}
/* rows of actions: Store cards laid as rows */
.cs-rows{display:grid;gap:4px;padding:4px}
.cs-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center;min-width:0;min-height:44px;height:auto;padding:4px 8px 4px 6px;text-align:left;
 background:#262626;border:1px solid #111;border-image:none;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;font:11px/13px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0}
.cs-row>span{display:grid;min-width:0;gap:1px}
.cs-row b{font-weight:normal;color:#fff}
.cs-row small{color:#a9a9a9;font-size:11px;line-height:12px}
.cs-row .cs-state{justify-self:end;display:flex;align-items:center;gap:6px;white-space:nowrap}
.cs-row .cs-state::after{content:'›';color:#a9a9a9}
.cs-row.danger b{color:#e8756c}
.cs-tag{padding:0 4px;font:11px/14px 'Tibia Pixel',Verdana,sans-serif;border:1px solid #111;background:#1c1c1c;white-space:nowrap;color:#c0c0c0}
.cs-tag.ok{color:#5fc85f}.cs-tag.warn{color:#1c1c1c;background:#e8c547}.cs-tag.dim{color:#a9a9a9}
/* forms (the login's) */
.cs-form{display:grid;gap:6px;padding:8px}
.cs-form label{display:grid;gap:2px;font-size:11px;color:#c0c0c0}
.cs-form input{width:100%;box-sizing:border-box}
.cs-pw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px}
.cs-pw button{min-height:0;padding:0 8px}
.cs-keyin{letter-spacing:1px;text-transform:uppercase}
.cs-meter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.cs-meter b{font:11px/13px 'Tibia Pixel',Verdana,sans-serif;font-weight:normal;white-space:nowrap;color:#a9a9a9}
.cs-meter b.ok{color:#5fc85f}.cs-meter b.warn{color:#e8c547}.cs-meter b.bad{color:#e8756c}
.cs-form .lg-rules{padding:0}
/* the art on stage (an item of the client, original size) with the client's sparkles */
.cs-hero{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;align-items:center;padding:6px}
.cs-hero h4{margin:0 0 2px;font:11px/13px 'Tibia Pixel',Verdana,sans-serif;color:#e4ca78;text-shadow:1px 1px #000}
.cs-hero p{margin:0;font:11px/13px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0}
.cs-art{position:relative;display:grid;place-items:center;width:48px;height:48px;background:#1c1c1c;border:1px solid #0d0d0d;box-shadow:1px 1px #6a6a6a,inset 0 0 12px #000;overflow:visible}
.cs-art.gold{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c,inset 0 0 10px #c5b47caa}
.cs-fx{position:absolute;left:50%;top:50%;width:96px;height:96px;transform:translate(-50%,-50%);pointer-events:none;image-rendering:pixelated}
.ba-outcome .st-art{position:relative}
/* the recovery key and the backup codes, shown once: a framed well, big letters, a slow shine */
.cs-key{position:relative;display:grid;gap:6px;margin:0;padding:8px 6px;overflow:hidden;background:#1c1c1c;border:1px solid #c5b47c;
 box-shadow:inset 0 0 0 1px #3b3218,inset 0 0 14px #000,1px 1px #6a6a6a}
.cs-key::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,#fff0,#fff2,#fff0);animation:cs-shine 3.2s ease-in-out infinite;pointer-events:none}
@keyframes cs-shine{0%{left:-40%}55%,100%{left:120%}}
.cs-key>small{text-align:center;color:#a9a9a9;font:11px/12px 'Tibia Pixel',Verdana,sans-serif}
.cs-groups{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:264px;margin:0 auto;white-space:nowrap}
.cs-groups.sm{max-width:344px}
.cs-groups span,.cs-codes span{padding:3px 3px 2px;font:22px/22px 'Tibia Pixel',Verdana,sans-serif;color:#f4d35e;background:#262626;border:1px solid #0d0d0d;
 text-shadow:1px 1px #000;box-shadow:inset 1px 1px #000;user-select:all}
.cs-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.cs-codes span{display:grid;grid-template-columns:20px auto;justify-content:center;align-items:center;font-size:22px}
.cs-codes span small{font:11px/12px 'Tibia Pixel',Verdana,sans-serif;color:#a9a9a9;text-align:left;letter-spacing:0;user-select:none}
.cs-keyacts{display:flex;justify-content:center;gap:4px}
.cs-keyacts button{min-height:28px;padding:0 10px}
.cs-alert{margin:0;padding:5px 8px;font:11px/13px 'Tibia Pixel',Verdana,sans-serif;color:#e8c547;text-align:center;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.cs-alert.bad{color:#ff8b7e}
.cs-alert b{display:block;color:#fff;font-weight:normal}
.cs-list{display:grid;gap:3px;margin:0;padding:6px 8px;list-style:none;font:11px/13px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0}
.cs-list li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:4px}
.cs-list li::before{content:'◆';color:#e8c547}
/* devices */
.cs-devs{display:grid;gap:4px;padding:4px}
.cs-dev{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:4px 6px 4px 8px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;font:11px/13px 'Tibia Pixel',Verdana,sans-serif}
.cs-dev b{font-weight:normal;color:#fff;min-width:0}
.cs-dev small{grid-column:1;color:#a9a9a9;font-size:11px;line-height:12px}
.cs-dev>.cs-tag,.cs-dev>button{grid-column:2;grid-row:1/3;justify-self:end}
.cs-dev>button{min-height:28px;padding:0 10px}
/* the code: six boxes over one real input (inputmode numeric, autocomplete one-time-code) */
.cs-otp{position:relative;display:grid;grid-template-columns:repeat(3,40px) 12px repeat(3,40px);justify-content:center;gap:4px;padding:8px 4px;cursor:text}
.cs-otp span{display:grid;place-items:center;height:44px;font:22px/22px 'Tibia Pixel',Verdana,sans-serif;color:#fff;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.cs-otp span.on{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.cs-otp span.on:empty::after{content:'';width:2px;height:22px;background:#c5b47c;animation:cs-caret 1s steps(1) infinite}
@keyframes cs-caret{50%{opacity:0}}
.cs-otp.bad span{color:#e8756c;border-color:#e8756c;box-shadow:inset 0 0 0 1px #e8756c}
.cs-otp i{align-self:center;justify-self:center;width:8px;height:2px;background:#6a6a6a}
.cs-otp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;caret-color:transparent;border:0;padding:0}
.cs-backup{padding:8px}
.cs-backup input{width:100%;box-sizing:border-box;text-align:center;letter-spacing:2px;text-transform:lowercase}
.cs-sent{margin:0;padding:6px 8px 0;text-align:center;font:11px/14px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0}
.cs-sent b{font-weight:normal;color:#fff}
.cs-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:0 6px 8px}
.cs-links button{min-height:26px;padding:0 10px}
/* choices side by side: the Store's cards */
.cs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px}
.cs-card{gap:3px;padding:8px 6px 7px}
.cs-card .cs-cn{color:#fff}
.cs-card .cs-cs{font-size:11px;line-height:12px;color:#a9a9a9}
.cs-card:disabled{opacity:.55}
/* QR + secret */
.cs-qr{display:grid;justify-items:center;gap:4px;padding:8px}
.cs-qr canvas{image-rendering:pixelated;border:1px solid #111;box-shadow:1px 1px #6a6a6a}
/* "Confiar neste aparelho": a toggle button */
.cs-toggle{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;min-height:36px;height:auto;padding:4px 8px;text-align:left;line-height:13px}
.cs-toggle.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.cs-pill{padding:0 6px;font:11px/16px 'Tibia Pixel',Verdana,sans-serif;font-weight:normal;color:#a9a9a9;background:#1c1c1c;border:1px solid #111}
.cs-pill.on{color:#1c1c1c;background:#5fc85f}
.cs-status{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:center;padding:6px 8px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.cs-status b{display:block;font:11px/13px 'Tibia Pixel',Verdana,sans-serif;color:#5fc85f}
.cs-status small{color:#a9a9a9;font:11px/12px 'Tibia Pixel',Verdana,sans-serif}
/* login: "Esqueci minha senha" on its own row; the key offered on the character screen */
.app-menu .menu-lock.cs-warn{color:#e8c547}
.lg-forgot-row{display:flex;justify-content:flex-end}
.lg-forgot-row button{min-height:24px;padding:0 10px}
.lg-key-row{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;color:#c0c0c0}
.lg-key-row b{font-weight:normal;color:#5fc85f}
.lg-key-row button{min-height:24px;padding:0 10px;flex:0 0 auto}
/* results: a little wider when they carry the key; no X while the key is on screen */
.cs-outcome{position:fixed;z-index:80}
.cs-outcome.cs-keyout .ba-outcome-window{width:min(372px,100%)}
.cs-outcome.cs-dim{background:#000d}
.cs-outcome .ba-outcome-note{padding:0 8px}
.cs-outcome .an-kv{grid-template-columns:minmax(0,1fr) auto}
.cs-outcome.is-wait .ba-outcome-banner strong{color:#e8c547}
.cs-outcome.is-wait .ba-outcome-banner{background:linear-gradient(#2b2614,#171512);border-color:#3b3218}
.cs-outcome .cs-key{margin:0 0 6px}
.cs-outcome.no-x .window-title button{display:none}
.cs-outcome .ba-outcome-actions button{flex:1}
@media (prefers-reduced-motion:reduce){.cs-key::after,.cs-otp span.on:empty::after{animation:none}}