/* Personal cabinet. Builds on app.css tokens and components; only the page layout lives here. */
.cab-page .new-chat svg{width:18px;height:18px}
.cab-nav{padding-top:14px;display:grid;gap:2px;align-content:start}
.cab-link{gap:11px;padding:9px 10px;font-size:14.5px;color:var(--tx2)}
.cab-link svg{width:18px;height:18px;color:var(--mut);transition:color .2s}
.cab-link.on,.cab-link:hover{color:var(--tx)}
.cab-link.on svg{color:var(--tx)}
.cab-title{font-size:15px;font-weight:500;padding-left:4px}
.side-off .cab-title,.cab-title{white-space:nowrap}

.cab{flex:1;min-height:0;overflow-y:auto;padding:8px 24px 56px;outline:0}
.cab-col{max-width:920px;margin:0 auto;display:grid;gap:18px;animation:rise .45s var(--ease)}
.cab-stack{display:grid;gap:18px}
.cab-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px 2px 8px}
.cab-hero h2{font-size:clamp(26px,3.4vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
.cab-hero p{color:var(--mut);margin-top:6px}
.cab-actions{display:flex;gap:8px;flex-wrap:wrap}
.cab .btn{height:40px;font-size:14px;padding:0 18px;display:inline-grid;place-items:center;white-space:nowrap}
.cab .btn:disabled{opacity:.45;cursor:default}

.cab-card{display:grid;gap:14px;align-content:start;padding:20px 22px;border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 72%,transparent);min-width:0}
.cab-card>h2{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cab-card>.btn{justify-self:start}
.cab-card .link{justify-self:start;text-decoration:underline;text-underline-offset:3px}
.cab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.cab-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.cab-lead{color:var(--tx2);font-size:14.5px;line-height:1.5}
.cab-empty{color:var(--dim);font-size:14px;padding:4px 0}
.cab-fail{justify-items:start;color:var(--err)}

.cab-stat{display:grid;gap:2px}
.cab-stat small{font-size:13px;color:var(--mut)}
.cab-stat b{font-size:26px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.cab-stat span{font-size:12.5px;color:var(--dim)}
.cab-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px 20px}
.cab .meter-bar{height:8px;border-radius:8px}
.cab .meter-head b{font-size:26px;font-weight:500;letter-spacing:-.02em;order:2;margin-left:auto;display:none}
.cab .meter-head{align-items:baseline}
.cab .meter-head span{font-size:26px;letter-spacing:-.02em;color:var(--tx);order:-1}
.cab .meter-head::after{content:"использовано";font-size:13px;color:var(--mut);margin-left:8px;margin-right:auto}

.cab-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cab-go{grid-template-columns:minmax(0,1fr) auto;align-items:center;text-align:left;cursor:pointer;transition:border-color .2s,transform .25s var(--ease)}
.cab-go:hover{border-color:var(--line2);transform:translateY(-2px)}
.cab-go span{display:grid;gap:3px}
.cab-go b{font-weight:500;font-size:15.5px}
.cab-go small{font-size:13px;line-height:1.4;color:var(--mut)}
.cab-go svg{color:var(--dim);transition:transform .25s var(--ease),color .2s}
.cab-go:hover svg{transform:translateX(3px);color:var(--tx)}

.cab-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cab-filters .seg{flex:1;min-width:min(100%,420px)}
.cab-select select,.cab-dates input{height:38px;background:var(--hover);border:1px solid transparent;border-radius:12px;padding:0 12px;font:inherit;font-size:14px;color:var(--tx);outline:0}
.cab-select select:focus-visible,.cab-dates input:focus-visible{border-color:var(--mut)}
.cab-dates{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--dim)}
.cab-dates[hidden]{display:none}
:root[data-theme=light] .cab select{color-scheme:light}
:root[data-theme=light] .cab select option{background:#fff;color:#1b1a17}
:root[data-theme=light] .cab-dates input{color-scheme:light}

.cab-chart{display:flex;align-items:flex-end;gap:4px;height:150px;padding-top:6px;overflow-x:auto}
.cab-chart div{flex:1;min-width:10px;max-width:34px;height:100%;display:grid;grid-template-rows:1fr auto;gap:6px;align-items:end;justify-items:stretch}
.cab-chart i{display:block;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 35%,transparent));transition:filter .2s;animation:cab-grow .6s var(--ease) both;transform-origin:bottom}
.cab-chart div:hover i{filter:brightness(1.2)}
.cab-chart span{font-size:10.5px;color:var(--dim);text-align:center;font-variant-numeric:tabular-nums}
@keyframes cab-grow{from{transform:scaleY(.05);opacity:0}}

.cab-table{overflow-x:auto;margin:0 -6px}
.cab-table table{width:100%;border-collapse:collapse;font-size:14px}
.cab-table th{text-align:left;font-weight:400;font-size:12.5px;color:var(--dim);padding:6px 6px 8px;white-space:nowrap}
.cab-table td{padding:10px 6px;border-top:1px solid var(--line);color:var(--tx2);vertical-align:middle;font-variant-numeric:tabular-nums}
.cab-table td:last-child,.cab-table th:last-child{text-align:right}
.cab-table .link{text-decoration:underline;text-underline-offset:3px}
.cab-tag{display:inline-block;font-size:12.5px;padding:2px 10px;border-radius:999px;color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);white-space:nowrap;justify-self:start}
.cab-pages{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--mut)}
.cab-pages div{display:flex;gap:8px}

.cab-plan{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cab-plan div{display:grid;gap:2px}
.cab-plan b{font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.cab-plan span{color:var(--mut);font-size:14px}
.cab-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.cab-plans .plan-card{gap:8px}
.cab-price b{font-size:20px;font-weight:500;letter-spacing:-.01em}
.cab-price span{color:var(--mut);font-size:13px}
.cab-plans .btn{height:36px;justify-self:start;margin-top:4px}
.cab-plans .cab-tag{margin-top:6px}

.cab-form{display:grid;gap:2px}
.cab-form .fld{padding:8px 0;border:0}
.cab-form .fld+.fld{border:0}
.cab-form .btn{justify-self:start;margin-top:8px}
.cab-form input[readonly]{color:var(--mut)}
.cab-inline{grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:10px}
.cab-inline input{height:40px;background:var(--hover);border:1px solid transparent;border-radius:10px;padding:0 12px;font-size:14px;outline:0}
.cab-inline .btn{margin:0}
.cab-inline .legal-error{grid-column:1/-1}
.cab-copy{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cab-copy code{flex:1;min-width:200px;font:13.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--hover);padding:10px 12px;border-radius:10px;overflow-wrap:anywhere}

.cab-skel{display:grid;gap:18px}
.cab-skel i{display:block;height:120px;border-radius:20px;background:linear-gradient(100deg,var(--hover) 30%,color-mix(in srgb,var(--hover) 40%,transparent) 50%,var(--hover) 70%) 0 0/220% 100%;animation:cab-shine 1.4s linear infinite}
.cab-skel i:first-child{height:76px}
@keyframes cab-shine{to{background-position:-220% 0}}

/* Liquid Glass: same material as the studio panels, and the page runs under the floating bar. */
[data-surface=glass] .cab{margin-top:-56px;padding-top:64px}
[data-surface=glass] .cab-card{background:var(--g-solid);border-color:var(--g-line);border-radius:24px;box-shadow:var(--g-rim),var(--g-drop)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 [data-surface=glass] .cab-card{background:var(--g-fill);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
}
[data-surface=glass] .cab :is(.cab-select select,.cab-dates input,.cab-inline input,.cab-copy code,.fld input,.fld textarea){background:var(--g-field);border-color:var(--g-line);box-shadow:var(--g-well-in)}
[data-surface=glass] .cab .meter-bar{background:var(--g-well);box-shadow:var(--g-well-in)}
[data-surface=glass] .cab-plans .plan-card{border-color:var(--g-line)}
[data-surface=glass] .cab-plans .plan-card.mine{background:var(--g-pick);box-shadow:var(--g-rim-sm)}
@media (prefers-reduced-transparency:reduce){[data-surface=glass] .cab-card{background:var(--g-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}

@media (max-width:900px){
 .cab{padding:4px 12px 40px}
 .cab-two,.cab-quick{grid-template-columns:minmax(0,1fr)}
 .cab-card{padding:18px 16px}
 .cab-hero{padding-top:8px}
 .cab-table thead{display:none}
 .cab-table tr{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
 .cab-table td{border:0;padding:1px 6px;display:flex;justify-content:space-between;gap:14px;text-align:right}
 .cab-table td::before{content:attr(data-label);color:var(--dim);font-size:12.5px;text-align:left}
 .cab-table td:empty{display:none}
}

/* ---------- buttons 393: one system for the whole cabinet (the chat keeps its own) ---------- */
.cab-page .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:42px;padding:0 20px;border:1px solid transparent;border-radius:999px;font-size:14.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;text-decoration:none;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 90%,#fff),var(--acc));color:var(--acc-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.28),0 10px 24px -14px color-mix(in srgb,var(--acc) 80%,transparent);transition:transform .25s var(--ease),box-shadow .25s,background .2s,border-color .2s,color .2s;--spin:var(--acc-ink)}
.cab-page .btn:hover{opacity:1;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 5px rgba(0,0,0,.3),0 16px 30px -14px color-mix(in srgb,var(--acc) 95%,transparent)}
.cab-page .btn:active{transform:scale(.975);transition-duration:.08s}
.cab-page .btn:focus-visible{outline:2px solid color-mix(in srgb,var(--acc) 75%,transparent);outline-offset:3px}
.cab-page .btn svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.cab-page a.btn:hover svg:last-child{transform:translateX(3px)}
:root[data-theme=light] .cab-page .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.18),0 10px 22px -14px rgba(27,26,23,.55)}

/* quiet: second actions sit on a soft fill, not on a bare outline */
.cab-page .btn.ghost{background:color-mix(in srgb,var(--tx) 6%,transparent);color:var(--tx);border-color:var(--line2);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent);--spin:var(--tx)}
.cab-page .btn.ghost:hover{background:color-mix(in srgb,var(--tx) 11%,transparent);border-color:color-mix(in srgb,var(--tx) 36%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 9%,transparent),0 10px 22px -16px rgba(0,0,0,.6)}
[data-surface=glass] .cab-page .btn.ghost{background:var(--g-pick);border-color:var(--g-line);box-shadow:var(--g-rim-sm),var(--g-drop-sm)}
[data-surface=glass] .cab-page .btn.ghost:hover{border-color:color-mix(in srgb,var(--tx) 30%,transparent)}

/* danger: tinted while it only opens a confirmation, solid when it confirms */
.cab-page .btn.ghost.danger-text{color:var(--err);background:color-mix(in srgb,var(--err) 9%,transparent);border-color:color-mix(in srgb,var(--err) 30%,transparent);box-shadow:none;--spin:var(--err)}
.cab-page .btn.ghost.danger-text:hover{background:color-mix(in srgb,var(--err) 16%,transparent);border-color:color-mix(in srgb,var(--err) 55%,transparent)}
.cab-page .btn.danger{background:linear-gradient(180deg,color-mix(in srgb,var(--err) 88%,#fff),var(--err));color:#1b0c09;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -14px var(--err);--spin:#1b0c09}
:root[data-theme=light] .cab-page .btn.danger{color:#fff;--spin:#fff}

/* sizes and states */
.cab-page .btn.mini{height:32px;padding:0 14px;font-size:13px;gap:7px}
.cab-page .btn.mini svg{width:15px;height:15px}
.cab-page .btn:disabled,.cab-page .btn[aria-disabled=true]{opacity:.42;cursor:default;transform:none;box-shadow:none;pointer-events:none}
.cab-page .btn[aria-busy=true]{color:transparent;pointer-events:none}
.cab-page .btn[aria-busy=true] svg{visibility:hidden}
.cab-page .btn[aria-busy=true]::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid color-mix(in srgb,var(--spin) 28%,transparent);border-top-color:var(--spin);animation:cab-spin .7s linear infinite}
@keyframes cab-spin{to{transform:rotate(1turn)}}
.cab-page .cab .btn{height:42px;padding:0 20px;font-size:14.5px}
.cab-page .cab .btn.mini{height:32px;padding:0 14px;font-size:13px}
.cab-page .cab-plans .btn{height:38px;padding:0 18px;font-size:14px}
.cab-table td .btn.mini{float:right}
@media (max-width:900px){.cab-table td .btn.mini{float:none}.cab-actions .btn{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){.cab-page .btn,.cab-page .btn svg{transition:none}.cab-page .btn:hover{transform:none}}
.cab-beyond{display:grid;gap:12px}
.cab-beyond .fld{padding:0;max-width:280px}
.cab-beyond .btn{justify-self:start}

/* 399: the top-up field keeps a hand-sized width in a wide card */
.cab-card .topup{max-width:420px}