:root {
    --anna-navy: #06346A;
    --anna-blue: #146EF5;
    --anna-blue-dark: #0C57C7;
    --anna-ink: #102A43;
    --anna-muted: #6B7D90;
    --anna-line: #DCE7F4;
    --anna-panel: #F7FAFE;
    --anna-soft: #EEF5FD;
    --anna-white: #FFFFFF;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.portal-body {
    font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    color: var(--anna-ink);
    background:
        radial-gradient(circle at 10% 0%, rgba(20,110,245,.10), transparent 28rem),
        linear-gradient(180deg, #F9FBFE 0%, #EEF4FB 100%);
}
.portal-shell { max-width: 1240px; margin: 0 auto; padding: 28px 28px 48px; }
.portal-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--anna-line); }
.portal-brand img { display: block; width: 190px; max-height: 72px; object-fit: contain; object-position: left center; }
.portal-user { display: flex; align-items: center; gap: 14px; }
.portal-user-copy { display: flex; flex-direction: column; text-align: right; }
.portal-user-copy strong { font-size: 14px; }
.portal-user-copy span { color: var(--anna-muted); font-size: 12px; }
.portal-ghost-button, .portal-primary-button { font: inherit; cursor: pointer; border-radius: 10px; transition: .2s ease; }
.portal-ghost-button { border: 1px solid var(--anna-line); color: var(--anna-navy); background: rgba(255,255,255,.72); padding: 9px 13px; }
.portal-ghost-button:hover { background: var(--anna-soft); border-color: #BCD3EF; }
.portal-primary-button { width: 100%; border: 0; color: white; font-weight: 700; padding: 13px 18px; background: linear-gradient(135deg, var(--anna-blue), var(--anna-navy)); box-shadow: 0 10px 22px rgba(20,110,245,.18); }
.portal-primary-button:hover { transform: translateY(-1px); box-shadow: 0 13px 26px rgba(20,110,245,.23); }
.eyebrow { color: var(--anna-blue); letter-spacing: .14em; text-transform: uppercase; font-weight: 800; font-size: 11px; }
.portal-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 34px; padding: 54px 0 34px; }
.portal-hero h1 { margin: 7px 0 12px; color: var(--anna-navy); font-size: clamp(32px, 4vw, 52px); line-height: 1.02; }
.portal-hero p { margin: 0; max-width: 720px; color: var(--anna-muted); font-size: 16px; line-height: 1.65; }
.portal-hero-mark { width: 118px; height: 118px; border-radius: 28px; background: rgba(255,255,255,.72); border: 1px solid var(--anna-line); display: grid; place-items: center; box-shadow: 0 16px 38px rgba(6,52,106,.08); }
.portal-hero-mark img { width: 78px; height: 78px; object-fit: contain; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.product-card { min-height: 270px; display: flex; flex-direction: column; border-radius: 20px; padding: 22px; background: rgba(255,255,255,.92); border: 1px solid var(--anna-line); box-shadow: 0 10px 26px rgba(6,52,106,.055); }
.product-card-disabled { background: rgba(250,252,255,.72); }
.product-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.product-icon-shell { width: 58px; height: 58px; border-radius: 15px; background: linear-gradient(145deg, #F5F9FF, #E9F2FE); border: 1px solid #E1EBF7; display: grid; place-items: center; }
.product-icon-shell img { width: 34px; height: 34px; }
.product-status { border: 1px solid var(--anna-line); background: #F7F9FC; color: #75869A; border-radius: 999px; padding: 6px 10px; font-size: 11px; font-weight: 800; }
.product-status.status-live { color: #0B6A52; border-color: #C7E9DF; background: #EFFAF6; }
.product-card-copy { flex: 1; padding-top: 28px; }
.product-card h2 { margin: 0 0 8px; color: var(--anna-navy); font-size: 23px; }
.product-card p { margin: 0; color: var(--anna-muted); line-height: 1.55; }
.product-open { margin-top: 24px; color: var(--anna-blue); font-weight: 800; text-decoration: none; display: flex; align-items: center; justify-content: space-between; }
.product-open span { font-size: 20px; }
.product-open-disabled { color: #A0ADBB; }
.portal-info-placeholder { margin-top: 22px; border: 1px dashed #B9CFE8; background: rgba(244,249,255,.72); border-radius: 18px; padding: 22px 24px; display: grid; grid-template-columns: minmax(240px,.7fr) 1.3fr; gap: 30px; align-items: center; }
.portal-info-placeholder h2 { margin: 5px 0 0; color: var(--anna-navy); }
.portal-info-placeholder p { color: var(--anna-muted); line-height: 1.6; margin: 0; }
.auth-body { display: grid; place-items: center; padding: 24px; }
.auth-shell { width: min(1180px, 100%); min-height: 700px; display: grid; grid-template-columns: 1.25fr .75fr; background: rgba(255,255,255,.92); border: 1px solid var(--anna-line); border-radius: 28px; overflow: hidden; box-shadow: 0 28px 70px rgba(6,52,106,.13); }
.auth-info-panel { padding: 42px 46px; display: flex; flex-direction: column; background: linear-gradient(145deg, rgba(247,251,255,.98), rgba(234,244,255,.90)); }
.auth-brand img { width: 220px; max-height: 90px; object-fit: contain; object-position: left center; }
.auth-copy { margin-top: auto; margin-bottom: auto; max-width: 660px; }
.auth-copy h1 { margin: 8px 0 16px; color: var(--anna-navy); font-size: clamp(34px,4vw,54px); line-height: 1.05; }
.auth-copy p { margin: 0; color: var(--anna-muted); font-size: 16px; line-height: 1.65; }
.auth-placeholder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.auth-placeholder-grid article { border: 1px solid #D7E5F5; background: rgba(255,255,255,.66); border-radius: 13px; padding: 13px; display: flex; flex-direction: column; gap: 4px; }
.auth-placeholder-grid strong { color: var(--anna-navy); font-size: 12px; }
.auth-placeholder-grid span { color: var(--anna-muted); font-size: 11px; line-height: 1.35; }
.auth-card-wrap { display: grid; place-items: center; padding: 40px; background: white; }
.auth-card { width: min(360px,100%); }
.auth-card-mark { width: 62px; height: 62px; border-radius: 17px; background: var(--anna-soft); display: grid; place-items: center; margin-bottom: 24px; }
.auth-card-mark img { width: 42px; height: 42px; object-fit: contain; }
.auth-card h2 { margin: 5px 0 5px; color: var(--anna-navy); font-size: 30px; }
.muted { color: var(--anna-muted); margin: 0; }
.auth-form { display: grid; gap: 15px; margin-top: 26px; }
.auth-form label { display: grid; gap: 7px; color: var(--anna-ink); font-size: 13px; font-weight: 700; }
.auth-form input { width: 100%; border: 1px solid #CEDDEC; background: #FBFDFF; color: var(--anna-ink); border-radius: 10px; padding: 13px 14px; font: inherit; outline: none; }
.auth-form input:focus { border-color: var(--anna-blue); box-shadow: 0 0 0 3px rgba(20,110,245,.10); }
.auth-error { margin-top: 18px; border: 1px solid #F0C8CC; background: #FFF5F6; color: #A43D4A; padding: 10px 12px; border-radius: 9px; font-size: 13px; }
.auth-note { color: #8796A7; font-size: 11px; line-height: 1.5; margin-top: 18px; }
@media (max-width: 840px) {
    .auth-shell { grid-template-columns: 1fr; min-height: 0; }
    .auth-info-panel { padding: 28px; }
    .auth-copy { margin: 42px 0; }
    .auth-placeholder-grid { grid-template-columns: 1fr; }
    .auth-card-wrap { padding: 32px 28px; }
    .product-grid { grid-template-columns: 1fr; }
    .portal-info-placeholder { grid-template-columns: 1fr; }
    .portal-hero-mark { display: none; }
}
@media (max-width: 560px) {
    .portal-shell { padding: 18px 16px 36px; }
    .portal-brand img { width: 150px; }
    .portal-user-copy { display: none; }
}