@font-face { font-family: Workspace; src: local("Segoe UI"); }
:root { --ink:#163855; --muted:#526f87; --blue:#087dc4; --pale:#e5f4ff; --line:#c7e0f1; --paper:#fff; --canvas:#eaf5fd; --red:#ae3d4f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:Workspace,Inter,system-ui,sans-serif; font-size:1rem; line-height:1.5; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:1px solid transparent; border-radius:10px; padding:10px 16px; font-weight:600; background:none; color:inherit; transition:background .15s, border-color .15s, box-shadow .15s; }
button:disabled { opacity:.4; cursor:not-allowed; }
button:focus-visible,a:focus-visible { outline:3px solid #56b8ed; outline-offset:3px; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
input,select,textarea { width:100%; border:1px solid #cbdde9; border-radius:9px; padding:10px 12px; color:var(--ink); background:white; outline:none; }
input:focus,select:focus,textarea:focus { border-color:#087abf; box-shadow:0 0 0 3px #e1f2fc; }
input::placeholder,textarea::placeholder { color:#73869a; }
input[type=number] { appearance:textfield; }
input::-webkit-inner-spin-button { appearance:none; }
textarea { resize:vertical; }
label { display:flex; flex-direction:column; gap:5px; font-size:0.875rem; font-weight:600; color:#536c83; }
.primary { color:white; background:var(--blue); }
.primary:hover:not(:disabled) { background:#08649b; }
.secondary { border-color:#cbdde9; background:white; }
.secondary:hover:not(:disabled),.quiet:hover:not(:disabled) { background:#eaf6ff; }
.quiet { color:#536c83; padding:7px 10px; }
.danger { color:var(--red); border-color:#e4c4bd; }
.muted { color:var(--muted); }
.eyebrow { color:#08649b; font-size:0.75rem; font-weight:700; letter-spacing:1.8px; margin:0 0 9px; }
h1 { font-size:2.125rem; line-height:1.25; letter-spacing:-1.1px; font-weight:650; margin:0 0 10px; }
h2 { font-size:1.4375rem; letter-spacing:-.5px; margin:0; }
p { margin:0 0 15px; }
[hidden] { display:none !important; }
.topbar { height:73px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 36px; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); font-size:1rem; }
.brand:hover { text-decoration:none; }
.brand-mark { display:inline-flex; font-size:2.1875rem; font-weight:750; letter-spacing:-3px; background:var(--blue); color:white; width:62px; height:62px; justify-content:center; align-items:center; border-radius:15px; }
.brand-mark span { color:#a5e3ff; }
.brand-mark.small { width:36px; height:36px; border-radius:9px; font-size:1.625rem; letter-spacing:-2px; }
.brand-divider { color:#cbdde9; margin:0 5px; }
.account { display:flex; gap:10px; align-items:center; font-size:0.875rem; }
.avatar { display:inline-grid; place-items:center; width:29px; height:29px; border-radius:50%; background:#eaf6ff; font-weight:700; }
.workspace { max-width:1800px; padding:24px 36px 30px; margin:auto; }
.workspace-hero { position:relative; isolation:isolate; overflow:hidden; background:#bce4fc; border:1px solid #a8d8f7; border-radius:24px; margin-bottom:20px; }
.workspace-hero::before,.workspace-hero::after { content:""; position:absolute; z-index:-1; width:440px; height:440px; border:1px solid #85c8f1; border-radius:50%; right:9%; top:-195px; pointer-events:none; }
.workspace-hero::after { width:330px; height:330px; right:13%; top:-140px; background:#cdeeff60; }
.environment { display:flex; align-items:center; gap:9px; font-size:0.8125rem; color:#476982; padding:7px 12px; border:1px solid #cce5f5; background:#eaf6ff; border-radius:6px; }
.environment strong { color:#08649b; font-size:0.75rem; text-transform:uppercase; letter-spacing:.7px; }
.environment .quiet { margin-left:auto; font-size:0.8125rem; padding:2px 6px; }
.status-dot { height:7px; width:7px; border-radius:100%; background:#087dc4; flex:none; box-shadow:0 0 0 4px #087dc415; }
.page-heading { display:flex; justify-content:space-between; align-items:center; padding:26px 32px 24px; gap:24px; }
.page-heading h1 { font-size:clamp(2rem,2.8vw,2.75rem); font-weight:750; line-height:1.1; letter-spacing:-1.4px; }
.page-heading h1 br { display:none; }
.page-heading h1 span { color:#076ba6; }
.page-heading p:last-child { margin:0; font-size:1rem; color:#315d7c; }
.hero-actions { display:flex; align-items:center; gap:30px; flex:none; }
.hero-symbol { display:grid; place-items:center; width:76px; height:76px; font-size:3.5rem; line-height:1; color:#1686c5; background:#eaf8ff9c; border:1px solid #91ccee; border-radius:22px; transform:rotate(-7deg); }
.hero-actions .primary { padding:13px 22px; border-radius:12px; background:#086fae; box-shadow:0 5px 12px #0b72ac20; }
.hero-actions .primary:hover:not(:disabled) { background:#075b90; }
.workspace-hero .environment { position:relative; border:0; border-top:1px solid #acd6f0; border-radius:0; background:#dbf0fca6; padding:10px 32px; color:#315d7c; }
.workspace-hero .environment strong { white-space:nowrap; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.metrics article { padding:16px 22px 19px; background:#f8fcff; border:1px solid #c0dff3; border-radius:18px; box-shadow:0 4px 12px #244e7508; }
.metrics article:first-child { background:#0879bb; border-color:#0879bb; }
.metrics article:first-child strong,.metrics article:first-child .metric-label { color:white; }
.metrics article:first-child small { color:#e1f4ff; }
.metrics article:first-child .metric-icon { color:white; background:#ffffff20; border-color:#ffffff30; }
.metric-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.metric-icon { display:grid; place-items:center; height:32px; width:32px; border:1px solid #b9dff5; border-radius:10px; background:#dff2ff; color:#0873b5; font-size:1.35rem; flex:none; }
.metric-label { color:#355e7d; font-size:0.875rem; font-weight:600; }
.metrics strong { display:block; color:#12547f; font-size:2.25rem; font-weight:700; letter-spacing:-1px; margin:0 0 3px; }
.metrics small { color:#526f87; display:block; font-size:0.8125rem; }
.metrics-note { display:flex; justify-content:space-between; gap:12px; font-size:0.75rem; color:#64788e; margin:10px 2px 22px; }
.source-panel { background:white; border:1px solid #b7d9ee; border-radius:20px; overflow:hidden; box-shadow:0 8px 30px #1a609010; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line); background:#e0f1fd; }
.panel-heading .muted { font-size:0.8125rem; font-weight:600; background:#f5fbff; color:#286389; padding:6px 12px; border:1px solid #c1deef; border-radius:30px; }
.tabs { display:flex; gap:5px; padding:0; }
.tab { border-radius:11px; padding:11px 20px; color:#396482; font-size:0.9375rem; }
.tab:hover:not(.selected) { background:#d0eafa; }
.tab.selected { color:white; background:#087dc4; box-shadow:0 3px 8px #087dc426; }
.review-help { padding:11px 22px; background:#f1f9ff; color:#456c87; font-size:0.8125rem; border-bottom:1px solid var(--line); }
.filters { display:flex; align-items:end; gap:12px; padding:18px 21px; flex-wrap:wrap; }
.filters label { font-size:0.8125rem; }
.filters input,.filters select { font-size:0.875rem; height:44px; background:#f8fcff; border-color:#bad7eb; }
.filters input:focus,.filters select:focus { background:white; }
.search-label { flex:1; min-width:190px; }
.filters>label:not(.search-label) { min-width:145px; }
.filters>button { font-size:0.875rem; height:42px; }
.extra-filters { width:100%; display:flex; flex-wrap:wrap; gap:12px; padding-top:12px; border-top:1px solid #e8eff5; }
.extra-filters label { flex:1; min-width:120px; }
.extra-filters button { align-self:end; }
.table-scroll { overflow:auto; }
table { width:100%; border-collapse:collapse; table-layout:fixed; min-width:1220px; }
thead { background:#cce9fb; }
th { text-align:left; font-size:0.8125rem; font-weight:650; color:#285877; padding:13px 12px; border-top:1px solid #b9daef; border-bottom:1px solid #b9daef; }
th:nth-child(1) { width:17%; padding-left:21px; }
th:nth-child(2) { width:8%; }
th:nth-child(3) { width:14%; }
th:nth-child(4) { width:24%; }
th:nth-child(5) { width:13%; }
th:nth-child(6) { width:11%; }
th:nth-child(7) { width:13%; }
td { padding:18px 12px; vertical-align:top; border-bottom:1px solid #e8eff5; }
td:first-child { padding-left:21px; }
tr:last-child td { border-bottom:0; }
tbody tr:nth-child(even) { background:#f5faff; }
tbody tr:hover { background:#ebf6ff; }
tbody tr.recent-approved { background:#f3faf7; }
tbody tr.recent-rejected { background:#fff7f8; }
tr.dirty { box-shadow:inset 3px 0 #cba85b; }
.domain-name { display:block; padding:0; font-size:1rem; text-align:left; word-break:break-word; margin-bottom:10px; font-weight:650; color:#075f9b; }
.domain-name:hover { color:var(--blue); text-decoration:underline; }
.country-pill { display:inline-block; font-size:0.75rem; font-weight:700; color:#22618b; background:#dceffd; border:1px solid #c1def2; border-radius:6px; padding:2px 7px; }
.country-name { color:#64788e; font-size:0.75rem; margin-left:5px; }
.cell-input { border-color:#d1e4f1; padding:8px 10px; background:#ffffffc9; font-size:0.875rem; margin:-5px -6px 0; width:calc(100% + 12px); }
.cell-input:hover { border-color:#b7d4e8; background:white; }
.number-input { font-variant-numeric:tabular-nums; font-size:1rem; font-weight:650; color:#145980; background:#eef8ff; }
textarea.cell-input { min-height:110px; height:110px; line-height:1.55; }
.open-url { font-size:0.75rem; display:inline-block; margin-top:6px; }
.badge { display:inline-block; font-size:0.75rem; border-radius:6px; padding:4px 8px; font-weight:600; background:#e2f1fc; color:#2f6385; white-space:nowrap; }
.badge.approved { background:#e2f4ec; color:#216a4b; }
.badge.rejected { background:#fce9ed; color:#a3354d; }
.badge.rereview { background:#faf0d7; color:#8b722e; }
.development { display:block; color:#64788e; font-size:0.75rem; margin-top:5px; }
.reviewer { font-size:0.75rem; word-break:break-word; color:#536c83; }
.review-date { display:block; color:#64788e; font-size:0.75rem; margin-top:4px; }
.row-actions { display:flex; gap:6px; flex-wrap:wrap; }
.row-actions button { padding:6px 9px; font-size:0.8125rem; border-color:#cfdfeb; background:#fff; }
.row-actions .approve { color:white; background:#087dc4; border-color:#087dc4; }
.row-actions .approve:hover:not(:disabled) { color:white; background:#08649b; border-color:#08649b; }
.row-actions .reject { color:#ae3d4f; background:#fff8fa; border-color:#efd7df; }
.row-actions .save { color:#866a2e; border-color:#dccaa7; }
.row-error { color:var(--red); font-size:0.75rem; margin-top:7px; }
.pagination { padding:15px 21px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px; font-size:0.8125rem; background:#f0f8fe; }
.pagination>span { margin-right:auto; color:#64788e; }
.pagination label { flex-direction:row; align-items:center; margin-right:10px; font-size:0.8125rem; font-weight:400; }
.pagination select { width:64px; padding:6px; font-size:0.8125rem; }
.pagination button { padding:6px 10px; font-size:0.8125rem; }
.workspace-footer { display:flex; justify-content:space-between; gap:20px; margin-top:20px; color:#64788e; font-size:0.75rem; }
.empty-state { text-align:center; padding:45px 15px; color:#64788e; }
.empty-state h2 { font-size:1.25rem; margin:9px; color:#18324d; }
.empty-icon { font-size:2rem; }
.load-error { padding:12px 21px; color:var(--red); background:#fff3ef; }
.error { color:var(--red); font-size:0.875rem; margin-top:12px; }
.toast { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); background:#183e60; color:white; box-shadow:0 6px 25px #16365330; padding:13px 22px; border-radius:9px; z-index:10; max-width:90vw; }
dialog { color:var(--ink); background:linear-gradient(#e4f4ff 0 82px,white 82px); border:1px solid #b3d8ef; box-shadow:0 30px 90px #153c6233; padding:25px; border-radius:18px; }
dialog::backdrop { background:#17334f66; backdrop-filter:blur(2px); }
.action-dialog { width:min(510px,94vw); max-height:90vh; }
.dialog-heading { display:flex; justify-content:space-between; align-items:start; gap:10px; margin-bottom:15px; }
.icon-button { padding:0 5px; font-size:1.75rem; line-height:1; color:#64788e; }
.dialog-footer { display:flex; justify-content:end; gap:9px; margin-top:24px; }
.reason-options p { margin:14px 0 9px; }
.reason-chips { display:flex; flex-wrap:wrap; gap:7px; }
.reason-chips label { display:block; cursor:pointer; }
.reason-chips input { position:absolute; opacity:0; width:1px; }
.reason-chips span { display:block; border:1px solid #dce8f1; padding:7px 11px; border-radius:20px; background:#f8fbfe; }
.reason-chips input:checked+span { border-color:var(--blue); background:#eaf6ff; color:var(--blue); }
.reason-chips input:focus-visible+span { outline:2px solid var(--blue); }
#new-source-fields { display:grid; gap:13px; }
.detail-dialog { position:fixed; margin:0 0 0 auto; height:100dvh; max-height:100dvh; width:min(570px,95vw); border-radius:14px 0 0 14px; padding:30px; border-right:0; }
.detail-dialog h2 { overflow-wrap:anywhere; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:24px 0; }
.detail-grid dt { color:#64788e; font-size:0.8125rem; }
.detail-grid dd { margin:3px 0 0; font-size:0.9375rem; overflow-wrap:anywhere; }
.detail-actions { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 26px; }
.section-label { font-size:0.875rem; text-transform:uppercase; letter-spacing:1px; border-top:1px solid var(--line); padding-top:20px; margin:18px 0 12px; }
.history-event { border-left:2px solid #c9e2f3; padding:0 0 20px 15px; font-size:0.875rem; }
.history-event small { display:block; color:#64788e; margin:3px 0 8px; }
.history-change { margin:4px 0; color:#536c83; font-size:0.8125rem; overflow-wrap:anywhere; }
.card-controls { display:flex; gap:7px; }
.card-controls select,.card-controls button { font-size:0.8125rem; padding:6px; }
.login-page { min-height:100dvh; display:grid; place-items:center; background:#d8efff; padding:32px 20px; }
.login-layout { display:grid; grid-template-columns:1fr 1fr; width:min(940px,100%); background:white; border:1px solid #a8d5f1; border-radius:26px; overflow:hidden; box-shadow:0 24px 70px #27639420; }
.login-intro { padding:44px; background:#b9e4fc; }
.login-intro .brand-mark { background:#0876b7; margin-bottom:44px; }
.login-intro h1 { font-size:2.65rem; line-height:1.15; font-weight:750; }
.login-intro h1 span { color:#076ba6; }
.login-intro>p:last-of-type { color:#315d7c; margin-top:20px; }
.login-steps { list-style:none; padding:0; margin:36px 0 0; display:grid; gap:16px; color:#244f6f; font-size:.9375rem; }
.login-steps li { display:flex; align-items:center; gap:12px; }
.login-steps span { display:grid; place-items:center; width:32px; height:32px; border:1px solid #86c8ee; border-radius:9px; background:#d8f1ff; color:#176994; font-size:.75rem; font-weight:700; }
.login-card { align-self:center; min-width:0; padding:44px; }
.login-card h2 { font-size:1.9rem; font-weight:700; margin:0 0 10px; }
.login-card form { display:grid; gap:16px; margin-top:25px; }
.login-card form .error { margin:0; }
.wide { width:100%; }
.login-note { font-size:0.8125rem; color:#64788e; margin:19px 0; }
@media(min-width:1500px) { .workspace { padding-left:48px; padding-right:48px; } td { padding-top:18px; padding-bottom:18px; } }
@media(max-width:1000px) { .topbar { padding:0 20px; } .brand>.muted,.brand-divider { display:none; } .workspace { padding:17px 20px; } .metrics article { padding:16px; } .metrics-note,.workspace-footer { flex-direction:column; gap:5px; } .hero-symbol { display:none; } .page-heading h1 br { display:block; } .login-intro,.login-card { padding:32px; } .metric-icon { width:28px; height:28px; } }
@media(max-width:650px) { .account>span:not(.avatar) { display:none; } .workspace { padding:12px; } .page-heading { align-items:start; } h1 { font-size:1.75rem; } .page-heading .primary { white-space:nowrap; padding:8px; font-size:0.875rem; } .metrics { grid-template-columns:1fr 1fr; } .metrics article:nth-child(-n+2) { border-bottom:1px solid var(--line); } .metrics strong { font-size:1.8125rem; } .filters { padding:15px; } .filters>label { flex:1; } .environment { font-size:0.75rem; } .panel-heading { padding:0 15px; } .pagination { padding:12px; } .pagination label { display:none; } }
fieldset { border:0; padding:0; margin:0; }
.domain-name { display:block; }
.badge.deferred { background:#fff1cf; color:#815719; }
.retry-explanation { background:#fff6e4; color:#775423; border-radius:8px; padding:12px; margin:12px 0; }
.create-mode { display:flex; gap:8px; margin:16px 0; }
.create-mode [aria-pressed=true] { color:var(--blue); background:var(--pale); border-color:var(--blue); }
.csv-dialog { width:min(760px,94vw); }
#csv-fields { display:grid; gap:14px; }
#csv-fields p { margin:0; }
#csv-fields>button { justify-self:start; }
.csv-summary { padding:12px 0; font-weight:600; }
.csv-results { max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:8px; }
.csv-result { display:grid; gap:4px; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.875rem; overflow-wrap:anywhere; }
.csv-result:last-child { border-bottom:0; }
.csv-result span { color:#536c83; }
h1 span { color:var(--blue); }
.primary { box-shadow:0 3px 8px #087abf20; }
.row-actions button:hover:not(:disabled) { border-color:#85bde0; background:var(--pale); }
.icon-button:hover { background:var(--pale); }
.metrics strong,.number-input { font-variant-numeric:tabular-nums; }
.detail-grid { padding:18px; background:#f3f8fc; border:1px solid var(--line); border-radius:12px; }
.cell-input:disabled { color:#536c83; background:#f4f7fa; }
@media(max-width:650px) {
  .environment { flex-wrap:wrap; gap:7px; }
  .environment>span:last-child { flex-basis:100%; max-width:none; }
  .page-heading { padding:24px; flex-direction:column; gap:18px; }
  .workspace-hero .environment { padding:12px 24px; }
  .workspace-hero { border-radius:18px; }
  .metrics { gap:10px; }
  .metric-heading { align-items:start; }
  .metric-icon { width:24px; height:24px; font-size:1.1rem; border-radius:7px; }
  .metric-label { font-size:.8125rem; }
  .panel-heading { padding:12px; flex-wrap:wrap; }
  .tab { padding:9px 13px; }
  .pagination { flex-wrap:wrap; }
  .pagination>span { flex-basis:100%; }
  .login-layout { grid-template-columns:1fr; max-width:490px; }
  .login-intro,.login-card { padding:28px; }
  .login-intro .brand-mark { width:44px; height:44px; font-size:1.75rem; margin-bottom:22px; }
  .login-intro h1 { font-size:2rem; }
  .login-steps { display:none; }
  .detail-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }
.review-priority { display:table; margin:8px 0; color:#075b91; background:#d4edff; border:1px solid #8fcdf5; }
.row-actions .priority-toggle { color:#075b91; }
.priority-choice { display:flex; align-items:center; gap:10px; }
.priority-choice input { width:auto; }
.source-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.source-tag { padding:3px 7px; font-size:.75rem; color:#245b80; background:#e0f1fd; border:1px solid #b9dff7; border-radius:12px; }
.source-tag.portal,.source-tag.possible_portal { background:#fff1d3; border-color:#eed095; color:#795519; }
.source-tags .tag-edit { padding:1px 9px; border-radius:12px; font-size:1rem; }
.badge.awaiting_approval { background:#eee9ff; color:#63418c; white-space:normal; }
.tag-options { display:grid; gap:12px; margin:20px 0; }
.tag-options legend { margin-bottom:14px; font-weight:650; }
.tag-choice { display:flex; flex-direction:row; align-items:start; gap:10px; line-height:1.45; }
.tag-choice input { flex:none; width:18px; height:18px; margin-top:3px; accent-color:var(--blue); }
.dialog-footer { flex-wrap:wrap; }
