/* Shared styles for the signed-in account pages (settings.html + usage.html).
   ac- prefix. Matches the marketing site's aesthetic — cream canvas, Instrument
   Serif headings, Inter body, purple accents. Loaded alongside styles.css. */

/* The HTML `hidden` attribute must win over the explicit `display` on .ac-btn /
   .ac-tierpill / .ac-card (else a `hidden` button like Manage-billing stays
   visible — those author rules outrank the UA `[hidden]{display:none}`). */
[hidden]{display:none!important}

.ac-wrap{max-width:940px;margin:0 auto;padding:108px 24px 64px}
.ac-close{position:fixed;top:82px;right:28px;z-index:45;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(26,19,38,0.14);background:rgba(252,251,248,0.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#5E566F;font-size:28px;line-height:1;text-decoration:none;box-shadow:0 12px 30px -22px rgba(26,19,38,0.55);transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.ac-close:hover{background:#FCFBF8;color:#1A1326;transform:translateY(-1px);box-shadow:0 16px 34px -22px rgba(26,19,38,0.65)}
.ac-close:focus-visible{outline:2px solid rgba(90,75,207,0.8);outline-offset:3px}
@media(max-width:720px){.ac-close{top:74px;right:16px;width:40px;height:40px;font-size:27px}}
.ac-head{margin:0 0 32px}
.ac-h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(34px,5vw,50px);line-height:1.05;letter-spacing:-0.02em;color:#1A1326;margin:0 0 10px}
.ac-sub{font-size:16px;line-height:1.6;color:#4A4358;margin:0;max-width:600px}
.ac-tierpill{display:inline-flex;align-items:center;gap:7px;margin-top:15px;padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;color:#3A3450;background:rgba(90,75,207,0.1);border:1px solid rgba(90,75,207,0.2)}
.ac-tierpill strong{color:#5A4BCF}

.ac-card{background:#FCFBF8;border:1px solid rgba(26,19,38,0.09);border-radius:20px;padding:26px;margin:0 0 20px}
.ac-card-h{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:23px;color:#1A1326;margin:0 0 4px;letter-spacing:-0.01em}
.ac-card-lede{font-size:13.5px;color:#8C84A0;margin:0 0 20px;line-height:1.5}

/* definition rows */
.ac-rows{display:flex;flex-direction:column}
.ac-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-top:1px solid rgba(26,19,38,0.07)}
.ac-row:first-child{border-top:none;padding-top:0}
.ac-row-k{font-size:14px;color:#5E566F}
.ac-row-v{font-size:14px;color:#1A1326;font-weight:600;text-align:right;word-break:break-word}
.ac-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}
.ac-badge-good{color:#1F6B49;background:rgba(31,138,91,0.12)}
.ac-badge-muted{color:#5E566F;background:rgba(26,19,38,0.07)}

/* buttons */
.ac-btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:filter .18s ease,transform .18s ease,background .18s ease,opacity .18s ease}
.ac-btn-primary{color:#fff;background:linear-gradient(135deg,#5A4BCF,#9B8DF5);box-shadow:0 8px 20px -8px rgba(90,75,207,0.6)}
.ac-btn-primary:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.ac-btn-ghost{color:#1A1326;background:transparent;border:1px solid rgba(26,19,38,0.2)}
.ac-btn-ghost:hover:not(:disabled){background:rgba(26,19,38,0.04)}
.ac-btn-danger{color:#B23B3B;background:transparent;border:1px solid rgba(178,59,59,0.3)}
.ac-btn-danger:hover:not(:disabled){background:rgba(178,59,59,0.07)}
.ac-btn-sm{padding:8px 15px;font-size:13px}
.ac-btn:disabled{opacity:.55;cursor:default;box-shadow:none;transform:none;filter:none}
.ac-btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* plan options (settings) */
.ac-plans{display:flex;flex-direction:column;gap:12px}
.ac-plan{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 17px;border:1px solid rgba(26,19,38,0.1);border-radius:15px;background:#fff}
.ac-plan-current{border-color:rgba(31,138,91,0.5);background:rgba(31,138,91,0.045)}
.ac-plan-info{min-width:0}
.ac-plan-name{font-size:15.5px;font-weight:700;color:#1A1326;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ac-plan-meta{font-size:13px;color:#8C84A0;margin-top:3px}
.ac-plan-action{flex-shrink:0}
.ac-chip-current{font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#1F6B49;background:rgba(31,138,91,0.13);padding:3px 9px;border-radius:999px}

/* account actions */
.ac-actions-list{display:flex;flex-direction:column;border:1px solid rgba(26,19,38,0.08);border-radius:15px;overflow:hidden;background:#fff}
.ac-action{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;box-sizing:border-box;padding:16px 17px;border-top:1px solid rgba(26,19,38,0.07);background:#fff;font-family:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background .14s ease}
.ac-action:first-child{border-top:none}
.ac-action:hover,.ac-action:focus-visible{background:rgba(90,75,207,0.055);outline:none}
.ac-action:focus-visible{box-shadow:inset 0 0 0 2px rgba(90,75,207,0.45)}
.ac-action-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.ac-action-title{font-size:15px;font-weight:700;color:#1A1326}
.ac-action-meta{font-size:13px;line-height:1.4;color:#8C84A0}
.ac-action-verb{flex-shrink:0;font-size:13px;font-weight:700;color:#5A4BCF}
@media(max-width:560px){.ac-action{align-items:flex-start;flex-direction:column;gap:8px}.ac-action-verb{align-self:flex-start}}

/* meters + gauge (usage) */
.ac-grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:720px){.ac-grid2{grid-template-columns:1fr}}
.ac-gauge{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ac-ring{--pct:0;--col:#5A4BCF;width:130px;height:130px;border-radius:50%;flex-shrink:0;background:conic-gradient(var(--col) calc(var(--pct)*1%),rgba(90,75,207,0.13) 0);display:grid;place-items:center;position:relative}
.ac-ring::before{content:"";position:absolute;inset:13px;border-radius:50%;background:#FCFBF8}
.ac-ring-txt{position:relative;text-align:center}
.ac-ring-pct{font-family:'Instrument Serif',Georgia,serif;font-size:29px;color:#1A1326;line-height:1}
.ac-ring-lab{font-size:11px;color:#8C84A0;margin-top:3px;letter-spacing:0.03em}
.ac-gauge-side{min-width:0}
.ac-gauge-big{font-family:'Instrument Serif',Georgia,serif;font-size:30px;color:#1A1326;line-height:1.1}
.ac-gauge-sub{font-size:13.5px;color:#5E566F;margin-top:5px;line-height:1.5}

.ac-meter{margin-top:18px}
.ac-meter:first-child{margin-top:0}
.ac-meter-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px;gap:10px}
.ac-meter-top .k{color:#5E566F}
.ac-meter-top .v{color:#1A1326;font-weight:600}
.ac-bar{height:9px;border-radius:999px;background:rgba(90,75,207,0.12);overflow:hidden}
.ac-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#5A4BCF,#9B8DF5);width:0;transition:width .5s ease}
.ac-bar-fill.warn{background:linear-gradient(90deg,#E0952A,#E8B45E)}
.ac-bar-fill.over{background:linear-gradient(90deg,#C23B3B,#DD6A6A)}

/* stat tiles */
.ac-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:720px){.ac-tiles{grid-template-columns:repeat(2,1fr)}}
.ac-tile{background:#fff;border:1px solid rgba(26,19,38,0.09);border-radius:14px;padding:15px 16px}
.ac-tile-v{font-family:'Instrument Serif',Georgia,serif;font-size:25px;color:#1A1326;line-height:1;word-break:break-word}
.ac-tile-k{font-size:12.5px;color:#8C84A0;margin-top:7px}

/* breakdown bars */
.ac-break{display:flex;flex-direction:column;gap:14px}
.ac-break-row .t{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;margin-bottom:6px}
.ac-break-row .t .n{color:#3A3450;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ac-break-row .t .c{color:#5E566F;flex-shrink:0}
.ac-break-bar{height:8px;border-radius:999px;background:rgba(90,75,207,0.1);overflow:hidden}
.ac-break-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#7A6BE0,#9B8DF5);width:0;transition:width .5s ease}
.ac-break-empty{font-size:13.5px;color:#8C84A0}

/* states */
.ac-state{text-align:center;padding:44px 20px}
.ac-state-title{font-family:'Instrument Serif',Georgia,serif;font-size:24px;color:#1A1326;margin:0 0 8px}
.ac-state-body{font-size:15px;color:#5E566F;max-width:440px;margin:0 auto 20px;line-height:1.6}
.ac-spin{display:inline-block;width:26px;height:26px;border:3px solid rgba(90,75,207,0.25);border-top-color:#5A4BCF;border-radius:50%;animation:vu-spin .7s linear infinite}
.ac-msg{font-size:13px;margin-top:12px;min-height:18px}
.ac-msg:empty{margin-top:0;min-height:0}
.ac-msg[data-tone="error"]{color:#C23B3B}
.ac-msg[data-tone="good"]{color:#1F6B49}
.ac-msg[data-tone="info"]{color:#4A4358}
.ac-hidden{display:none!important}