:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1A1612; background: #F4EFE6; font-synthesis: none; }
:root[data-theme="dark"] { color-scheme: dark; color: #F4EFE6; background: #1A1612; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.login-frame { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 0%, #EDE7FA 0%, #F4EFE6 58%); }
.login-card { width: min(100%, 430px); padding: 34px; background: #fff; border: 1px solid #e7e3eb; border-radius: 24px; box-shadow: 0 24px 80px #281b3914; }
.login-card > img { display: block; width: 220px; height: 56px; object-fit: contain; object-position: left center; margin-bottom: 22px; }
.eyebrow, .nav-heading, .field-title { margin: 0; color: #766d80; font-size: 11px; font-weight: 750; letter-spacing: .13em; }
h1, h2, p { margin-top: 0; }
.login-card h1 { margin-bottom: 8px; font-size: 30px; letter-spacing: -.04em; }
.muted { color: #77717d; line-height: 1.55; }
.login-form { display: grid; gap: 16px; margin-top: 25px; }
.login-form label, .decision-label { display: grid; gap: 8px; color: #393341; font-size: 13px; font-weight: 650; }
input, textarea, select { width: 100%; border: 1px solid #d9d3df; border-radius: 12px; background: #fff; color: #211d27; outline: none; }
input { min-height: 46px; padding: 0 13px; }
textarea { min-height: 72px; padding: 11px 12px; resize: vertical; font-weight: 450; }
select { min-height: 40px; padding: 0 34px 0 12px; }
input:focus, textarea:focus, select:focus { border-color: #7446c4; box-shadow: 0 0 0 3px #7446c426; }
.security-note { margin: 22px 0 0; padding-top: 17px; border-top: 1px solid #eeeaf1; color: #77717d; font-size: 12px; line-height: 1.55; }
.form-message { min-height: 18px; margin: 0; color: #9d2839; font-size: 13px; line-height: 1.45; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 29px 18px 20px; display: flex; flex-direction: column; background: #1A1612; color: #F4EFE6; }
.brand { display: block; width: 183px; height: 52px; object-fit: contain; object-position: left center; margin: 0 8px 43px; }
.nav-heading { padding: 0 11px; margin-bottom: 12px; color: #aba2b7; }
.nav-item { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; text-align: left; color: #e5e0ec; font-size: 14px; font-weight: 650; }
.nav-item.active { background: #342641; color: #d3b8ff; }
.nav-mark { width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 3px; }
.sidebar-bottom { margin-top: auto; padding: 14px 10px; color: #a69daf; font-size: 11px; }
.main { min-width: 0; }
.topbar { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(20px, 4vw, 58px); border-bottom: 1px solid #eae7ed; background: #fff; }
.topbar h1 { margin: 7px 0 0; font-size: 28px; letter-spacing: -.04em; }
.staff { display: flex; align-items: center; gap: 9px; color: #4e4856; font-size: 13px; }
.staff-dot { width: 8px; height: 8px; border-radius: 50%; background: #43a180; }
.workspace { width: min(100%, 1050px); padding: 28px clamp(18px, 4vw, 58px) 64px; }
.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.filter-label { width: min(240px, 60%); display: grid; gap: 8px; color: #6c6573; font-size: 12px; font-weight: 700; }
.result-count { padding-bottom: 11px; color: #79727e; font-size: 12px; }
.report-list { display: grid; gap: 14px; }
.report-card { padding: 19px 20px; border: 1px solid #e4dfe8; border-radius: 18px; background: #fff; box-shadow: 0 3px 12px #20132c08; }
.report-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.report-top h2 { margin: 7px 0 0; font-size: 18px; letter-spacing: -.02em; }
.case-type { color: #6134aa; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.case-type.appeal { color: #a35d1d; }
.state { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #f0edf2; color: #62596b; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.state.open { background: #fff2d9; color: #85570b; }
.state.reviewing { background: #eee6fb; color: #5e36a1; }
.state.resolved { background: #e7f4ee; color: #286c4d; }
.state.dismissed { background: #f0edf2; color: #62596b; }
.report-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; color: #77717d; font-size: 12px; }
.field-title { margin: 17px 0 5px; font-size: 10px; }
.report-note, .resolution-note { margin: 0; color: #393341; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.evidence-text { max-height: 260px; overflow: auto; margin: 0; padding: 12px 13px; border: 1px solid #ebe7ef; border-radius: 12px; background: #faf9fb; color: #38323f; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.evidence-meta { margin: 8px 0 0; color: #77717d; font-size: 12px; line-height: 1.5; }
.resolution-note { color: #62596b; }
.parent-case { margin: 13px 0 0; font-size: 12px; }
.outcome { margin: 15px 0 0; color: #62596b; font-size: 12px; font-weight: 700; }
.case-actions { display: grid; gap: 13px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #efedf1; }
.decision-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px; font-size: 13px; font-weight: 700; transition: background .15s ease, transform .15s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: .6; }
.button.primary { background: #5122b7; color: white; }
.button.secondary { border-color: #ded7e7; background: #fff; color: #42364f; }
.button.danger { background: #a93346; color: #fff; }
.button.quiet { border-color: #e5e0e9; background: #f8f7f9; color: #5d5664; }
.button.small { min-height: 40px; padding: 0 13px; }
.load-more { width: 100%; margin-top: 20px; }
.empty-state { padding: 42px 20px; border: 1px dashed #d8d2de; border-radius: 18px; color: #77717d; text-align: center; }
.global-message { margin-bottom: 8px; }
.moderation-filters { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); align-items: end; gap: 12px; margin-bottom: 18px; padding: 17px; border: 1px solid #e4dfe8; border-radius: 16px; background: #fff; }
.moderation-field { display: grid; gap: 7px; color: #6c6573; font-size: 11px; font-weight: 700; }
.moderation-filters .button { width: fit-content; }
.moderation-card .button { margin-top: 15px; }
.moderation-filters input { min-height: 40px; }
.media-gallery { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.media-thumb { width: 48px; height: 48px; overflow: hidden; padding: 0; border: 1px solid #ded7e7; border-radius: 50%; background: #f4efe6; }
.media-thumb:focus-visible { outline: 3px solid #7446c4; outline-offset: 2px; }
.media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-viewer[hidden] { display: none; }
.media-viewer { position: fixed; width: fit-content; max-width: 94vw; max-height: 94vh; padding: 48px 14px 14px; overflow: visible; border: 1px solid rgba(244,239,230,.24); border-radius: 16px; background: #1A1612; box-shadow: 0 24px 80px #0009; }
.media-viewer::backdrop { background: rgba(15,12,10,.82); }
.media-viewer-image { display: block; max-width: min(90vw, 1200px); max-height: 84vh; object-fit: contain; border-radius: 8px; }
.media-viewer-close { position: absolute; top: 8px; right: 8px; background: #302A22 !important; color: #F4EFE6 !important; }
.details-toggle { margin-top: 14px; }
.detail-panel { display: grid; gap: 12px; margin-top: 15px; padding: 16px; border: 1px solid #D8CEBF; border-radius: 14px; background: #F4EFE6; }
.detail-panel[hidden] { display: none; }
.detail-screen-header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.detail-back { flex: 0 0 auto; }
.detail-screen-heading h2 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.03em; }
.detail-screen-panel { display: grid; gap: 14px; padding: 20px; border: 1px solid #e4dfe8; border-radius: 18px; background: #fff; }
.shop-facts { display: grid; grid-template-columns: minmax(120px, .35fr) 1fr; gap: 9px 16px; margin: 0; font-size: 13px; line-height: 1.5; }
.shop-facts dt { color: #77717d; font-weight: 700; }
.shop-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.shop-facts a { color: #6134aa; }
.detail-summary { margin: 0; padding: 12px; border-radius: 10px; background: #EDE7DD; color: #1A1612; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.detail-group h3 { margin: 0 0 8px; color: #756B60; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.detail-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.detail-row { padding: 10px 12px; border: 1px solid #E5DED3; border-radius: 10px; background: #fff; color: #373027; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 920px) { .moderation-filters { grid-template-columns: repeat(2, minmax(135px, 1fr)); } }
@media (max-width: 760px) { .shell { grid-template-columns: 1fr; } .sidebar { position: relative; height: auto; padding: 11px 15px; flex-direction: row; align-items: center; gap: 14px; } .brand { width: 145px; height: 38px; margin: 0 6px 0 0; } .nav-heading, .sidebar-bottom { display: none; } .nav-item { min-height: 40px; } .main { min-height: calc(100vh - 60px); } .topbar { min-height: 90px; padding: 16px 20px; } .workspace { padding: 20px 16px 42px; } .staff { flex-wrap: wrap; justify-content: end; max-width: 165px; } .report-card { padding: 16px; } }
@media (max-width: 430px) { .login-card { padding: 25px 20px; } .topbar h1 { font-size: 24px; } .report-top h2 { font-size: 16px; } .decision-buttons { display: grid; grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

:root[data-theme="dark"] body { background: #1A1612; color: #F4EFE6; }
:root[data-theme="dark"] .login-frame { background: radial-gradient(ellipse at 50% 0%, #302A22 0%, #1A1612 58%); }
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .report-card,
:root[data-theme="dark"] .moderation-filters { background: #252019; border-color: rgba(244,239,230,0.18); color: #F4EFE6; }
:root[data-theme="dark"] .detail-panel { background: #1A1612; border-color: rgba(244,239,230,0.18); }
:root[data-theme="dark"] .detail-screen-panel { background: #252019; border-color: rgba(244,239,230,0.18); }
:root[data-theme="dark"] .shop-facts dt { color: #BEB2A3; }
:root[data-theme="dark"] .shop-facts a { color: #C4B5FD; }
:root[data-theme="dark"] .detail-summary { background: #302A22; color: #F4EFE6; }
:root[data-theme="dark"] .detail-row { background: #252019; border-color: rgba(244,239,230,0.18); color: #F4EFE6; }
:root[data-theme="dark"] .topbar { border-bottom-color: rgba(244,239,230,0.18); }
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .result-count,
:root[data-theme="dark"] .report-meta,
:root[data-theme="dark"] .evidence-meta,
:root[data-theme="dark"] .moderation-field,
:root[data-theme="dark"] .filter-label,
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .field-title,
:root[data-theme="dark"] .detail-group h3,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .result-count,
:root[data-theme="dark"] .report-meta,
:root[data-theme="dark"] .evidence-meta,
:root[data-theme="dark"] .moderation-field,
:root[data-theme="dark"] .filter-label { color: #BEB2A3; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select { background: #252019; border-color: rgba(244,239,230,0.18); color: #F4EFE6; }
:root[data-theme="dark"] .login-form label,
:root[data-theme="dark"] .decision-label,
:root[data-theme="dark"] .staff { color: #e4deeb; }
:root[data-theme="dark"] .security-note,
:root[data-theme="dark"] .case-actions { border-color: #39313f; color: #aaa0b4; }
:root[data-theme="dark"] .report-note,
:root[data-theme="dark"] .resolution-note,
:root[data-theme="dark"] .outcome { color: #e4deeb; }
:root[data-theme="dark"] .evidence-text { background: #252019; border-color: rgba(244,239,230,0.18); color: #F4EFE6; }
:root[data-theme="dark"] .button.secondary,
:root[data-theme="dark"] .button.quiet { background: #302A22; border-color: rgba(244,239,230,0.18); color: #F4EFE6; }
:root[data-theme="dark"] .button.primary { background: #C4B5FD; color: #1A1612; }
:root[data-theme="dark"] .nav-item.active { background: #302341; color: #C4B5FD; }
:root[data-theme="dark"] .empty-state { border-color: #453b4d; color: #aaa0b4; }
:root[data-theme="dark"] .media-thumb { border-color: rgba(244,239,230,.22); background: #252019; }
:root[data-theme="dark"] .state { background: #302A22; color: #BEB2A3; }
:root[data-theme="dark"] .state.open { background: #44351e; color: #f0ca7a; }
:root[data-theme="dark"] .state.reviewing { background: #302341; color: #C4B5FD; }
:root[data-theme="dark"] .state.resolved { background: #203c31; color: #a6dfc1; }

/* Platform action dialogs share the console's violet, ivory and charcoal palette. */
.action-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px; border: 1px solid #ded7e7; border-radius: 20px; color: #1a1612; background: #fff; box-shadow: 0 24px 80px #1a161240; }
.action-dialog::backdrop { background: #17111dcc; backdrop-filter: blur(4px); }
.action-dialog-form { display: grid; gap: 16px; }
.action-dialog h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.action-dialog .muted { margin: 0; font-size: 14px; }
.action-dialog .form-message:empty { display: none; }
.action-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.action-dialog :focus-visible { outline: 3px solid #7446c4; outline-offset: 3px; }
textarea[aria-invalid="true"] { border-color: #a93346; }
:root[data-theme="dark"] .action-dialog { background: #252019; border-color: #514637; color: #f4efe6; }
@media (max-width: 430px) { .action-dialog { padding: 22px 18px; } .action-dialog-actions .button { flex: 1; } }
.moderation-action-error, #moderation-message:not(:empty) { display: grid; justify-items: start; gap: 10px; padding: 14px 16px; border: 1px solid #a9334640; border-radius: 12px; background: #a9334609; }
.error-reference { font-size: 11px; color: #77717d; }
:root[data-theme="dark"] #moderation-message:not(:empty) { color: #ffb8c3; background: #a9334618; }
:root[data-theme="dark"] .error-reference { color: #beb2a3; }

/* Shared Loop background: quiet violet light and infinity contours. */
:root { --loop-glow: #c8aaf58f; --loop-glow-soft: #edcada66; --loop-base: #f4efe6; --loop-contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300'%3E%3Cpath d='M300 150C380 10 560 10 560 150S380 290 300 150C220 10 40 10 40 150S220 290 300 150Z' fill='none' stroke='%235122b7' stroke-opacity='.05' stroke-width='2'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] { --loop-glow: #7650b26b; --loop-glow-soft: #65375552; --loop-base: #1a1612; --loop-contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300'%3E%3Cpath d='M300 150C380 10 560 10 560 150S380 290 300 150C220 10 40 10 40 150S220 290 300 150Z' fill='none' stroke='%23c4b5fd' stroke-opacity='.06' stroke-width='2'/%3E%3C/svg%3E"); }
body, :root[data-theme="dark"] body { background: var(--loop-base); }
.main, .login-frame, :root[data-theme="dark"] .login-frame { background-color: var(--loop-base); background-image: var(--loop-contour), radial-gradient(ellipse at 100% 0%, var(--loop-glow), transparent 60%), radial-gradient(ellipse at 0% 90%, var(--loop-glow-soft), transparent 65%); background-repeat: no-repeat; background-size: 660px 330px, 100% 650px, 100% 100%; background-position: right -220px top -50px, top right, bottom left; }
.login-frame, :root[data-theme="dark"] .login-frame { background-size: 1000px 500px, 100% 100%, 100% 100%; background-position: right -220px top -80px, top right, bottom left; }
.login-card { position: relative; box-shadow: 0 24px 80px #5122b715; }
.topbar, :root[data-theme="dark"] .topbar { background: transparent; }
.sidebar { background-image: radial-gradient(ellipse at 0% 0%, #5122b72b, transparent 65%); }

/* Inherit one canvas across queues, detail screens, empty/error states and dialogs. */
.shell { background-color: var(--loop-base); }
.main { min-height: 100vh; background-size: 660px 330px, 100% 650px, 100% 100%; }
.workspace { min-height: calc(100vh - 112px); }
.action-dialog, :root[data-theme="dark"] .action-dialog,
.detail-screen-panel, :root[data-theme="dark"] .detail-screen-panel {
  background-image: radial-gradient(ellipse at 100% 0%, var(--loop-glow-soft), transparent 60%);
}
.media-viewer { background-image: radial-gradient(ellipse at 100% 0%, #7650b22b, transparent 65%); }
.empty-state { background: color-mix(in srgb, var(--loop-base) 85%, transparent); }
@media (max-width: 760px) { .workspace { min-height: calc(100vh - 150px); } }