:root {
    color-scheme: light;
    --page: #f8f9fc;
    --surface: #ffffff;
    --surface-soft: #f6f7fc;
    --line: #e7e8ef;
    --ink: #343a40;
    --muted: #7a828d;
    --muted-light: #a1a8b0;
    --orange: #ffa400;
    --orange-deep: #f39700;
    --orange-wash: #fff5e4;
    --green: #27ad57;
    --cyan: #11a9bf;
    --purple: #8051d4;
    --red: #f43f57;
    --shadow: 0 2px 8px rgba(30, 38, 58, .035);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--page); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); font-family: "DM Sans", Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
.turbo-progress-bar { height: 3px; background: var(--orange); box-shadow: 0 0 8px rgba(255, 164, 0, .35); }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; width: 250px; flex-direction: column; overflow-y: auto; border-right: 1px solid #ececf2; background: var(--surface); transition: width .2s, transform .2s; }
.brand { display: flex; height: 60px; flex: 0 0 60px; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid #f0f0f3; }
.brand-mark { display: inline-flex; width: 33px; color: var(--orange); }
.brand-mark svg { width: 33px; height: 33px; }
.brand-name { color: #262b30; font-family: Manrope, sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.8px; line-height: .88; }
.sidebar-collapse { position: absolute; top: 14px; right: 12px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--orange-deep); font-size: 25px; cursor: pointer; }
.sidebar-collapse:hover { background: var(--orange-wash); }
.side-nav { padding: 14px 10px 18px; }
.nav-link { position: relative; display: flex; min-height: 46px; align-items: center; gap: 12px; padding: 0 13px; border-radius: 9px; color: #60666d; font-size: 14px; font-weight: 500; transition: color .16s, background .16s; }
.nav-link-button { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.sidebar-logout { margin: 0; }
.nav-external { margin-left: auto; color: #a6abb1; font-size: 12px; }
.nav-link:hover .nav-external { color: var(--orange-deep); }
.nav-dropdown > summary { list-style: none; cursor: pointer; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown[open] > summary .nav-chevron { transform: rotate(90deg); }
.nav-chevron { transition: transform .16s; }
.nav-submenu { margin: 0 8px 7px 45px; padding: 2px 0 2px 11px; border-left: 1px solid var(--line); }
.nav-subitem { display: flex; min-height: 34px; align-items: center; padding: 0 9px; border-radius: 7px; color: #727981; font-size: 12px; font-weight: 500; }
.nav-subitem:hover, .nav-subitem.active { background: #fff8ed; color: #b87300; }
.nav-link:hover, .nav-link.active { color: #30353b; background: #fff8ed; }
.nav-link.active { color: #b87300; font-weight: 700; }
.nav-icon { display: inline-grid; width: 22px; flex: 0 0 22px; place-items: center; color: #72777c; font-family: Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1; }
.nav-link.active .nav-icon, .nav-link:hover .nav-icon { color: var(--orange-deep); }
.icon-pink { color: #f13e72; }
.nav-chevron { margin-left: auto; color: #7a7e83; font-size: 20px; line-height: 1; }
.nav-caption { margin: 25px 5px 7px; color: #b0b2b6; font-size: 11px; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; margin: auto 16px 15px; padding: 13px 0 2px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.online-dot, .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #2fbe64; }

.main-column { min-height: 100vh; margin-left: 250px; transition: margin-left .2s; }
.topbar { position: sticky; z-index: 10; top: 0; display: flex; height: 60px; align-items: center; justify-content: space-between; padding: 0 24px 0 28px; border-bottom: 1px solid #ececf2; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); }
.topbar-status { display: flex; align-items: center; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 20px; background: #ffeff1; color: #ef3f55; font-size: 12px; font-weight: 700; }
.status-pill .status-dot { width: 6px; height: 6px; background: #f2475a; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.icon-button { display: grid; width: 31px; height: 34px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #252a30; font-size: 22px; cursor: pointer; }
.icon-button:hover { background: var(--surface-soft); }
.grid-button { font-size: 19px; }
.credit-pill { display: inline-flex; min-width: 68px; height: 31px; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; border-radius: 9px; background: #159a59; box-shadow: 0 3px 8px rgba(21, 154, 89, .2); color: #fff; font-weight: 700; }
.credit-pill span { font-size: 16px; }
.credit-pill-infinite { min-width: 40px; padding: 0 10px 3px; font-size: 27px; line-height: 1; }
.credit-pill-infinite:hover { background: #11854d; }
.credit-pill-static { min-width: auto; padding: 0 12px; cursor: default; white-space: nowrap; }
.avatar { display: grid; width: 38px; height: 38px; margin-left: 37px; place-items: center; border: 2px solid #ffcf75; border-radius: 50%; background: linear-gradient(145deg, #364252, #a9b2bd); box-shadow: inset 0 0 0 3px var(--surface); color: white; font-size: 15px; font-weight: 700; cursor: pointer; }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 21px; cursor: pointer; }

.page-content { width: min(100%, 1510px); min-height: calc(100vh - 114px); margin: 0 auto; padding: 27px 29px 35px; }
.footer { min-height: 54px; padding: 17px 15px; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); text-align: center; font-size: 12px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 5px; color: var(--orange-deep); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
h1, h2, p { margin-top: 0; }
h1, h2, h3 { font-family: Manrope, "DM Sans", sans-serif; }
.page-heading h1 { margin: 0 0 4px; color: #333940; font-size: clamp(23px, 2.1vw, 29px); font-weight: 800; letter-spacing: -.8px; line-height: 1.25; }
.heading-subtitle { margin: 0; color: var(--muted); font-size: 14px; }
.heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--orange); box-shadow: 0 3px 7px rgba(255, 164, 0, .14); color: white; }
.button-primary:hover { background: var(--orange-deep); box-shadow: 0 5px 11px rgba(255, 164, 0, .2); }
.button-secondary { border-color: #e1e3e8; background: var(--surface); color: #505860; }
.button-secondary:hover { border-color: #ffc354; background: #fffaf1; }
.button-small { min-height: 34px; }

.credit-alert { display: flex; min-height: 96px; align-items: center; gap: 16px; margin-bottom: 16px; padding: 13px 14px; border: 1px solid #ffb1a3; border-left: 4px solid #f13f50; border-radius: 14px; background: linear-gradient(100deg, #fff0f0 0%, #fffaf1 100%); }
.credit-count { display: flex; width: 88px; height: 57px; flex: 0 0 88px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e5e5e5; border-radius: 13px; background: white; }
.credit-count strong { color: #ed3f50; font-family: Manrope, sans-serif; font-size: 23px; line-height: 1; }
.credit-count span { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 800; }
.alert-copy { flex: 1; }
.alert-label { color: #f13f50; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.alert-copy h2 { margin: 2px 0 3px; font-size: 16px; font-weight: 800; }
.alert-copy p { margin: 0; color: var(--muted); font-size: 13px; }

.stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; margin-bottom: 18px; }
.stat-card { min-height: 116px; padding: 13px 14px 11px; border: 1px solid #e4e5eb; border-radius: 14px; background: var(--surface-soft); box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(30, 38, 58, .08); }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #858b93; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.stat-card > strong { display: block; margin-top: 4px; font-family: Manrope, sans-serif; font-size: 29px; font-weight: 800; line-height: 1.12; }
.stat-icon { font-size: 18px; }
.stat-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 11px; }
.stat-foot span:last-child { font-size: 16px; font-weight: 700; }
.stat-orange > strong, .stat-orange .stat-icon, .stat-orange .stat-foot span:last-child { color: var(--orange); }
.stat-green > strong, .stat-green .stat-icon, .stat-green .stat-foot span:last-child { color: var(--green); }
.stat-yellow > strong, .stat-yellow .stat-icon, .stat-yellow .stat-foot span:last-child { color: #e4ad00; }
.stat-cyan > strong, .stat-cyan .stat-icon, .stat-cyan .stat-foot span:last-child { color: var(--cyan); }
.stat-purple > strong, .stat-purple .stat-icon, .stat-purple .stat-foot span:last-child { color: var(--purple); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(260px, .95fr); align-items: start; gap: 15px; margin-bottom: 16px; }
.right-rail { display: grid; gap: 13px; }
.panel { overflow: hidden; border: 1px solid #e3e4ea; border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { display: flex; min-height: 47px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; color: #3b4149; font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.panel-heading a { color: var(--orange-deep); font-size: 12px; font-weight: 700; }
.heading-mark { margin-right: 5px; color: var(--orange); font-size: 17px; }
.period-label { color: var(--muted); font-size: 11px; }
.chart-panel { min-height: 338px; }
.chart-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 13px 16px 3px; }
.chart-summary > div { min-height: 61px; padding: 10px 12px; border: 1px solid #e3e4e8; border-radius: 11px; background: var(--surface); }
.chart-summary span { display: block; overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.chart-summary strong { display: block; margin-top: 3px; color: #df9d00; font-family: Manrope, sans-serif; font-size: 20px; line-height: 1; }
.chart-summary > div:nth-child(2) strong { color: var(--orange); }
.chart-summary > div:nth-child(3) strong { color: var(--cyan); }
.chart-legend { display: flex; justify-content: flex-end; gap: 15px; padding: 12px 17px 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot.orange { background: var(--orange); }
.legend-dot.cyan { background: var(--cyan); }
.chart-wrap { padding: 0 14px 14px; }
.chart-svg { display: block; width: 100%; height: 139px; overflow: visible; }
.chart-gridline { stroke: #e9eaf0; stroke-width: 1; }
.chart-axis { fill: #8b929b; font-family: "DM Sans", sans-serif; font-size: 10px; }
.chart-line { fill: none; stroke: var(--orange); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.chart-point { fill: var(--orange); stroke: white; stroke-width: 1.5; }
.chart-dates { display: flex; justify-content: space-between; margin: 0 2px 0 24px; color: #969ca5; font-size: 10px; }

.hosts-panel { border-color: #ffd27c; background: linear-gradient(150deg, #fffaf0, var(--surface) 55%); }
.hosts-panel .panel-heading { border-color: #efe8dc; }
.host-group { padding: 12px 16px 0; }
.hosts-panel > .host-group:last-child { padding-bottom: 14px; }
.host-group > label { display: block; margin-bottom: 7px; color: #828993; font-size: 10px; font-weight: 800; }
.host-row { display: flex; align-items: center; gap: 7px; }
.host-icon { display: grid; width: 35px; height: 34px; flex: 0 0 35px; place-items: center; border-radius: 10px; background: #fff0d3; color: #ee9b00; font-size: 16px; }
.host-row input { width: 100%; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #e5e3df; border-radius: 9px; background: var(--surface); color: #525a64; font-size: 11px; font-weight: 700; }
.copy-button { width: 35px; height: 34px; flex: 0 0 35px; border: 0; border-radius: 9px; background: var(--orange); color: white; font-size: 19px; font-weight: 700; cursor: pointer; }
.copy-button:hover { background: var(--orange-deep); }
.manage-hosts { display: flex; min-height: 35px; align-items: center; justify-content: center; margin: 9px 16px 14px; border: 1px solid #e5e3df; border-radius: 9px; background: var(--surface); color: #525a64; font-size: 11px; font-weight: 800; }
.manage-hosts:hover { border-color: #ffc354; color: var(--orange-deep); }
.activity-panel .panel-heading { min-height: 44px; }
.activity-row { display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-bottom: 1px solid #f0f1f4; }
.activity-row:last-child { border-bottom: 0; }
.activity-avatar { display: grid; width: 33px; height: 33px; flex: 0 0 33px; place-items: center; border-radius: 50%; background: #fff0d5; color: #dc9000; font-size: 10px; font-weight: 800; }
.activity-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.activity-text strong { overflow: hidden; color: #41474f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.activity-text span { color: var(--muted); font-size: 10px; }
.status-dot-small { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #c5c9cf; }
.status-dot-small.active { background: var(--green); }
.status-dot-small.trial { background: #e4ad00; }
.status-dot-small.expired { background: var(--red); }
.empty-activity { padding: 20px 16px; color: var(--muted); font-size: 12px; text-align: center; }
.recent-panel { margin-top: 14px; }
.table-scroll { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { height: 39px; padding: 0 15px; background: #fafbfc; color: #8a919a; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
td { height: 58px; padding: 7px 15px; border-top: 1px solid #f0f1f4; color: #59616a; font-size: 12px; white-space: nowrap; }
.person-cell { display: flex; min-width: 170px; align-items: center; gap: 9px; }
.person-avatar { display: grid; width: 33px; height: 33px; flex: 0 0 33px; place-items: center; border-radius: 50%; background: #fff0d5; color: #da9200; font-size: 10px; font-weight: 800; }
.person-cell > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.person-cell strong { overflow: hidden; color: #41474f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.person-cell span:not(.person-avatar) { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-active { background: #eaf8ef; color: #239e50; }
.badge-trial { background: #fff8df; color: #bd9100; }
.badge-expired { background: #fff0f1; color: #e64a59; }
.table-empty { height: 90px; color: var(--muted); text-align: center; }
.table-empty a { color: var(--orange-deep); font-weight: 700; }

.clients-panel { overflow: hidden; }
.table-toolbar { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.search-box { display: flex; min-width: 200px; max-width: 380px; height: 36px; flex: 1; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #e1e3e8; border-radius: 9px; background: var(--surface); color: var(--muted); }
.search-box > span { font-size: 20px; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.table-toolbar select, .form-field select { height: 36px; padding: 0 28px 0 10px; border: 1px solid #e1e3e8; border-radius: 9px; background: var(--surface); color: #525a64; font-size: 12px; }
.actions-head { text-align: right; }
.row-actions { display: flex; height: 58px; align-items: center; justify-content: flex-end; gap: 13px; }
.row-actions form { margin: 0; }
.text-action { padding: 0; border: 0; background: none; color: #ba7800; font-size: 11px; font-weight: 700; cursor: pointer; }
.text-action:hover { text-decoration: underline; }
.text-action.danger { color: #dc4854; }
.pagination-wrap { padding: 13px 16px; border-top: 1px solid var(--line); }
.pagination-wrap nav { display: flex; align-items: center; justify-content: space-between; }
.pagination-wrap nav > div:first-child { color: var(--muted); font-size: 11px; }
.pagination-wrap nav > div:last-child > span { display: flex; gap: 4px; }
.pagination-wrap a, .pagination-wrap span[aria-current] span, .pagination-wrap span[aria-disabled] span { display: inline-grid; min-width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: #666e77; font-size: 11px; }
.pagination-wrap span[aria-current] span { border-color: var(--orange); background: var(--orange); color: white; }

.client-form { padding: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 15px; }
.form-field { display: flex; flex-direction: column; gap: 7px; color: #515860; font-size: 12px; font-weight: 700; }
.form-field b { color: #e84a56; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #e0e2e8; border-radius: 9px; outline: none; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 400; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #ffbd42; box-shadow: 0 0 0 3px rgba(255, 164, 0, .12); }
.form-field textarea { resize: vertical; }
.form-field small { color: #d74552; font-size: 11px; font-weight: 500; }
.form-field-wide { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }

.coming-soon { display: flex; min-height: 320px; flex-direction: column; align-items: center; justify-content: center; padding: 35px; text-align: center; }
.coming-icon { display: grid; width: 58px; height: 58px; place-items: center; margin-bottom: 18px; border-radius: 18px; background: var(--orange-wash); color: var(--orange-deep); font-size: 26px; }
.coming-soon .eyebrow { margin-bottom: 8px; }
.coming-soon h2 { margin: 0 0 8px; color: #353b42; font-size: 20px; }
.coming-soon p:not(.eyebrow) { max-width: 430px; margin-bottom: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.flash-success, .flash-error { position: relative; display: flex; align-items: center; gap: 9px; margin-bottom: 17px; padding: 12px 14px; border-radius: 10px; font-size: 13px; }
.flash-success { border: 1px solid #c4e9d0; background: #edfaf1; color: #247e45; }
.flash-success > span { font-weight: 800; }
.flash-success button { margin-left: auto; border: 0; background: none; color: inherit; font-size: 19px; cursor: pointer; }
.flash-error { border: 1px solid #f1c5c9; background: #fff1f2; color: #ba3745; }

.mobile-backdrop { display: none; }
.sidebar-compact .sidebar { width: 76px; }
.sidebar-compact .main-column { margin-left: 76px; }
.sidebar-compact .brand { padding: 0 20px; }
.sidebar-compact .brand-name, .sidebar-compact .nav-link > span:not(.nav-icon), .sidebar-compact .nav-caption, .sidebar-compact .sidebar-footer { display: none; }
.sidebar-compact .nav-external { display: none; }
.sidebar-compact .sidebar-collapse { right: 8px; }
.sidebar-compact .side-nav { padding-right: 10px; padding-left: 10px; }
.sidebar-compact .nav-link { justify-content: center; padding: 0; }
.sidebar-compact .nav-icon { width: 30px; flex-basis: 30px; font-size: 21px; }
.sidebar-compact .nav-submenu { display: none; }

.dark-theme {
    color-scheme: dark;
    --page: #171a20;
    --surface: #20242c;
    --surface-soft: #252a33;
    --line: #343a44;
    --ink: #e4e7eb;
    --muted: #a5acb6;
    --muted-light: #77808d;
    --orange-wash: #33291a;
    --shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.dark-theme .brand-name, .dark-theme .page-heading h1, .dark-theme .panel-heading h2, .dark-theme .coming-soon h2, .dark-theme .activity-text strong, .dark-theme .person-cell strong { color: #eef0f3; }
.dark-theme .sidebar, .dark-theme .topbar, .dark-theme .footer { border-color: var(--line); }
.dark-theme .brand { border-color: var(--line); }
.dark-theme .nav-link { color: #b1b7c0; }
.dark-theme .nav-link:hover, .dark-theme .nav-link.active { background: #342c20; color: #ffc35a; }
.dark-theme .nav-subitem { color: #b1b7c0; }
.dark-theme .nav-subitem:hover, .dark-theme .nav-subitem.active { background: #342c20; color: #ffc35a; }
.dark-theme .credit-alert { border-color: #754549; background: linear-gradient(100deg, #342326, #30291f); }
.dark-theme .credit-count, .dark-theme .chart-summary > div { border-color: var(--line); background: #252a33; }
.dark-theme .chart-gridline { stroke: #383e48; }
.dark-theme .hosts-panel { border-color: #745e38; background: linear-gradient(150deg, #30291f, var(--surface) 60%); }
.dark-theme .hosts-panel .panel-heading { border-color: var(--line); }
.dark-theme .host-row input, .dark-theme .manage-hosts { border-color: var(--line); }

/* Authentication */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 34px 18px; overflow-x: hidden; background: radial-gradient(ellipse at 5% 8%, rgba(255, 190, 58, .34), transparent 35%), radial-gradient(ellipse at 87% 90%, rgba(255, 164, 0, .14), transparent 35%), linear-gradient(120deg, #fffaf0, #f7f7ff 57%, #fff 100%); }
.auth-page::before { position: fixed; inset: -20vh -10vw; z-index: 0; border: 1px solid rgba(255, 164, 0, .1); border-radius: 50%; content: ""; pointer-events: none; }
.auth-card-wrap { position: relative; z-index: 1; width: min(100%, 430px); }
.auth-brand { display: flex; width: max-content; align-items: center; gap: 10px; margin: 0 auto 20px; }
.auth-brand .brand-mark { width: 38px; }
.auth-brand .brand-mark svg { width: 38px; height: 38px; }
.auth-brand .brand-name { font-size: 19px; }
.auth-panel { padding: 25px 22px 22px; border: 1px solid rgba(222, 222, 232, .9); border-radius: 20px; background: rgba(255, 255, 255, .91); box-shadow: 0 18px 55px rgba(65, 62, 86, .11); backdrop-filter: blur(8px); }
.auth-heading { margin-bottom: 22px; text-align: center; }
.auth-heading h1 { margin: 0 0 5px; color: #343a40; font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.auth-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.auth-form { display: grid; gap: 8px; }
.auth-label { margin-top: 2px; color: #7c848e; font-size: 10px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.auth-input-row { display: flex; min-height: 42px; align-items: center; overflow: hidden; border: 1px solid #e0e1e7; border-radius: 10px; background: white; }
.auth-input-row:focus-within { border-color: #ffb926; box-shadow: 0 0 0 3px rgba(255, 164, 0, .12); }
.auth-input-row > span { display: grid; width: 44px; min-height: 40px; flex: 0 0 44px; place-items: center; border-right: 1px solid #e9e9ee; background: #fafaff; color: var(--orange-deep); font-size: 17px; }
.auth-input-row input { width: 100%; min-width: 0; height: 40px; padding: 0 11px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.auth-input-row input::placeholder { color: #98a0aa; }
.auth-eye { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 0; border-left: 1px solid #e9e9ee; background: #fafaff; color: var(--orange-deep); cursor: pointer; }
.auth-remember { display: flex; align-items: center; gap: 7px; margin: 4px 0 8px; color: #737b85; font-size: 12px; }
.auth-remember input { accent-color: var(--orange-deep); }
.auth-submit { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; margin-top: 5px; border: 0; border-radius: 10px; background: var(--orange); box-shadow: 0 5px 13px rgba(255, 164, 0, .22); color: white; font-size: 13px; font-weight: 800; cursor: pointer; }
.auth-submit:hover { background: var(--orange-deep); }
.auth-flash { margin-bottom: 14px; padding: 10px 12px; border-radius: 9px; font-size: 12px; line-height: 1.45; }
.auth-flash-success { border: 1px solid #bde8cb; background: #effaf2; color: #238348; }
.auth-flash-error { border: 1px solid #f1c5c9; background: #fff1f2; color: #ba3745; }
.auth-footer { margin: 18px 0 0; color: #7f8791; text-align: center; font-size: 11px; }
.reseller-form-note { margin: -5px 0 19px; color: var(--muted); font-size: 12px; }

@media (max-width: 520px) {
    .auth-page { padding: 22px 14px; }
    .auth-panel { padding: 23px 18px 19px; }
}

/* Profile and integration settings */
.profile-shell { max-width: 1080px; margin: 0 auto; overflow: hidden; border: 1px solid #e5e6ed; border-radius: 19px; background: var(--surface); box-shadow: 0 5px 22px rgba(35, 39, 58, .045); }
.profile-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 0 16px; padding: 28px 0 22px; border-bottom: 1px solid var(--line); }
.profile-title-group { display: flex; align-items: center; gap: 15px; }
.profile-title-icon { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border-radius: 14px; background: var(--orange-wash); color: var(--orange-deep); font-size: 23px; }
.profile-title-group h1 { margin: 0 0 4px; color: #343a40; font-family: Manrope, sans-serif; font-size: clamp(22px, 2vw, 29px); font-weight: 800; letter-spacing: -.8px; }
.profile-title-group .heading-subtitle { max-width: 500px; line-height: 1.55; }
.profile-summary { display: flex; min-width: 300px; align-items: center; gap: 13px; padding: 11px 15px; border: 1px solid #e4e5eb; border-radius: 15px; background: var(--surface-soft); }
.profile-avatar-large { display: grid; width: 62px; height: 62px; flex: 0 0 62px; place-items: center; border: 3px solid var(--orange); border-radius: 50%; background: linear-gradient(145deg, #364252, #a9b2bd); box-shadow: inset 0 0 0 3px white, 0 3px 9px rgba(255, 164, 0, .16); color: white; font-size: 22px; font-weight: 800; }
.profile-summary > div { display: grid; gap: 4px; }
.profile-summary strong { color: #4b515a; font-family: Manrope, sans-serif; font-size: 14px; }
.profile-summary span:not(.profile-avatar-large) { color: var(--muted); font-size: 11px; }
.profile-tabs { display: flex; gap: 5px; margin: 19px 16px 0; padding: 6px; border-radius: 13px; background: #eef0f5; }
.profile-tab { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 14px; border-radius: 10px; color: #65707d; font-size: 12px; font-weight: 700; }
.profile-tab > span { color: #738093; font-size: 15px; }
.profile-tab:hover { color: #424950; background: rgba(255, 255, 255, .7); }
.profile-tab.active { background: var(--orange); box-shadow: 0 3px 8px rgba(255, 164, 0, .2); color: #fff; }
.profile-tab.active > span { color: #fff; }
.profile-content { padding: 26px 17px 23px; }
.profile-content-stack { display: grid; gap: 22px; }
.profile-section-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.profile-section-heading > span { margin-top: 1px; color: var(--orange-deep); font-size: 17px; }
.profile-section-heading h2 { margin: 0 0 3px; color: #41474f; font-family: Manrope, sans-serif; font-size: 16px; font-weight: 800; }
.profile-section-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.profile-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #59616b; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.profile-field b { color: #eb4552; }
.profile-field input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #e0e2e8; border-radius: 10px; outline: 0; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 400; text-transform: none; }
.profile-field input:focus { border-color: #ffbd42; box-shadow: 0 0 0 3px rgba(255, 164, 0, .12); }
.profile-field input::placeholder { color: #9aa1aa; }
.profile-field small { color: #d74552; font-size: 11px; font-weight: 500; text-transform: none; }
.profile-field-help { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; text-transform: none; }
.profile-field-wide { grid-column: 1 / -1; }
.profile-actions { display: flex; justify-content: flex-end; margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }
.profile-subsection { padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.profile-subsection .profile-section-heading { margin-bottom: 16px; }
.token-card { display: grid; gap: 15px; padding: 16px; border: 1px solid #e6e7ed; border-radius: 12px; background: var(--surface-soft); }
.token-card-copy { display: grid; gap: 4px; }
.token-card-copy strong { color: #464c54; font-size: 13px; }
.token-card-copy span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.token-active { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #cdebd5; border-radius: 10px; background: #f1faf3; }
.token-status-dot { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 4px; border-radius: 50%; background: #2cad5a; }
.token-active > div { display: grid; gap: 3px; }
.token-active strong { color: #287f47; font-size: 12px; }
.token-active code, .token-generated code { overflow-wrap: anywhere; color: #3e4751; font-family: Consolas, monospace; font-size: 12px; }
.token-active small { color: #738078; font-size: 10px; }
.token-inactive { color: var(--muted); font-size: 12px; }
.token-generated { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid #ffd482; border-radius: 10px; background: #fff8e9; }
.token-generated > div { display: grid; min-width: 0; gap: 6px; }
.token-generated strong { color: #805700; font-size: 11px; }
.token-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.token-actions form { margin: 0; }
.profile-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.profile-info-card { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.profile-info-card span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.profile-info-card strong { color: #424951; font-size: 13px; }
.profile-status-active { color: #258847 !important; }
.profile-theme-note { display: grid; gap: 4px; margin-top: 17px; padding: 14px; border-left: 3px solid var(--orange); border-radius: 8px; background: var(--orange-wash); }
.profile-theme-note strong { font-size: 12px; }
.profile-theme-note span { color: var(--muted); font-size: 11px; }
.xui-status { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 12px; border: 1px solid #f0dfbd; border-radius: 10px; background: #fffbf1; }
.xui-status:not(.configured) .token-status-dot { background: #e6a500; }
.xui-status > div { display: grid; gap: 4px; }
.xui-status strong { color: #555b62; font-size: 12px; }
.xui-status small { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.xui-form { padding-top: 19px; border-top: 1px solid var(--line); }
.profile-checkbox { display: flex; align-items: center; gap: 8px; color: #606872; font-size: 12px; }
.profile-checkbox input { accent-color: var(--orange-deep); }
.profile-checkbox span { font-weight: 600; }
.xui-version-note { margin: 15px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

@media (max-width: 760px) {
    .profile-heading { align-items: flex-start; flex-direction: column; }
    .profile-summary { min-width: 0; width: 100%; }
    .profile-tabs { overflow-x: auto; }
    .profile-tab { flex: 0 0 auto; }
}
@media (max-width: 560px) {
    .profile-form-grid, .profile-info-grid { grid-template-columns: 1fr; }
    .profile-field-wide { grid-column: auto; }
    .profile-content { padding: 22px 13px 18px; }
    .profile-subsection { padding: 14px; }
    .token-generated { align-items: flex-start; flex-direction: column; }
}
.dark-theme th { background: #252a33; }
.dark-theme td, .dark-theme .activity-row { border-color: var(--line); }
.dark-theme .badge-active { background: #1e392a; }
.dark-theme .badge-trial { background: #3c341b; }
.dark-theme .badge-expired { background: #3b252a; }
.dark-theme .coming-icon { background: #3b3020; }

@media (max-width: 1150px) {
    .sidebar { width: 225px; }
    .main-column { margin-left: 225px; }
    .page-content { padding-right: 20px; padding-left: 20px; }
    .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: minmax(0, 1.45fr) minmax(250px, .9fr); }
    .heading-actions { gap: 7px; }
    .heading-actions .button { padding: 0 11px; }
}
@media (max-width: 850px) {
    .sidebar { width: 250px; transform: translateX(-101%); box-shadow: 10px 0 24px rgba(20, 26, 38, .08); }
    .sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-open .mobile-backdrop { position: fixed; z-index: 15; inset: 0; display: block; background: rgba(20, 25, 34, .35); }
    .sidebar-compact .sidebar { width: 250px; }
    .sidebar-compact .main-column { margin-left: 0; }
    .sidebar-compact .brand { padding: 0 16px; }
    .sidebar-compact .brand-name, .sidebar-compact .nav-link > span:not(.nav-icon), .sidebar-compact .nav-caption, .sidebar-compact .sidebar-footer { display: initial; }
    .sidebar-compact .brand-name { display: inline; }
    .sidebar-compact .sidebar-footer { display: flex; }
    .sidebar-compact .nav-link { justify-content: flex-start; padding: 0 13px; }
    .sidebar-compact .nav-icon { width: 22px; flex-basis: 22px; }
    .main-column, .sidebar-compact .main-column { margin-left: 0; }
    .mobile-menu { display: grid; place-items: center; }
    .topbar { justify-content: flex-start; gap: 16px; padding: 0 18px; }
    .topbar-status { flex: 1; }
    .avatar { margin-left: 4px; }
    .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .right-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .topbar { height: 56px; gap: 9px; padding: 0 12px; }
    .topbar-actions { gap: 5px; }
    .grid-button { display: none; }
    .avatar { width: 34px; height: 34px; }
    .credit-pill { min-width: 58px; height: 29px; padding: 0 8px; font-size: 12px; }
    .status-pill { padding: 5px 8px; font-size: 10px; }
    .page-content { min-height: calc(100vh - 105px); padding: 21px 13px 25px; }
    .page-heading { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 16px; padding-bottom: 15px; }
    .dashboard-heading { gap: 13px; }
    .heading-actions { width: 100%; }
    .heading-actions .button { min-height: 34px; flex: 1; padding: 0 8px; font-size: 11px; }
    .credit-alert { min-height: 0; flex-wrap: wrap; gap: 10px; padding: 12px; }
    .credit-count { width: 62px; flex-basis: 62px; }
    .alert-copy { min-width: calc(100% - 80px); }
    .alert-copy p { font-size: 11px; line-height: 1.4; }
    .credit-alert > .button { width: 100%; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .stat-card { min-height: 104px; padding: 11px; }
    .stat-top { font-size: 9px; }
    .dashboard-grid { gap: 10px; }
    .right-rail { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .chart-summary { gap: 6px; padding: 10px 10px 3px; }
    .chart-summary > div { min-height: 58px; padding: 9px 8px; }
    .chart-summary span { font-size: 8px; }
    .chart-summary strong { font-size: 18px; }
    .chart-legend { padding-top: 10px; }
    .chart-svg { height: 125px; }
    .panel-heading { padding-right: 12px; padding-left: 12px; }
    .table-toolbar { flex-wrap: wrap; padding: 11px; }
    .search-box { max-width: none; flex-basis: 100%; }
    .table-toolbar select { flex: 1; }
    .form-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .form-field-wide { grid-column: auto; }
    .client-form { padding: 16px 13px; }
    .page-heading > .button { align-self: flex-start; }
    .footer { min-height: 49px; padding: 15px 10px; font-size: 10px; }
    .coming-soon { min-height: 280px; padding: 25px 18px; }
}

/* XuiOne client management */
.client-page-heading { align-items: center; }
.client-page-heading .eyebrow { color: var(--orange-deep); }
.client-page-heading h1 { font-family: Manrope, sans-serif; font-size: clamp(25px, 3vw, 31px); font-weight: 800; letter-spacing: -.7px; }
.client-page-heading .heading-subtitle { max-width: 660px; }
.client-balance-pill { display: inline-flex; min-height: 36px; align-items: center; padding: 0 13px; border: 1px solid #e5e6eb; border-radius: 10px; background: var(--surface-soft); color: #505862; font-size: 12px; font-weight: 800; white-space: nowrap; }
.client-lines-panel { padding: 0 15px 13px; border-radius: 14px; }
.client-list-heading { display: flex; align-items: center; gap: 8px; padding: 19px 1px 9px; color: #77808a; font-size: 12px; font-weight: 800; }
.client-list-heading span { color: var(--orange-deep); }
.client-table-toolbar { display: grid; grid-template-columns: minmax(270px, 1fr) minmax(280px, 1fr) auto; align-items: end; gap: 14px; padding: 7px 1px 13px; }
.client-filter-field, .client-search-field { display: grid; min-width: 0; gap: 7px; }
.client-filter-field > span, .client-search-field > span { color: #7c858f; font-size: 10px; font-weight: 800; }
.client-filter-field select { width: 100%; height: 42px; padding: 0 35px 0 13px; border: 1px solid #e0e2e8; border-radius: 10px; background: var(--surface); color: #59616b; font-size: 13px; }
.client-search-control { display: flex; height: 42px; overflow: hidden; border: 1px solid #e0e2e8; border-radius: 10px; background: var(--surface); }
.client-search-control i { display: grid; width: 43px; flex: 0 0 43px; place-items: center; border-right: 1px solid #e9eaf0; color: var(--orange-deep); font-size: 19px; font-style: normal; }
.client-search-control input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0 12px; background: transparent; color: var(--ink); font-size: 12px; }
.client-search-control button { width: 48px; flex: 0 0 48px; border: 0; background: var(--orange); color: #252b32; font-size: 20px; cursor: pointer; }
.client-filter-submit { height: 42px; }
.client-table-count { padding: 0 0 10px; color: #78818c; font-size: 12px; }
.client-table-count span { display: inline-grid; min-width: 57px; height: 31px; place-items: center; margin: 0 3px; border: 1px solid #e0e2e8; border-radius: 8px; background: var(--surface); color: #59616b; }
.client-lines-scroll { border: 1px solid #e1e3e9; border-radius: 12px; }
.client-lines-table { min-width: 1100px; }
.client-lines-table th { height: 40px; padding: 0 12px; border-bottom: 1px solid #e1e3e9; text-align: center; }
.client-lines-table td { height: 53px; padding: 6px 12px; border-top: 1px solid #e7e8ed; text-align: center; }
.client-lines-table tbody tr:nth-child(odd) { background: #fafaff; }
.client-lines-table tbody tr:hover { background: #fff9ed; }
.client-lines-table th:last-child, .client-lines-table td:last-child { position: sticky; z-index: 1; right: 0; background: var(--surface); }
.client-lines-table tbody tr:nth-child(odd) td:last-child { background: #fafaff; }
.client-lines-table tbody tr:hover td:last-child { background: #fff9ed; }
.client-table-login { color: #505861; font-weight: 700; }
.client-table-password { color: #5a626c; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.client-notes-cell { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.client-status-badge { display: inline-flex; min-height: 21px; align-items: center; padding: 0 7px; border-radius: 5px; background: #19bf39; color: #fff; font-size: 10px; font-weight: 800; }
.client-status-trial { background: #eab400; color: #252b32; }
.client-status-expired { background: #12bdd6; color: #073b45; }
.client-status-inactive { background: #ef334b; }
.client-actions-heading { min-width: 270px; text-align: center; }
.client-row-actions { display: flex; min-width: 251px; align-items: center; justify-content: center; gap: 4px; }
.client-row-actions form { display: inline-flex; margin: 0; }
.client-action { display: grid; width: 33px; height: 33px; flex: 0 0 33px; place-items: center; border: 0; border-radius: 5px; background: #fff; color: #57606a; box-shadow: 0 0 0 1px #e5e7ed inset; font-size: 17px; font-weight: 800; cursor: pointer; transition: filter .15s, transform .15s; }
.client-action:hover { filter: brightness(.95); transform: translateY(-1px); }
.client-action-sync { background: #034889; color: #fff; box-shadow: none; }
.client-action-watch { background: #12c52e; color: #fff; box-shadow: none; font-size: 13px; }
.client-action-renew { background: #ffad00; color: #282d34; box-shadow: none; }
.client-action-connections { background: #405a9c; color: #fff; box-shadow: none; }
.client-action-toggle, .client-action-delete { background: #ff3857; color: #fff; box-shadow: none; }
.client-action-toggle.is-unblocked { background: #13b552; }
.client-modal { width: min(760px, calc(100% - 26px)); max-height: min(92dvh, 900px); overflow: auto; padding: 0; border: 1px solid #e2e4ea; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgba(24, 31, 46, .24); }
.client-modal::backdrop { background: rgba(24, 29, 39, .53); backdrop-filter: blur(2px); }
.client-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 21px 23px 15px; border-bottom: 1px solid var(--line); }
.client-modal-header h2 { margin: 0 0 4px; color: var(--ink); font-family: Manrope, sans-serif; font-size: 21px; font-weight: 800; }
.client-modal-header p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.client-modal-header p strong { color: #505862; }
.client-modal-close { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 22px; cursor: pointer; }
.client-modal-close:hover { border-color: #ffc354; color: var(--orange-deep); }
.client-modal-form { display: grid; gap: 13px; padding: 18px 22px 22px; }
.client-modal-section-title { padding-bottom: 12px; border-bottom: 1px solid var(--line); color: #444c55; font-size: 13px; font-weight: 800; }
.client-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.client-modal-field { display: grid; min-width: 0; gap: 6px; color: #78818c; font-size: 10px; font-weight: 800; }
.client-modal-field small { color: var(--muted); font-weight: 500; }
.client-credential-control, .client-basic-control { display: flex; min-width: 0; height: 41px; overflow: hidden; border: 1px solid #e0e2e8; border-radius: 9px; background: var(--surface); }
.client-credential-control:focus-within, .client-basic-control:focus-within { border-color: #ffbd42; box-shadow: 0 0 0 3px rgba(255, 164, 0, .1); }
.client-credential-control > i, .client-basic-control > i { display: grid; width: 37px; flex: 0 0 37px; place-items: center; border-right: 1px solid #ececf2; color: var(--orange-deep); font-size: 15px; font-style: normal; }
.client-credential-control input, .client-basic-control input, .client-modal-field > input, .client-modal-field textarea { width: 100%; min-width: 0; min-height: 40px; border: 1px solid #e0e2e8; border-radius: 9px; outline: 0; padding: 8px 11px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 400; }
.client-credential-control input, .client-basic-control input { border: 0; border-radius: 0; padding: 0 10px; background: transparent; }
.client-credential-control button { width: 35px; flex: 0 0 35px; border: 0; background: var(--orange); color: #242a31; font-size: 17px; cursor: pointer; }
.client-modal-field textarea { min-height: 80px; resize: vertical; }
.client-bouquet-box { padding: 12px; border: 1px solid #e2e4e9; border-radius: 11px; background: var(--surface-soft); }
.client-bouquet-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; color: #808893; font-size: 10px; font-weight: 800; }
.client-bouquet-heading small { color: var(--muted); font-size: 10px; font-weight: 500; }
.client-bouquet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.client-bouquet-option { position: relative; min-width: 0; cursor: pointer; }
.client-bouquet-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.client-bouquet-option span { display: flex; min-height: 35px; align-items: center; justify-content: center; gap: 5px; overflow: hidden; padding: 5px 8px; border: 1px solid #dfe2e7; border-radius: 7px; background: #fff; color: #59616a; font-size: 11px; font-weight: 700; text-align: center; text-overflow: ellipsis; }
.client-bouquet-option span::before { content: '+'; color: var(--orange-deep); font-size: 13px; }
.client-bouquet-option input:checked + span { border-color: #25a650; background: #239b47; color: #fff; }
.client-bouquet-option input:checked + span::before { content: '✓'; color: #fff; }
.client-bouquet-option input:focus-visible + span { outline: 3px solid rgba(255, 164, 0, .35); }
.client-bouquet-empty { margin: 0; color: #7b838d; font-size: 12px; }
.client-field-error { margin: 0; color: #d74552; font-size: 11px; }
.client-modal-credit-note { margin: 1px 0 0; color: #7c858f; font-size: 11px; text-align: center; }
.client-modal-submit { width: 100%; min-height: 40px; }
.client-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.client-small-modal { width: min(520px, calc(100% - 26px)); }
.client-watch-results { max-height: 46dvh; overflow: auto; }
.client-watch-item { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.client-watch-item + .client-watch-item { margin-top: 8px; }
.client-watch-item strong { color: var(--ink); font-size: 13px; }
.client-watch-item span { color: var(--muted); font-size: 11px; }
.dark-theme .client-balance-pill, .dark-theme .client-table-count span { border-color: #3d414b; background: #292d37; color: #d0d5dc; }
.dark-theme .client-filter-field select, .dark-theme .client-search-control, .dark-theme .client-credential-control, .dark-theme .client-basic-control, .dark-theme .client-modal-field > input, .dark-theme .client-modal-field textarea { border-color: #424650; background: #292d37; color: #e2e5ea; }
.dark-theme .client-search-control i, .dark-theme .client-credential-control > i, .dark-theme .client-basic-control > i { border-color: #424650; }
.dark-theme .client-lines-scroll { border-color: #3d414b; }
.dark-theme .client-lines-table th, .dark-theme .client-lines-table td { border-color: #3d414b; }
.dark-theme .client-lines-table tbody tr:nth-child(odd), .dark-theme .client-lines-table tbody tr:nth-child(odd) td:last-child { background: #242733; }
.dark-theme .client-lines-table tbody tr:hover, .dark-theme .client-lines-table tbody tr:hover td:last-child { background: #332d21; }
.dark-theme .client-lines-table th:last-child, .dark-theme .client-lines-table td:last-child { background: #292d37; }
.dark-theme .client-table-login, .dark-theme .client-modal-section-title, .dark-theme .client-modal-header p strong { color: #e2e5ea; }
.dark-theme .client-bouquet-box { border-color: #3d414b; }
.dark-theme .client-bouquet-option span { border-color: #424650; background: #242832; color: #d0d5dc; }
.dark-theme .client-bouquet-option input:checked + span { background: #237c3e; color: #fff; }
.dark-theme .client-modal { border-color: #363a43; }

@media (max-width: 760px) {
    .client-page-heading { align-items: flex-start; }
    .client-page-heading .heading-actions { flex-wrap: wrap; }
    .client-table-toolbar { grid-template-columns: minmax(0, 1fr); }
    .client-filter-submit { display: none; }
}
@media (max-width: 620px) {
    .client-lines-panel { padding: 0 9px 10px; }
    .client-lines-table { min-width: 1060px; }
    .client-create-grid { grid-template-columns: minmax(0, 1fr); }
    .client-bouquet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-modal-header { padding: 17px 16px 13px; }
    .client-modal-form { padding: 15px 16px 17px; }
}
.chart-line-cyan { stroke: var(--cyan); }
.chart-point-cyan { fill: var(--cyan); }
.status-dot-small.inactive { background: #9aa1aa; }
.badge-inactive { background: #eef0f3; color: #69717b; }
.integration-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 15px; padding: 12px 15px; border: 1px solid #d7e9ef; border-radius: 11px; background: #f2fbfd; color: #52636a; font-size: 12px; }
.integration-status a { flex: 0 0 auto; color: #bd7900; font-weight: 800; }
.integration-warning { border-color: #ffe0a1; background: #fffaf0; }
.integration-error { border-color: #f3c7cc; background: #fff5f6; }
.dark-theme .integration-status { border-color: #35535a; background: #202f33; color: #c1d0d4; }
.dark-theme .integration-warning { border-color: #68552f; background: #332c20; }
.dark-theme .integration-error { border-color: #664047; background: #342326; }
.dark-theme .badge-inactive { background: #30343a; color: #c1c5cb; }

.reseller-page-heading { align-items: center; gap: 16px; }
.reseller-heading-icon { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border-radius: 14px; background: #fff1d6; color: var(--orange-deep); font-size: 25px; }
.reseller-page-heading > div:nth-child(2) { flex: 1; }
.reseller-new-button { flex: 0 0 auto; }
.reseller-list-panel { padding: 18px 22px 16px; }
.reseller-section-title { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: #78818b; font-size: 12px; font-weight: 800; letter-spacing: .025em; }
.reseller-section-title span { color: var(--orange-deep); }
.reseller-list-panel > .integration-status { margin-bottom: 15px; }
.reseller-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(270px, .9fr); gap: 17px 32px; align-items: end; margin-bottom: 12px; }
.reseller-control { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.reseller-control > span { color: #78818b; font-size: 10px; font-weight: 800; }
.reseller-control select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #e0e2e8; border-radius: 9px; background: var(--surface); color: #59616a; }
.reseller-search-control .search-box { width: 100%; max-width: none; height: 40px; padding-left: 12px; }
.reseller-search-control .search-box button { display: grid; width: 46px; height: 40px; flex: 0 0 46px; place-items: center; margin: -1px -11px -1px 0; border: 0; border-radius: 0 8px 8px 0; background: var(--orange); color: #fff; font-size: 18px; cursor: pointer; }
.reseller-search-control .search-box button:hover { background: var(--orange-deep); }
.reseller-show-control { display: flex; align-items: center; gap: 6px; grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.reseller-show-control select { height: 30px; padding: 0 8px; border: 1px solid #e0e2e8; border-radius: 8px; background: var(--surface); color: var(--ink); }
.reseller-table-scroll { border: 1px solid #e3e5eb; border-radius: 12px; }
.reseller-table { min-width: 870px; }
.reseller-table th { height: 40px; border-bottom: 1px solid #e3e5eb; text-align: center; }
.reseller-table td { height: 53px; border-top: 1px solid #eceef2; text-align: center; }
.reseller-table tbody tr:nth-child(odd) { background: #fafaff; }
.reseller-table tbody tr:hover { background: #fff9ed; }
.reseller-table .reseller-login { color: #4b525b; font-weight: 700; }
.reseller-credit-value { color: var(--ink); font-weight: 700; }
.reseller-client-count { display: inline-flex; min-width: 43px; min-height: 25px; align-items: center; justify-content: center; gap: 6px; padding: 0 7px; border: 0; border-radius: 5px; background: #09bdd8; color: #073c45; font-size: 11px; font-weight: 800; }
.reseller-client-count span { font-size: 12px; }
.reseller-client-count[aria-disabled="true"] { cursor: default; opacity: .6; }
.reseller-client-count-muted { background: #f1f2f5; color: #878e98; }
.reseller-status { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 800; }
.reseller-status.is-active { background: #14c934; color: #fff; }
.reseller-status.is-suspended { background: #ffe7e9; color: #df4052; }
.reseller-actions { display: flex; align-items: center; justify-content: center; gap: 4px; }
.reseller-actions form { display: inline-flex; margin: 0; }
.reseller-action-button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 5px; color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; }
.reseller-action-button:hover { filter: brightness(.94); transform: translateY(-1px); }
.action-edit { background: #ffa400; color: #272727; }
.action-credits { background: #10c735; font-size: 19px; }
.action-suspend, .action-delete { background: #ff3452; }
.action-enable { background: #25b94d; }
.reseller-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; color: var(--muted); font-size: 12px; }
.reseller-table-footer .pagination-wrap { margin-left: auto; padding-top: 0; }
.reseller-credit-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; padding: 16px 18px; border: 1px solid #bce8ca; border-radius: 12px; background: #f0fbf3; color: #477156; }
.reseller-credit-summary strong { color: #169b42; font-size: 20px; }
.reseller-history-panel { margin-top: 16px; overflow: hidden; }
.credit-positive { color: #159b43; font-weight: 800; }
.credit-negative { color: #e14455; font-weight: 800; }
.reseller-credit-modal { width: min(560px, calc(100% - 28px)); }
.reseller-modal-form .form-grid { gap: 15px; }
.reseller-modal-form [data-parent-master-field][hidden] { display: none !important; }
.reseller-modal-form .form-field small { display: block; margin-top: 5px; color: #d34452; font-size: 11px; }
.reseller-modal-form .form-field small[data-counterparty-help] { color: var(--muted); }
.reseller-modal-form .form-field small.field-hint { color: var(--muted); }
.reseller-transfer-hint { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.credit-movement-badge { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.credit-movement-badge.is-addition { background: #e8f8ed; color: #168840; }
.credit-movement-badge.is-subtraction { background: #fff0f1; color: #d43f50; }
.reseller-modal { width: min(760px, calc(100% - 28px)); max-height: calc(100dvh - 30px); overflow: auto; padding: 0; border: 1px solid #e3e5eb; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgba(24, 31, 46, .24); }
.reseller-modal::backdrop { background: rgba(24, 29, 39, .52); backdrop-filter: blur(2px); }
.reseller-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.reseller-modal-header h2 { margin: 0 0 4px; color: var(--ink); font-size: 21px; }
.reseller-modal-header p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; }
.reseller-modal-close { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 22px; cursor: pointer; }
.reseller-modal-close:hover { border-color: #ffc354; color: var(--orange-deep); }
.reseller-modal-form { padding: 19px 24px 22px; }
.dark-theme .reseller-heading-icon { background: #3c3322; }
.dark-theme .reseller-modal { border-color: #363a43; }
.dark-theme .reseller-table tbody tr:nth-child(odd) { background: #242733; }
.dark-theme .reseller-table tbody tr:hover { background: #332d21; }
.dark-theme .reseller-table-scroll { border-color: #363a43; }
.dark-theme .reseller-table th, .dark-theme .reseller-table td { border-color: #363a43; }
.dark-theme .reseller-client-count-muted { background: #30343a; color: #c1c5cb; }
.dark-theme .reseller-credit-summary { border-color: #355a40; background: #202f25; color: #b7d0bd; }
.dark-theme .credit-movement-badge.is-addition { background: #203a29; color: #8dd29e; }
.dark-theme .credit-movement-badge.is-subtraction { background: #43292d; color: #f09aa4; }

/* Notícias */
.news-page { width: min(100%, 1010px); min-height: calc(100vh - 168px); margin: 0 auto; padding: 27px 30px 34px; border: 1px solid #e6e6ee; border-radius: 20px; background: radial-gradient(ellipse at 100% 0%, rgba(247, 246, 255, .76), transparent 34%), var(--surface); box-shadow: 0 5px 20px rgba(37, 42, 58, .045); }
.news-heading { display: flex; align-items: center; gap: 15px; padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.news-heading > div:first-child { flex: 1; }
.news-heading h1 { margin: 0 0 5px; color: var(--ink); font-family: Manrope, sans-serif; font-size: clamp(23px, 3vw, 30px); font-weight: 800; letter-spacing: -.8px; }
.news-heading .heading-subtitle { max-width: 570px; margin: 0; color: var(--muted); line-height: 1.5; }
.news-publication-count { display: flex; min-height: 48px; align-items: center; gap: 5px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.news-publication-count span { margin-right: 5px; color: var(--orange-deep); font-size: 17px; }
.news-publication-count strong { color: var(--orange-deep); }
.news-create-button { min-height: 42px; white-space: nowrap; }
.news-filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 19px 0 21px; }
.news-filter { display: inline-flex; min-height: 35px; align-items: center; padding: 0 14px; border: 1px solid #e4e5eb; border-radius: 22px; background: var(--surface-soft); color: #59616a; font-size: 12px; font-weight: 800; transition: transform .15s, box-shadow .15s, background .15s; }
.news-filter:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(30, 38, 58, .08); }
.news-filter.is-active { border-color: #555c63; background: #555c63; color: #fff; box-shadow: 0 4px 10px rgba(45, 51, 58, .14); }
.news-filter.filter-urgent { border-color: #ffb3bc; background: #fff1f3; color: #f03e53; }
.news-filter.filter-information { border-color: #a9dce7; background: #edfaff; color: #0ba6bd; }
.news-filter.filter-success { border-color: #a9dbb6; background: #effaf2; color: #20a34b; }
.news-filter.filter-notice { border-color: #f2d48b; background: #fff8e9; color: #c58b00; }
.news-filter.filter-general { border-color: #ffd083; background: #fff7e8; color: #df9400; }
.news-filter.filter-urgent.is-active { background: #f03e53; color: #fff; }
.news-filter.filter-information.is-active { background: #0ba6bd; color: #fff; }
.news-filter.filter-success.is-active { background: #20a34b; color: #fff; }
.news-filter.filter-notice.is-active { background: #d99b00; color: #fff; }
.news-filter.filter-general.is-active { background: #ed9c00; color: #fff; }
.news-timeline { position: relative; display: grid; gap: 14px; }
.news-timeline::before { position: absolute; top: 18px; bottom: 18px; left: 17px; border-left: 2px dashed #e1e3e9; content: ""; }
.news-entry { position: relative; min-width: 0; padding-left: 53px; }
.news-timeline-marker { position: absolute; z-index: 1; top: 4px; left: 0; display: grid; width: 37px; height: 37px; place-items: center; border: 2px solid var(--news-color, #e2a000); border-radius: 50%; background: var(--surface); color: var(--news-color, #e2a000); font-size: 16px; font-weight: 800; }
.news-card { overflow: hidden; border: 1px solid var(--line); border-left: 3px solid var(--news-color, #e2a000); border-radius: 14px; background: #f8f8fc; }
.news-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 19px 0; }
.news-card-header h2 { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--ink); font-family: Manrope, sans-serif; font-size: 16px; font-weight: 800; line-height: 1.45; }
.news-card-icon { color: var(--news-color, #e2a000); font-family: Arial, sans-serif; font-size: 18px; }
.news-card-meta { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.news-category-badge { display: inline-flex; min-height: 23px; align-items: center; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--news-color, #e2a000) 36%, white); border-radius: 15px; background: color-mix(in srgb, var(--news-color, #e2a000) 10%, white); color: var(--news-color, #e2a000); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.news-card-body { padding: 10px 20px 14px; color: #59616a; font-size: 13px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.news-card-footer { display: flex; min-height: 47px; align-items: center; justify-content: space-between; gap: 12px; margin: 0 19px; border-top: 1px solid #e2e3e9; color: var(--muted); }
.news-author { font-size: 11px; }
.news-reactions { display: flex; gap: 7px; }
.news-reactions form { margin: 0; }
.news-reaction { display: inline-flex; min-width: 65px; height: 31px; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; border: 1px solid #e1e3e9; border-radius: 18px; background: var(--surface); color: #818992; font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.news-reaction span { font-size: 11px; font-weight: 700; }
.news-reaction:hover, .news-reaction.is-selected { border-color: #ffc85e; background: #fff8e9; color: #d18c00; }
.news-entry.category-urgent { --news-color: #f43f57; }
.news-entry.category-information { --news-color: #12a9bf; }
.news-entry.category-success { --news-color: #28aa54; }
.news-entry.category-notice { --news-color: #d89c00; }
.news-entry.category-general { --news-color: #f1a000; }
.news-empty { padding: 52px 20px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; }
.news-empty > span { color: var(--orange); font-size: 25px; }
.news-empty h2 { margin: 9px 0 5px; color: var(--ink); font-size: 17px; }
.news-empty p { margin: 0; font-size: 12px; }
.news-pagination { margin-top: 20px; }
.news-modal { width: min(650px, calc(100% - 28px)); }
.news-modal textarea { min-height: 150px; resize: vertical; }
.news-form-error { margin: 10px 0 0; color: #dc3e50; font-size: 12px; }
.dark-theme .news-page { border-color: #343843; background: radial-gradient(ellipse at 100% 0%, rgba(55, 49, 73, .45), transparent 34%), var(--surface); }
.dark-theme .news-filter { border-color: #393d48; background: #242832; color: #c0c4cb; }
.dark-theme .news-filter.is-active { background: #555c63; color: #fff; }
.dark-theme .news-filter.filter-urgent { background: #39272d; color: #ff9ba7; }
.dark-theme .news-filter.filter-information { background: #20343b; color: #76d1df; }
.dark-theme .news-filter.filter-success { background: #24372b; color: #8cd6a0; }
.dark-theme .news-filter.filter-notice, .dark-theme .news-filter.filter-general { background: #3a3324; color: #f1c55e; }
.dark-theme .news-filter.filter-urgent.is-active, .dark-theme .news-filter.filter-information.is-active, .dark-theme .news-filter.filter-success.is-active, .dark-theme .news-filter.filter-notice.is-active, .dark-theme .news-filter.filter-general.is-active { color: #fff; }
.dark-theme .news-timeline::before { border-color: #424650; }
.dark-theme .news-card { background: #242832; }
.dark-theme .news-card-body { color: #bec3ca; }
.dark-theme .news-card-footer { border-color: #3d414b; }
.dark-theme .news-reaction { border-color: #454954; background: #292d37; color: #b8bdc5; }
.dark-theme .news-reaction:hover, .dark-theme .news-reaction.is-selected { border-color: #8a6824; background: #3d3422; color: #f4c254; }

/* Central de informações */
.information-page { width: min(100%, 970px); margin: 0 auto; padding: 27px 30px 35px; border: 1px solid #e4e5ed; border-radius: 20px; background: radial-gradient(ellipse at 100% 0%, rgba(247, 246, 255, .8), transparent 33%), var(--surface); box-shadow: 0 5px 20px rgba(37, 42, 58, .045); }
.information-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.information-heading-copy { max-width: 585px; }
.information-heading h1 { margin: 0 0 5px; color: var(--ink); font-family: Manrope, sans-serif; font-size: clamp(24px, 3vw, 30px); font-weight: 800; letter-spacing: -.8px; }
.information-heading-copy > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.information-catalog-total { display: flex; min-height: 52px; align-items: center; gap: 6px; padding: 0 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: #505861; font-size: 12px; font-weight: 700; white-space: nowrap; }
.information-catalog-total span, .information-catalog-total strong { color: var(--orange-deep); }
.information-catalog-total span { margin-right: 5px; font-size: 17px; }
.information-nav { position: sticky; z-index: 5; top: 68px; display: flex; gap: 3px; overflow-x: auto; margin: 21px 0 23px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); scrollbar-width: thin; }
.information-nav-link { display: inline-flex; min-height: 40px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border-radius: 10px; color: #68717b; font-size: 12px; font-weight: 800; white-space: nowrap; transition: background .16s, color .16s; }
.information-nav-link > span { font-size: 14px; }
.information-nav-link:hover { background: #fff8eb; color: #b87300; }
.information-nav-link.is-current { background: var(--orange); box-shadow: 0 3px 8px rgba(255, 164, 0, .2); color: #2e3033; }
.information-section { scroll-margin-top: 130px; margin-top: 16px; padding: 22px 21px; border: 1px solid var(--line); border-radius: 16px; background: #f8f8fd; }
.information-catalog-section { margin-top: 0; }
.information-section-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; }
.information-section-icon { display: grid; width: 45px; height: 45px; flex: 0 0 45px; place-items: center; border-radius: 12px; background: var(--orange); box-shadow: 0 5px 12px rgba(255, 164, 0, .18); color: #272c32; font-size: 20px; }
.information-section-heading h2 { margin: 0 0 3px; color: var(--ink); font-family: Manrope, sans-serif; font-size: 17px; font-weight: 800; }
.information-section-heading p { margin: 0; color: #66707c; font-size: 12px; line-height: 1.55; }
.information-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.information-count-card { display: flex; min-height: 135px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid #e3e4e9; border-radius: 14px; background: var(--surface); text-align: center; }
.catalog-card-icon { margin-bottom: 5px; color: var(--orange-deep); font-size: 21px; }
.information-count-card strong { color: #505963; font-family: Manrope, sans-serif; font-size: clamp(25px, 4vw, 34px); font-weight: 800; line-height: 1.15; }
.information-count-card > span:last-child { color: #78818c; font-size: 12px; }
.information-api-message { display: flex; align-items: center; gap: 11px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #f1dc9f; border-radius: 11px; background: #fff9e9; color: #78631f; }
.information-api-message > span { color: #d29300; font-size: 19px; }
.information-api-message > div { flex: 1; }
.information-api-message strong { font-size: 12px; }
.information-api-message p { margin: 2px 0 0; font-size: 11px; line-height: 1.5; }
.information-api-message a { color: #a56e00; font-size: 11px; font-weight: 800; white-space: nowrap; }
.information-api-message.is-stale { border-color: #dce2eb; background: #f2f5fa; color: #627080; }
.information-api-message.is-stale > span { color: #8490a0; }
.information-quick-section { background: #f8f8fd; }
.information-quick-section .information-section-heading { align-items: flex-start; margin-bottom: 17px; }
.information-quick-section .information-section-heading p { max-width: 730px; font-size: 13px; }
.information-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 0 3px 13px 58px; }
.information-quick-option { display: flex; min-height: 143px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 13px 10px; border: 1px solid #e2e3e9; border-radius: 15px; background: var(--surface); color: var(--ink); text-align: center; transition: transform .16s, border-color .16s, box-shadow .16s; }
.information-quick-option:hover, .information-quick-option:focus-visible { transform: translateY(-2px); border-color: #ffc354; box-shadow: 0 7px 18px rgba(37, 42, 58, .08); outline: none; }
.quick-option-icon { margin-bottom: 4px; color: var(--orange-deep); font-size: 24px; line-height: 1; }
.information-quick-option strong { font-family: Manrope, sans-serif; font-size: 14px; font-weight: 800; }
.information-quick-option > span:last-child { color: #737c87; font-size: 12px; }
.information-monthly-note { margin-left: 58px; padding: 14px 16px; border: 1px solid #ffc86e; border-radius: 13px; background: #fff5e5; color: #626d79; font-size: 12px; line-height: 1.65; }
.information-monthly-note strong { color: #525b66; }
.information-reference-section { padding-top: 18px; padding-bottom: 18px; }
.information-reference-section .information-section-heading { margin-bottom: 12px; }
.information-reference-links { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 58px; }
.information-reference-links a { display: inline-flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 15px; padding: 0 12px; border: 1px solid #e5e5eb; border-radius: 9px; background: var(--surface); color: #59616a; font-size: 11px; font-weight: 700; }
.information-reference-links a:hover { border-color: #ffc354; color: #ae7100; }
.information-reference-links a span { color: var(--orange-deep); font-size: 15px; }
.information-coming-soon { display: inline-flex; min-height: 31px; align-items: center; margin-left: 58px; padding: 0 12px; border: 1px solid #ffd586; border-radius: 8px; background: #fff7e8; color: #bd8000; font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.information-url-summary { margin: 0 3px 21px 58px; padding: 13px 16px; border: 1px solid #ffc86e; border-radius: 13px; background: #fff5e5; color: #5f6268; font-size: 12px; line-height: 2; }
.information-url-summary code, .information-section-heading code { padding: 3px 6px; border: 1px solid #ffdb9e; border-radius: 6px; background: var(--surface); color: #8a5a00; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.information-url-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 17px 58px; color: #78818b; font-size: 11px; font-weight: 800; }
.information-url-divider::before, .information-url-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.information-url-list { display: grid; gap: 13px; margin-left: 58px; }
.information-url-item { display: grid; min-width: 0; gap: 6px; color: #49525c; font-size: 12px; font-weight: 800; }
.information-url-control { display: flex; min-width: 0; overflow: hidden; border: 1px solid #e1e3e9; border-radius: 11px; background: #f0f1f7; }
.information-url-control input { width: 100%; min-width: 0; height: 40px; padding: 0 12px; border: 0; outline: none; background: transparent; color: #45505b; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.information-url-control button { display: grid; width: 50px; flex: 0 0 50px; place-items: center; border: 0; background: var(--orange); color: #fff; font-size: 21px; font-weight: 800; cursor: pointer; transition: filter .15s; }
.information-url-control button:hover { filter: brightness(.95); }
.information-url-tip { margin: 14px 0 0 58px; padding: 10px 12px; border-left: 3px solid #10aec3; border-radius: 10px; background: #e8f7fa; color: #5d6d7a; font-size: 11px; line-height: 1.6; }
.information-url-tip code { color: #e54267; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.information-rules-warning { display: flex; align-items: center; gap: 11px; margin: 0 3px 17px 58px; padding: 13px 15px; border: 1px solid #ff9eaa; border-radius: 13px; background: #fff0f2; color: #e83d50; font-size: 13px; }
.information-rules-warning > span { font-size: 20px; }
.information-rules-list { display: grid; gap: 12px; margin-left: 58px; }
.information-rule-card { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: start; gap: 11px; padding: 15px 16px; border: 1px solid #e2e3e9; border-radius: 14px; background: var(--surface); }
.information-rule-card.is-highlighted { border-color: #ffc86e; }
.information-rule-number { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--orange); color: #20242a; font-size: 14px; font-weight: 800; }
.information-rule-content h3 { margin: 1px 0 7px; color: #343a40; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 800; line-height: 1.5; }
.information-rule-content ul { display: grid; gap: 5px; margin: 0; padding: 0 0 0 18px; color: #67717d; font-size: 12px; line-height: 1.55; }
.information-rule-content li { padding-left: 1px; }
.information-rule-content li::marker { color: var(--orange); }
.information-rule-content strong { color: var(--orange-deep); }
.dark-theme .information-page { border-color: #353944; background: radial-gradient(ellipse at 100% 0%, rgba(55, 49, 73, .45), transparent 33%), var(--surface); }
.dark-theme .information-nav { border-color: #3b3f49; background: #242832; }
.dark-theme .information-nav-link { color: #c0c4cb; }
.dark-theme .information-nav-link:hover { background: #383022; color: #f4c254; }
.dark-theme .information-nav-link.is-current { background: var(--orange); color: #2e3033; }
.dark-theme .information-section { border-color: #393d48; background: #242832; }
.dark-theme .information-section-heading p, .dark-theme .information-copy { color: #bdc2ca; }
.dark-theme .information-count-card, .dark-theme .information-reference-links a { border-color: #3c404b; background: #292d37; }
.dark-theme .information-count-card strong { color: #e0e3e7; }
.dark-theme .information-count-card > span:last-child, .dark-theme .information-reference-links a { color: #bcc1c9; }
.dark-theme .information-api-message { border-color: #66552a; background: #393322; color: #e5d49f; }
.dark-theme .information-api-message.is-stale { border-color: #3e4857; background: #2b323e; color: #c1cbd9; }
.dark-theme .information-quick-section { background: #242832; }
.dark-theme .information-quick-option { border-color: #3d414b; background: #292d37; color: #e2e5ea; }
.dark-theme .information-quick-option > span:last-child { color: #bdc2ca; }
.dark-theme .information-monthly-note { border-color: #68532a; background: #393222; color: #c5c9cf; }
.dark-theme .information-monthly-note strong { color: #ebe1ca; }
.dark-theme .information-coming-soon { border-color: #68532a; background: #393222; color: #f1c55e; }
.dark-theme .information-url-summary { border-color: #68532a; background: #393222; color: #d3d0c9; }
.dark-theme .information-url-summary code, .dark-theme .information-section-heading code { border-color: #68532a; background: #292d37; color: #f1c55e; }
.dark-theme .information-url-divider { color: #aeb5bf; }
.dark-theme .information-url-control { border-color: #424650; background: #292d37; }
.dark-theme .information-url-control input { color: #d0d5dc; }
.dark-theme .information-url-tip { border-color: #167688; background: #20343b; color: #bbd4d9; }
.dark-theme .information-rules-warning { border-color: #74404a; background: #3b282e; color: #ff9ba7; }
.dark-theme .information-rule-card { border-color: #3d414b; background: #292d37; }
.dark-theme .information-rule-card.is-highlighted { border-color: #705828; }
.dark-theme .information-rule-content h3 { color: #e2e5ea; }
.dark-theme .information-rule-content ul { color: #bdc2ca; }

@media (max-width: 760px) {
    .news-page { padding: 20px 16px 26px; border-radius: 14px; }
    .news-heading { flex-wrap: wrap; }
    .news-heading > div:first-child { flex-basis: 100%; }
    .news-publication-count { min-height: 39px; }
    .news-card-header { flex-direction: column; gap: 8px; padding: 14px 14px 0; }
    .news-card-meta { flex-wrap: wrap; }
    .news-card-body { padding: 10px 14px 13px; }
    .news-card-footer { margin: 0 14px; }
    .information-page { padding: 20px 16px 25px; border-radius: 14px; }
    .information-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
    .information-catalog-total { min-height: 39px; }
    .information-nav { top: 60px; margin: 16px 0 18px; }
    .information-nav-link { min-height: 36px; padding: 0 9px; font-size: 11px; }
    .information-section { padding: 17px 13px; }
    .information-section-heading { align-items: flex-start; gap: 10px; }
    .information-section-icon { width: 39px; height: 39px; flex-basis: 39px; font-size: 18px; }
    .information-section-heading h2 { font-size: 15px; }
    .information-section-heading p { font-size: 11px; }
    .information-catalog-grid { gap: 7px; }
    .information-count-card { min-height: 104px; border-radius: 11px; }
    .information-count-card strong { font-size: clamp(21px, 6vw, 28px); }
    .information-count-card > span:last-child { font-size: 11px; }
    .information-quick-grid, .information-monthly-note, .information-reference-links, .information-coming-soon, .information-url-summary, .information-url-divider, .information-url-list, .information-url-tip, .information-rules-warning, .information-rules-list { margin-left: 0; }
    .information-quick-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .information-quick-option { min-height: 104px; }
}

@media (max-width: 720px) {
    .reseller-list-panel { padding: 15px 12px; }
    .reseller-toolbar { grid-template-columns: minmax(0, 1fr); gap: 13px; }
    .reseller-show-control { grid-column: auto; }
    .reseller-page-heading { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .reseller-page-heading > div:nth-child(2) { min-width: calc(100% - 70px); }
    .reseller-new-button { margin-left: 68px; }
    .reseller-modal-header { padding: 18px 16px 14px; }
    .reseller-modal-form { padding: 16px; }
}

.status-pill-active { border: 0; background: #e8f8ef; color: #19864a; cursor: pointer; }
.status-pill-active .status-dot { background: #20a65a; }
.status-pill-disabled { background: #ffeff1; color: #ef3f55; }
.status-pill-disabled .status-dot { background: #f2475a; }
.test-create-modal { width: min(560px, calc(100vw - 28px)); }
.test-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.test-type-option { position: relative; display: grid; min-height: 150px; align-content: center; justify-items: center; gap: 9px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); text-align: center; cursor: pointer; }
.test-type-option:has(input:checked) { border-color: var(--orange); background: var(--orange-wash); box-shadow: 0 0 0 2px rgba(255, 164, 0, .1); }
.test-type-option input { position: absolute; top: 12px; left: 12px; accent-color: var(--orange-deep); }
.test-type-icon { color: var(--orange-deep); font-size: 25px; }
.test-type-option strong { color: var(--ink); font-size: 13px; }
.test-type-option small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.client-detail-shell { max-width: 1180px; margin: 0 auto; padding: 22px 24px 32px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 5px 22px rgba(35, 39, 58, .045); }
.client-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.client-detail-heading h1 { margin: 0 0 4px; color: var(--ink); font-family: Manrope, sans-serif; font-size: clamp(22px, 2vw, 29px); font-weight: 800; }
.client-detail-heading .eyebrow { margin-bottom: 5px; }
.client-detail-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .9fr); align-items: start; gap: 18px; }
.client-detail-main, .client-detail-links { min-width: 0; }
.client-detail-summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.client-detail-summary-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.client-detail-summary-line strong { color: var(--ink); }
.client-detail-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.client-detail-card > header { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 800; }
.client-detail-card > header span { color: var(--orange-deep); }
.client-detail-card-body { display: grid; gap: 16px; padding: 15px; }
.client-detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 11px; }
.client-detail-fields .client-modal-field { min-width: 0; }
.client-detail-input-wrap { display: flex; min-width: 0; min-height: 40px; overflow: hidden; border: 1px solid #e0e2e8; border-radius: 9px; background: var(--surface); }
.client-detail-input-wrap i { display: grid; width: 36px; flex: 0 0 36px; place-items: center; border-right: 1px solid var(--line); background: var(--surface-soft); color: var(--orange-deep); font-style: normal; }
.client-detail-input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0 10px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.client-detail-input-wrap input:focus { box-shadow: inset 0 0 0 1px var(--orange); }
.client-detail-input-wrap input[readonly] { color: var(--muted); }
.client-device-fields { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.client-device-fields > small { color: var(--muted); font-size: 10px; }
.client-detail-section-label { color: var(--muted); font-size: 10px; font-weight: 800; }
.client-device-grid { grid-template-columns: 1.1fr 1fr 1fr; }
.client-detail-submit-row { display: flex; justify-content: flex-end; padding-top: 2px; }
.client-detail-submit-row .button { min-width: 190px; }
.client-links-card { position: sticky; top: 14px; }
.client-links-body { display: grid; gap: 9px; padding: 14px; }
.client-qr { justify-self: center; width: 168px; height: 168px; padding: 8px; border-radius: 12px; background: white; }
.client-link-tabs { display: flex; justify-content: center; gap: 8px; margin: 2px 0 4px; }
.client-link-tabs span { padding: 7px 12px; border: 1px solid var(--orange); border-radius: 8px; color: var(--orange-deep); font-size: 11px; font-weight: 700; }
.client-link-tabs span:first-child { background: var(--orange); color: white; }
.client-links-body h3 { margin: 4px 0 0; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.client-links-body .client-links-subheading { margin-top: 9px; padding-top: 10px; border-top: 1px solid var(--line); text-align: center; }
.client-link-row { display: flex; min-width: 0; min-height: 35px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.client-link-row strong { display: grid; min-width: 76px; place-items: center; padding: 0 7px; background: var(--surface-soft); color: var(--muted); font-size: 9px; text-transform: uppercase; }
.client-link-row input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0 8px; background: transparent; color: var(--ink); font-family: monospace; font-size: 10px; }
.client-link-row button { width: 38px; flex: 0 0 38px; border: 0; background: var(--orange); color: #fff; font-size: 17px; cursor: pointer; }
@media (max-width: 900px) {
    .client-detail-grid { grid-template-columns: 1fr; }
    .client-links-card { position: static; }
}
@media (max-width: 600px) {
    .client-detail-shell { padding: 15px 12px 20px; }
    .client-detail-heading { align-items: flex-start; flex-direction: column; }
    .client-detail-heading > .button { width: 100%; justify-content: center; }
    .client-detail-fields, .client-device-grid, .test-type-options { grid-template-columns: 1fr; }
    .client-detail-summary { align-items: flex-start; flex-direction: column; }
    .client-detail-submit-row .button { width: 100%; }
}

.tools-page { width: min(100%, 740px); margin: 0 auto; padding: 22px 23px 26px; border: 1px solid #e4e5ec; border-radius: 18px; background: radial-gradient(ellipse at 100% 0, rgba(246, 245, 255, .78), transparent 38%), var(--surface); box-shadow: 0 2px 8px rgba(30, 38, 58, .08); }
.tools-heading { display: flex; align-items: center; gap: 13px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.tools-heading-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; background: var(--orange-wash); color: var(--orange-deep); font-size: 21px; }
.tools-heading .eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.tools-heading h1 { margin: 0; color: #51575e; font-family: Manrope, sans-serif; font-size: 24px; font-weight: 800; line-height: 1.15; }
.tools-heading > div > p:last-child { max-width: 500px; margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.tools-card { overflow: hidden; margin-top: 16px; border: 1px solid #dedfe6; border-radius: 14px; background: var(--surface-soft); }
.tools-card-heading { display: flex; min-height: 40px; align-items: center; gap: 8px; padding: 9px 15px; border-bottom: 1px solid #e0e1e8; }
.tools-card-heading h2 { margin: 0; color: #303945; font-family: Manrope, sans-serif; font-size: 13px; font-weight: 800; }
.tools-icon-danger, .tools-icon-download { color: var(--orange-deep); font-size: 15px; font-weight: 800; }
.tools-icon-danger { color: var(--red); }
.tools-card-body { padding: 16px 17px 17px; }
.tools-help { margin: 0 0 11px; color: #687789; font-size: 11px; letter-spacing: .02em; }
.tools-check-list { display: grid; gap: 7px; margin-bottom: 14px; }
.tools-check-row { display: flex; min-height: 36px; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid #dedfe6; border-radius: 9px; background: var(--surface); color: #445061; cursor: pointer; font-size: 11px; }
.tools-check-row input { width: 14px; height: 14px; margin: 0; accent-color: var(--orange); }
.tools-label { display: block; margin: 0 0 7px; color: #687789; font-size: 10px; font-weight: 800; }
.tools-date-action-row { display: flex; min-height: 37px; align-items: stretch; overflow: hidden; border: 1px solid #dedfe6; border-radius: 9px; background: var(--surface); }
.tools-date-icon { display: grid; width: 35px; flex: 0 0 35px; place-items: center; border-right: 1px solid #e9eaf0; background: #f5f6fa; color: var(--orange-deep); font-size: 13px; }
.tools-date-action-row input[type="date"] { min-width: 0; flex: 1 1 0; padding: 0 9px; border: 0; outline: 0; background: transparent; color: #566b84; font-size: 11px; }
.tools-date-separator { display: grid; padding: 0 5px; place-items: center; color: var(--muted); font-size: 10px; }
.tools-button { display: inline-flex; min-width: 86px; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 0; color: #fff; cursor: pointer; font-size: 11px; font-weight: 800; }
.tools-button-danger { background: #e93d50; }
.tools-button-download { min-width: 90px; background: var(--orange); }
.tools-button:disabled { opacity: .55; cursor: not-allowed; }
.tools-alert { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid; border-radius: 9px; font-size: 10px; line-height: 1.45; }
.tools-alert > span { flex: 0 0 auto; font-size: 14px; font-weight: 700; }
.tools-alert p { margin: 0; }
.tools-alert-error { border-color: #ff9da5; background: #fff0f2; color: #bf2838; }
.tools-alert-warning { border-color: #ffca71; background: #fff7e8; color: #8c5a00; }
.tools-alert-info { border-color: #9ddde6; background: #eaf8fa; color: #119bb2; }
.tools-inline-alert { margin: 8px 0 0; padding: 9px 12px; font-size: 9px; }
.tools-field-error { display: block; margin: 5px 0; color: #d73d4d; font-size: 10px; }
.tools-page > .tools-alert { margin: 14px 0 0; }
.tools-date-action-row + .tools-alert { margin-top: 8px; }
.dark-theme .tools-page { border-color: #303541; background: radial-gradient(ellipse at 100% 0, rgba(49, 48, 70, .5), transparent 38%), var(--surface); }
.dark-theme .tools-heading h1, .dark-theme .tools-card-heading h2 { color: var(--ink); }
.dark-theme .tools-card, .dark-theme .tools-check-row { border-color: #363b47; }
.dark-theme .tools-card-heading { border-color: #363b47; }
.dark-theme .tools-date-icon { border-color: #363b47; background: #282c35; }
.dark-theme .tools-alert-error { border-color: #75414b; background: #342326; color: #ff9da5; }
.dark-theme .tools-alert-warning { border-color: #70562b; background: #302a1f; color: #ffcd7a; }
.dark-theme .tools-alert-info { border-color: #315d66; background: #1e3034; color: #8ad9e5; }
@media (max-width: 700px) {
    .tools-page { padding: 16px 14px 20px; }
    .tools-heading h1 { font-size: 21px; }
    .tools-date-action-row { flex-wrap: wrap; overflow: visible; border: 0; background: transparent; gap: 6px; }
    .tools-date-icon { height: 38px; border: 1px solid #dedfe6; border-radius: 8px 0 0 8px; }
    .tools-date-action-row input[type="date"] { min-width: calc(50% - 22px); height: 38px; border: 1px solid #dedfe6; border-radius: 0 8px 8px 0; background: var(--surface); }
    .tools-date-separator { min-width: 25px; }
    .tools-button { width: 100%; min-height: 38px; border-radius: 8px; }
}

/* Conteúdos novos */
.new-content-page { width: min(100%, 1160px); margin: 0 auto; padding: 8px 5px 28px; }
.new-content-heading { margin: 0 0 17px; }
.new-content-heading .eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: #7c858e; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.new-content-heading .eyebrow span { width: 6px; height: 6px; border-radius: 2px; background: var(--orange); }
.new-content-heading h1 { margin: 0; color: #51575e; font-family: Manrope, sans-serif; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.7px; line-height: 1.2; }
.new-content-heading h1 strong { color: var(--orange-deep); }
.new-content-heading > p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.new-content-api-message { display: flex; align-items: center; gap: 12px; margin: 13px 0; padding: 12px 14px; border: 1px solid #ffd184; border-radius: 11px; background: #fff8eb; color: #77500c; font-size: 12px; }
.new-content-api-message > span { color: var(--orange-deep); font-size: 19px; }
.new-content-api-message strong { display: block; }
.new-content-api-message p { margin: 2px 0 0; }
.new-content-api-message a { margin-left: auto; color: #a46400; font-weight: 800; }
.new-content-api-message.is-stale { border-color: #b8dfea; background: #eff9fb; color: #42616a; }
.new-content-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 16px 0 14px; padding: 4px; border: 1px solid #e1e2e9; border-radius: 13px; background: var(--surface-soft); box-shadow: 0 2px 6px rgba(37, 46, 62, .05); }
.new-content-tab { display: flex; min-width: 0; min-height: 36px; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 9px; background: transparent; color: #727a83; cursor: pointer; font-size: 11px; font-weight: 800; transition: background .15s, color .15s, box-shadow .15s; }
.new-content-tab:hover { color: var(--orange-deep); }
.new-content-tab small { padding: 2px 5px; border-radius: 99px; background: #e9ebf0; color: #707881; font-size: 9px; line-height: 1.2; }
.new-content-tab.is-active { background: var(--orange); color: white; box-shadow: 0 3px 9px rgba(243, 151, 0, .25); }
.new-content-tab.is-active small { background: rgba(255,255,255,.2); color: white; }
.new-content-panel[hidden] { display: none; }
.new-content-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.new-content-card { min-width: 0; overflow: hidden; border: 1px solid #dedfe6; border-radius: 11px; background: var(--surface); box-shadow: 0 1px 2px rgba(25, 34, 52, .03); }
.new-content-poster { display: grid; aspect-ratio: 1 / 1.12; overflow: hidden; place-items: center; background: #080808; color: var(--orange); }
.new-content-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.new-content-poster > span { font-size: 34px; }
.new-content-card-title { display: -webkit-box; min-height: 38px; overflow: hidden; padding: 7px 8px 5px; color: #39424b; font-size: 9px; font-weight: 800; line-height: 1.25; text-transform: uppercase; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.new-content-card-date { display: block; padding: 5px 5px 7px; border-top: 1px solid #e6e7ec; color: #68737d; font-size: 9px; font-weight: 700; text-align: center; }
.new-content-empty { display: grid; min-height: 160px; place-items: center; padding: 20px; border: 1px dashed #d8dbe3; border-radius: 13px; background: var(--surface-soft); color: var(--muted); font-size: 13px; text-align: center; }
.dark-theme .new-content-heading h1 { color: var(--ink); }
.dark-theme .new-content-tabs, .dark-theme .new-content-empty { border-color: #363b47; background: var(--surface-soft); }
.dark-theme .new-content-tab small { background: #363b47; color: #c2c7ce; }
.dark-theme .new-content-tab.is-active small { background: rgba(255,255,255,.2); color: white; }
.dark-theme .new-content-card { border-color: #363b47; }
.dark-theme .new-content-card-title { color: var(--ink); }
.dark-theme .new-content-card-date { border-color: #363b47; }
.dark-theme .new-content-api-message { border-color: #755a2f; background: #302a1e; color: #f2ce8d; }
.dark-theme .new-content-api-message.is-stale { border-color: #315d66; background: #1e3034; color: #a5dce4; }

/* Solicitações de conteúdo */
.content-requests-page, .content-admin-page { width: min(100%, 1040px); margin: 0 auto; padding: 20px 22px 28px; border: 1px solid #e4e5ec; border-radius: 17px; background: radial-gradient(ellipse at 100% 0, rgba(246,245,255,.7), transparent 34%), var(--surface); box-shadow: 0 2px 8px rgba(30,38,58,.07); }
.content-request-heading, .content-admin-heading { display: flex; align-items: center; gap: 13px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.content-request-heading-icon, .content-admin-heading-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; background: var(--orange-wash); color: var(--orange-deep); font-size: 23px; font-weight: 700; }
.content-request-title, .content-admin-heading-copy { min-width: 0; flex: 1; }
.content-request-title .eyebrow, .content-admin-heading-copy .eyebrow { margin: 0 0 3px; color: #818a94; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.content-request-title h1, .content-admin-heading h1 { margin: 0; color: #343b42; font-family: Manrope, sans-serif; font-size: 23px; font-weight: 800; line-height: 1.2; }
.content-request-title > p:last-child, .content-admin-heading-copy > p:last-child { max-width: 610px; margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.content-request-stats, .content-admin-stats { display: flex; gap: 6px; }
.content-request-stats > div, .content-admin-stats > div { display: grid; min-width: 68px; gap: 2px; place-items: center; padding: 7px 9px; border: 1px solid #e1e2e8; border-radius: 9px; background: var(--surface-soft); }
.content-request-stats strong, .content-admin-stats strong { color: var(--orange-deep); font-size: 14px; line-height: 1; }
.content-request-stats span, .content-admin-stats span { color: #818991; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.content-admin-link { white-space: nowrap; }
.content-guide { overflow: hidden; margin: 14px 0 12px; border: 1px solid #ffc96c; border-radius: 12px; background: #fff9f0; }
.content-guide summary { display: flex; min-height: 43px; align-items: center; gap: 9px; padding: 0 12px; color: #38424c; cursor: pointer; list-style: none; font-size: 12px; }
.content-guide summary::-webkit-details-marker { display: none; }
.content-guide-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #fff0d3; color: var(--orange-deep); font-size: 15px; }
.content-guide-chevron { margin-left: auto; color: #848b93; transition: transform .15s; }
.content-guide:not([open]) .content-guide-chevron { transform: rotate(180deg); }
.content-guide-body { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px 12px; border-top: 1px solid #ffdfaa; }
.content-guide-body p { flex: 1; margin: 0; color: #6d7885; font-size: 10px; line-height: 1.55; }
.content-guide-link { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 7px 10px; border: 1px solid var(--orange); border-radius: 8px; color: #a46400; font-size: 10px; font-weight: 800; }
.content-request-form-card, .content-request-history, .content-admin-card { overflow: hidden; margin-top: 12px; border: 1px solid #dedfe6; border-radius: 13px; background: var(--surface-soft); }
.content-request-form-card > header, .content-admin-card-heading { display: flex; min-height: 39px; align-items: center; gap: 8px; padding: 8px 13px; border-bottom: 1px solid #e1e2e8; }
.content-request-form-card > header > span, .content-admin-card-heading > span { color: var(--orange-deep); font-size: 16px; font-weight: 800; }
.content-request-form-card h2, .content-admin-card-heading h2 { margin: 0; color: #3e4750; font-family: Manrope, sans-serif; font-size: 12px; font-weight: 800; }
.content-request-form-body { padding: 13px 15px 15px; }
.content-request-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.content-field { display: grid; min-width: 0; gap: 6px; color: #727e89; font-size: 9px; font-weight: 800; }
.content-field > span, .content-field legend { padding: 0; color: #74808b; font-size: 9px; font-weight: 800; }
.content-field select, .content-field input[type="search"], .content-admin-filters input, .content-admin-filters select { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid #dedfe6; border-radius: 8px; outline: none; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 500; }
.content-field select:focus, .content-field input:focus, .content-admin-filters input:focus, .content-admin-filters select:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,164,0,.12); }
.content-audio-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.content-audio-field legend { margin-bottom: 6px; }
.content-choice-row { display: flex; flex-wrap: wrap; gap: 6px; }
.content-choice-row label { position: relative; cursor: pointer; }
.content-choice-row input { position: absolute; opacity: 0; }
.content-choice-row label span { display: inline-flex; min-height: 29px; align-items: center; padding: 0 11px; border: 1px solid #e2e3e8; border-radius: 99px; background: var(--surface); color: #5e6872; font-size: 10px; font-weight: 700; }
.content-choice-row input:checked + span { border-color: var(--orange); background: #fff5e3; color: #9e6000; }
.content-field small { color: #84909c; font-size: 9px; font-weight: 500; line-height: 1.4; }
.content-search-field { margin-top: 15px; }
.content-search-results { margin-top: 5px; }
.content-search-result-list { display: grid; max-height: 300px; gap: 5px; overflow-y: auto; padding: 3px; border: 1px solid #e1e2e8; border-radius: 9px; background: var(--surface); }
.content-search-result { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.content-search-result:hover:not(:disabled) { border-color: #ffd88c; background: #fffaf0; }
.content-search-result:disabled { opacity: .58; cursor: not-allowed; }
.content-result-poster, .content-selected-poster { display: grid; width: 38px; height: 54px; flex: 0 0 38px; place-items: center; border-radius: 5px; background: #e9eaf0; color: var(--orange-deep); object-fit: cover; }
.content-result-poster-empty { font-size: 18px; }
.content-result-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.content-result-copy strong { overflow: hidden; color: #3e4852; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.content-result-copy small { color: #7c8792; font-size: 9px; }
.content-result-action { color: var(--orange-deep); font-size: 9px; font-weight: 800; white-space: nowrap; }
.content-search-empty, .content-season-empty { margin: 0; padding: 11px; color: #7b8792; font-size: 10px; }
.content-selected-panel { margin-top: 9px; padding: 10px; border: 1px solid #dfe1e8; border-radius: 10px; background: var(--surface); }
.content-selected-summary { display: flex; align-items: flex-start; gap: 10px; }
.content-selected-poster { width: 52px; height: 74px; flex-basis: 52px; }
.content-selected-copy { display: grid; gap: 4px; }
.content-selected-copy strong { color: #36414b; font-size: 12px; }
.content-selected-copy > span, .content-selected-copy p { margin: 0; color: #71808e; font-size: 10px; line-height: 1.45; }
.content-selection-warning { color: #c83a47; font-size: 10px; font-weight: 700; }
.content-seasons { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.content-seasons > strong { color: #46515c; font-size: 10px; }
.content-seasons > p { margin: 3px 0 7px; color: #818b95; font-size: 9px; }
.content-season-options { display: flex; flex-wrap: wrap; gap: 6px; }
.content-season-option { display: flex; min-height: 34px; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid #e1e2e8; border-radius: 8px; background: var(--surface-soft); color: #4d5963; font-size: 10px; cursor: pointer; }
.content-season-option input { margin: 0; accent-color: var(--orange); }
.content-season-option small { color: #82909a; font-size: 8px; }
.content-request-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.content-request-submit-row p { margin: 0; color: #7c8792; font-size: 9px; }
.content-request-submit-row .button { min-width: 175px; justify-content: center; }
.content-request-submit-row .button:disabled { opacity: .55; cursor: not-allowed; }
.content-flash { margin: 12px 0; padding: 10px 12px; border: 1px solid; border-radius: 9px; font-size: 11px; }
.content-flash-error { border-color: #ffabb1; background: #fff1f2; color: #bf2838; }
.content-request-history > header { padding: 12px 14px 9px; border-bottom: 1px solid #e1e2e8; }
.content-request-history .eyebrow { margin: 0 0 2px; color: #8a939c; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.content-request-history h2 { margin: 0; color: #3f4953; font-family: Manrope, sans-serif; font-size: 14px; }
.content-request-history-list { display: grid; }
.content-request-history-item { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #e5e6eb; background: var(--surface); }
.content-request-history-item:last-child { border-bottom: 0; }
.content-request-history-item > img, .content-history-poster { display: grid; width: 35px; height: 49px; flex: 0 0 35px; place-items: center; border-radius: 5px; background: #e9eaf0; object-fit: cover; }
.content-history-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.content-history-copy strong { overflow: hidden; color: #3f4953; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.content-history-copy > span, .content-history-copy small { color: #808a94; font-size: 9px; }
.content-status-badge { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 4px 7px; border-radius: 99px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.content-status-pending { background: #fff3dc; color: #a66a00; }
.content-status-attended { background: #e4f6e9; color: #218a40; }
.content-status-rejected { background: #ffe8eb; color: #c83748; }
.content-history-empty, .content-admin-empty { padding: 24px 14px; color: #818b95; font-size: 11px; text-align: center; }
.content-request-pagination { padding: 10px 12px; }
.tmdb-attribution { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 15px 0 3px; color: #77818a; }
.tmdb-mark { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 4px; }
.tmdb-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tmdb-attribution p { margin: 0; font-size: 9px; }
.content-admin-heading { margin-bottom: 13px; }
.content-admin-heading > .button { white-space: nowrap; }
.content-admin-stats { justify-content: flex-start; margin: 12px 0; }
.content-admin-stats > div { min-width: 105px; padding: 9px 12px; }
.content-admin-stats strong { font-size: 16px; }
.content-admin-stats span { font-size: 9px; }
.content-admin-filters { display: flex; align-items: flex-end; gap: 9px; padding: 12px; border-bottom: 1px solid #e1e2e8; }
.content-admin-filters label { display: grid; gap: 5px; color: #78838e; font-size: 9px; font-weight: 800; }
.content-admin-search { flex: 1; }
.content-admin-status-filter { width: 175px; }
.content-admin-filters .button { min-height: 36px; }
.content-admin-list { display: grid; }
.content-admin-request { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid #e1e2e8; background: var(--surface); }
.content-admin-request:last-child { border-bottom: 0; }
.content-admin-poster { display: grid; width: 54px; height: 78px; flex: 0 0 54px; place-items: center; border-radius: 6px; background: #e9eaf0; object-fit: cover; }
.content-admin-poster-empty { color: var(--orange); font-size: 22px; }
.content-admin-request-main { min-width: 0; flex: 1; }
.content-admin-request-topline { display: flex; align-items: center; gap: 8px; }
.content-admin-request-topline h3 { overflow: hidden; margin: 0; color: #3a444e; font-family: Manrope, sans-serif; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.content-admin-request-main > p { margin: 4px 0 6px; color: #7a858f; font-size: 9px; line-height: 1.5; }
.content-admin-request-main > p strong { color: #505d68; }
.content-admin-request-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.content-admin-request-tags span { padding: 4px 6px; border-radius: 6px; background: var(--surface-soft); color: #687580; font-size: 8px; }
.content-admin-review-note { display: block; margin-top: 5px; color: #858e97; font-size: 8px; }
.content-admin-actions { display: grid; flex: 0 0 auto; gap: 6px; }
.content-admin-actions form { margin: 0; }
.content-admin-actions .button { min-width: 92px; min-height: 30px; justify-content: center; padding: 0 8px; font-size: 9px; }
.button-danger { border: 1px solid #f0aab2; background: #fff3f4; color: #c53546; }
.dark-theme .content-requests-page, .dark-theme .content-admin-page { border-color: #333945; background: radial-gradient(ellipse at 100% 0, rgba(49,48,70,.5), transparent 34%), var(--surface); }
.dark-theme .content-request-title h1, .dark-theme .content-admin-heading h1, .dark-theme .content-request-form-card h2, .dark-theme .content-admin-card-heading h2, .dark-theme .content-request-history h2, .dark-theme .content-admin-request-topline h3, .dark-theme .content-history-copy strong, .dark-theme .content-result-copy strong, .dark-theme .content-selected-copy strong { color: var(--ink); }
.dark-theme .content-guide { border-color: #70562b; background: #302a1f; }
.dark-theme .content-guide summary { color: var(--ink); }
.dark-theme .content-guide-body { border-color: #554429; }
.dark-theme .content-guide-body p, .dark-theme .content-guide-link { color: #ddc18d; }
.dark-theme .content-request-form-card, .dark-theme .content-request-history, .dark-theme .content-admin-card { border-color: #363b47; }
.dark-theme .content-request-form-card > header, .dark-theme .content-admin-card-heading, .dark-theme .content-request-history > header { border-color: #363b47; }
.dark-theme .content-field select, .dark-theme .content-field input[type="search"], .dark-theme .content-admin-filters input, .dark-theme .content-admin-filters select, .dark-theme .content-search-result-list, .dark-theme .content-selected-panel { border-color: #363b47; background: var(--surface); color: var(--ink); }
.dark-theme .content-search-result:hover:not(:disabled) { border-color: #70562b; background: #302a1f; }
.dark-theme .content-choice-row label span, .dark-theme .content-season-option { border-color: #363b47; background: var(--surface); color: var(--ink); }
.dark-theme .content-choice-row input:checked + span { border-color: var(--orange); background: #382c16; color: #ffd27c; }
.dark-theme .content-request-history-item, .dark-theme .content-admin-request { border-color: #363b47; background: var(--surface); }
.dark-theme .content-admin-request-tags span { background: var(--surface-soft); color: #c1c7ce; }
.dark-theme .content-flash-error { border-color: #75414b; background: #342326; color: #ff9da5; }
.dark-theme .button-danger { border-color: #75414b; background: #342326; color: #ff9da5; }
@media (max-width: 1100px) { .new-content-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) {
    .new-content-page { padding: 5px 0 20px; }
    .new-content-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
    .content-requests-page, .content-admin-page { padding: 15px 13px 20px; }
    .content-request-heading { flex-wrap: wrap; }
    .content-request-title { flex-basis: calc(100% - 60px); }
    .content-request-stats { margin-left: 54px; }
    .content-admin-heading { flex-wrap: wrap; }
    .content-admin-heading-copy { flex-basis: calc(100% - 60px); }
}
@media (max-width: 600px) {
    .new-content-heading h1 { font-size: 22px; }
    .new-content-heading > p:last-child { font-size: 11px; line-height: 1.4; }
    .new-content-tabs { margin: 12px 0 10px; }
    .new-content-tab { min-height: 34px; gap: 3px; font-size: 9px; }
    .new-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .new-content-poster { aspect-ratio: 1 / 1.1; }
    .content-request-heading { align-items: flex-start; }
    .content-request-title h1, .content-admin-heading h1 { font-size: 20px; }
    .content-request-title > p:last-child, .content-admin-heading-copy > p:last-child { font-size: 10px; }
    .content-request-stats { margin-left: 0; }
    .content-admin-link { margin-left: 54px; }
    .content-guide-body { flex-direction: column; }
    .content-guide-link { align-self: flex-start; }
    .content-request-form-grid { grid-template-columns: 1fr; }
    .content-request-submit-row { align-items: stretch; flex-direction: column; }
    .content-request-submit-row .button { width: 100%; }
    .content-admin-filters { align-items: stretch; flex-direction: column; }
    .content-admin-status-filter { width: auto; }
    .content-admin-filters .button { justify-content: center; }
    .content-admin-request { align-items: flex-start; flex-wrap: wrap; gap: 9px; }
    .content-admin-request-main { flex-basis: calc(100% - 68px); }
    .content-admin-actions { display: flex; width: 100%; margin-left: 63px; }
    .content-admin-actions form { flex: 1; }
    .content-admin-actions .button { width: 100%; }
    .content-admin-heading > .button { margin-left: 54px; }
    .content-request-history-item { gap: 7px; padding: 8px; }
    .content-request-history-item .content-status-badge { font-size: 7px; }
}

/* Relatos de problemas */
.problem-report-page, .problem-report-admin-page {
    width: min(100%, 760px);
    margin: 30px auto;
    padding: 24px;
    border: 1px solid #e1e2eb;
    border-radius: 18px;
    background: radial-gradient(ellipse at 100% 0, rgba(255, 166, 0, .045), transparent 32%), var(--surface);
    box-shadow: 0 3px 10px rgba(38, 48, 61, .09);
}
.problem-report-heading, .problem-report-admin-heading { display: flex; align-items: center; gap: 13px; padding: 0 0 17px; border-bottom: 1px solid #e1e2e8; }
.problem-report-heading-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 11px; background: #fff0f0; color: #ef3348; font-size: 21px; }
.problem-report-heading .eyebrow, .problem-report-admin-heading .eyebrow { margin: 0 0 3px; color: #7b8790; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.problem-report-heading h1, .problem-report-admin-heading h1 { margin: 0; color: #3c454d; font: 800 22px/1.2 Manrope, sans-serif; }
.problem-report-heading > div > p:last-child, .problem-report-admin-heading > div > p:last-child { max-width: 470px; margin: 4px 0 0; color: #707c87; font-size: 11px; line-height: 1.5; }
.problem-report-warning, .problem-report-flash { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; padding: 11px 13px; border: 1px solid #ff9ca5; border-radius: 9px; background: #fff1f2; color: #4e5962; font-size: 10px; line-height: 1.5; }
.problem-report-warning > span { color: #ef3348; font-size: 15px; line-height: 1; }
.problem-report-warning p { margin: 0; }
.problem-report-warning strong:first-child, .problem-report-warning p > strong { color: #e52c43; }
.problem-report-card, .problem-report-admin-card { overflow: hidden; margin-top: 15px; border: 1px solid #dedfe7; border-radius: 12px; background: var(--surface-soft); }
.problem-report-card > header, .problem-report-admin-card > header { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-bottom: 1px solid #dedfe7; background: var(--surface); }
.problem-report-card > header > span, .problem-report-admin-card > header > span { color: var(--orange); font-size: 13px; }
.problem-report-card > header h2, .problem-report-admin-card > header h2 { margin: 0; color: #3d4650; font: 800 11px/1.2 Manrope, sans-serif; }
.problem-report-form { display: grid; gap: 12px; padding: 14px 17px 16px; }
.problem-report-field { display: grid; min-width: 0; gap: 6px; margin: 0; padding: 0; border: 0; }
.problem-report-field > span, .problem-report-field > legend { padding: 0; color: #7c8791; font-size: 8px; font-weight: 800; }
.problem-report-select-wrap { position: relative; display: flex; min-width: 0; min-height: 35px; align-items: center; overflow: hidden; border: 1px solid #dedfe5; border-radius: 8px; background: var(--surface); }
.problem-report-select-wrap > i { display: grid; width: 35px; height: 33px; flex: 0 0 35px; place-items: center; border-right: 1px solid #eeeef2; background: #fafaff; color: var(--orange); font-size: 12px; font-style: normal; }
.problem-report-select-wrap select { width: 100%; min-width: 0; height: 33px; padding: 0 30px 0 9px; border: 0; outline: 0; background: transparent; color: #49545f; font: 500 10px 'DM Sans', sans-serif; }
.problem-report-select-wrap:focus-within { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255, 166, 0, .12); }
.problem-report-select-wrap select:disabled { color: #969da5; cursor: wait; }
.problem-report-field > small { color: #87919a; font-size: 9px; }
.problem-report-field > small:not(.problem-report-hint) { color: #d93649; }
.problem-report-problems-field > legend { margin-bottom: 8px; }
.problem-report-field > .problem-report-hint { margin: 0 0 6px; font-size: 12px; line-height: 1.5; }
.problem-report-multiselect { position: relative; }
.problem-report-multiselect > summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #dedfe5; border-radius: 8px; background: var(--surface); color: #56616c; font-size: 13px; line-height: 1.5; cursor: pointer; list-style: none; }
.problem-report-multiselect > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.problem-report-multiselect > summary::-webkit-details-marker { display: none; }
.problem-report-multiselect[open] > summary { border-color: var(--orange); border-radius: 8px 8px 0 0; }
.problem-report-multiselect > summary > span:last-child { color: var(--orange); font-size: 15px; }
.problem-report-problem-options { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--orange); border-top: 0; border-radius: 0 0 8px 8px; background: var(--surface); }
.problem-report-problem-options label { display: flex; min-height: 44px; align-items: center; gap: 10px; padding: 10px; border-radius: 6px; color: #56616c; font-size: 13px; line-height: 1.4; cursor: pointer; }
.problem-report-problem-options label:has(input:checked) { background: var(--surface-soft); box-shadow: inset 3px 0 var(--orange); }
.problem-report-problem-options label:hover { background: var(--surface-soft); }
.problem-report-problem-options input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--orange); }
.problem-report-submit { min-height: 44px; justify-content: center; gap: 7px; margin-top: 6px; border-radius: 8px; font-size: 13px; }
.problem-report-catalog-message { padding: 8px 10px; border: 1px solid #9dd9e3; border-radius: 7px; background: #effbfc; color: #287889; font-size: 9px; line-height: 1.5; }
.problem-report-catalog-message.is-error, .problem-report-flash-error { border-color: #ff9ca5; background: #fff1f2; color: #d93649; }
.problem-report-flash-success { border-color: #a8dcbb; background: #effaf3; color: #248149; }
.problem-report-admin-heading { border: 0; padding-bottom: 0; }
.problem-report-admin-heading .problem-report-heading-icon { background: #fff3d9; color: var(--orange); }
.problem-report-admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 17px; }
.problem-report-admin-stats a { display: grid; justify-items: center; gap: 3px; padding: 12px 8px; border: 1px solid #e0e1e8; border-radius: 9px; background: var(--surface-soft); text-decoration: none; }
.problem-report-admin-stats a:hover { border-color: var(--orange); }
.problem-report-admin-stats strong { color: var(--orange); font: 800 18px Manrope, sans-serif; }
.problem-report-admin-stats span { color: #78838e; font-size: 9px; font-weight: 700; }
.problem-report-admin-filters { display: flex; align-items: flex-end; gap: 9px; padding: 12px; border-bottom: 1px solid #e1e2e8; }
.problem-report-admin-filters label { display: grid; flex: 1; gap: 5px; color: #78838e; font-size: 8px; font-weight: 800; }
.problem-report-admin-filters input, .problem-report-admin-filters select, .problem-report-status-form select { min-width: 0; min-height: 34px; padding: 0 9px; border: 1px solid #dedfe5; border-radius: 7px; background: var(--surface); color: #4f5a64; font: 500 10px 'DM Sans', sans-serif; }
.problem-report-admin-filters .button, .problem-report-status-form .button { min-height: 34px; font-size: 9px; }
.problem-report-admin-item { display: flex; align-items: center; gap: 12px; padding: 13px; border-bottom: 1px solid #e1e2e8; background: var(--surface); }
.problem-report-admin-item:last-child { border-bottom: 0; }
.problem-report-admin-main { min-width: 0; flex: 1; }
.problem-report-admin-titleline { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.problem-report-admin-titleline h3 { margin: 2px 0 0; color: #3a444e; font: 800 12px Manrope, sans-serif; overflow-wrap: anywhere; }
.problem-report-type, .problem-report-admin-meta, .problem-report-handler { color: #7b8690; font-size: 9px; }
.problem-report-admin-meta { margin: 5px 0 7px; }
.problem-report-admin-meta strong { color: #525e68; }
.problem-report-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.problem-report-tags span { padding: 4px 7px; border-radius: 6px; background: #fff2d8; color: #9a6600; font-size: 8px; }
.problem-report-handler { display: block; margin-top: 6px; }
.problem-report-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 99px; background: #fff4da; color: #9a6600; font-size: 8px; font-weight: 800; }
.problem-report-status-in_progress { background: #eaf5ff; color: #2873a6; }
.problem-report-status-resolved { background: #eaf8ef; color: #26804a; }
.problem-report-status-form { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.problem-report-admin-empty { padding: 28px 14px; color: #7b8690; text-align: center; font-size: 10px; }
.dark-theme .problem-report-page, .dark-theme .problem-report-admin-page { border-color: #363b47; background: radial-gradient(ellipse at 100% 0, rgba(49,48,70,.5), transparent 34%), var(--surface); }
.dark-theme .problem-report-heading h1, .dark-theme .problem-report-admin-heading h1, .dark-theme .problem-report-card > header h2, .dark-theme .problem-report-admin-card > header h2, .dark-theme .problem-report-admin-titleline h3 { color: var(--ink); }
.dark-theme .problem-report-card, .dark-theme .problem-report-admin-card, .dark-theme .problem-report-card > header, .dark-theme .problem-report-admin-card > header, .dark-theme .problem-report-admin-item, .dark-theme .problem-report-select-wrap, .dark-theme .problem-report-multiselect > summary, .dark-theme .problem-report-problem-options, .dark-theme .problem-report-admin-stats a { border-color: #363b47; background: var(--surface); }
.dark-theme .problem-report-select-wrap select, .dark-theme .problem-report-admin-filters input, .dark-theme .problem-report-admin-filters select, .dark-theme .problem-report-status-form select { color: var(--ink); }
.dark-theme .problem-report-warning { border-color: #75414b; background: #342326; color: #f0c3c8; }
.dark-theme .problem-report-warning strong:first-child, .dark-theme .problem-report-warning p > strong { color: #ff9da5; }
.dark-theme .problem-report-admin-meta strong, .dark-theme .problem-report-problem-options label { color: #c1c7ce; }
@media (max-width: 700px) {
    .problem-report-page, .problem-report-admin-page { margin: 14px auto; padding: 16px 13px; border-radius: 13px; }
    .problem-report-heading h1, .problem-report-admin-heading h1 { font-size: 19px; }
    .problem-report-admin-filters { align-items: stretch; flex-direction: column; }
    .problem-report-admin-filters .button { justify-content: center; }
    .problem-report-admin-item { align-items: flex-start; flex-direction: column; }
    .problem-report-admin-main { width: 100%; }
    .problem-report-status-form { width: 100%; }
    .problem-report-status-form select { flex: 1; }
}