:root {
  --ink: #17233a;
  --muted: #64748b;
  --line: #dbe7f0;
  --brand: #0ea5e9;
  --brand-dark: #2563eb;
  --danger: #dc2626;
  --surface: rgba(255,255,255,.88);
  --shadow: 0 18px 55px rgba(30,64,104,.12);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background:
    radial-gradient(900px 540px at 90% -10%, #b7eaff 0, transparent 62%),
    radial-gradient(720px 520px at -12% 40%, #d9fff3 0, transparent 62%),
    linear-gradient(180deg, #f7fbff, #edf5fb 72%, #f8fafc);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.site-nav {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 19px; font-weight: 800; }
.brand::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #34d399); box-shadow: 0 0 16px #38bdf8; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.nav-link { padding: 9px 13px; border: 1px solid #fff; border-radius: 11px; background: rgba(255,255,255,.68); color: #32637e; text-decoration: none; font-size: 14px; font-weight: 700; }
.hero { padding: 56px 0 34px; max-width: 780px; }
.eyebrow { margin: 0 0 12px; color: #0284c7; font-size: 13px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(42px, 7vw, 72px); line-height: 1; letter-spacing: -2.5px; }
.hero p:not(.eyebrow) { margin: 20px 0 0; max-width: 720px; color: var(--muted); font-size: 18px; line-height: 1.75; }
.account-strip { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: #ecfeff; color: #0e7490; font-size: 13px; font-weight: 750; }
.layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 24px; align-items: start; padding-bottom: 86px; }
.layout.single { grid-template-columns: 1fr; }
.card { background: var(--surface); border: 1px solid #fff; border-radius: 24px; padding: 28px; box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.card h2 { margin: 0 0 8px; font-size: 25px; }
.card-intro { margin: 0 0 24px; color: var(--muted); line-height: 1.65; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label, fieldset { display: grid; gap: 8px; color: #334155; font-size: 14px; font-weight: 750; }
label.full, fieldset.full { grid-column: 1 / -1; }
input, select, textarea {
  width: 100%;
  border: 1px solid #cfdde8;
  border-radius: 13px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(14,165,233,.12); }
textarea { min-height: 190px; resize: vertical; line-height: 1.65; }
.field-hint { color: #7a8da0; font-size: 12px; font-weight: 500; line-height: 1.55; }
.attachment-picker { border: 1px dashed #9fc4d9; border-radius: 15px; padding: 16px; background: rgba(240,249,255,.72); }
.attachment-picker input { padding: 0; border: 0; border-radius: 0; background: transparent; }
.file-summary { margin-top: 10px; color: #597487; font-size: 13px; font-weight: 650; }
.file-list { display: grid; gap: 8px; margin-top: 12px; }
.file-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 11px; background: white; border: 1px solid var(--line); }
.file-item span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.file-item button { border: 0; background: transparent; color: var(--danger); cursor: pointer; font-weight: 750; }
.form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.primary-button, .secondary-button {
  min-height: 46px;
  border: 0;
  border-radius: 13px;
  padding: 0 20px;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.primary-button { color: white; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: 0 11px 26px rgba(37,99,235,.22); }
.secondary-button { color: #225976; background: #eaf5fb; border: 1px solid #d4e8f3; }
.primary-button:disabled { opacity: .55; cursor: wait; box-shadow: none; }
.form-message { min-height: 22px; margin: 16px 0 0; color: var(--danger); font-size: 14px; line-height: 1.55; }
.form-message.success { color: #047857; }
.history-head, .admin-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.history-count { padding: 5px 9px; border-radius: 999px; background: #edf6fb; color: #4b6c81; font-size: 12px; font-weight: 800; }
.report-list { display: grid; gap: 13px; }
.empty-state { margin: 0; padding: 24px; border-radius: 15px; text-align: center; color: #7890a3; background: #f5f9fc; line-height: 1.6; }
.report-item { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: rgba(255,255,255,.76); }
.report-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.report-item h3 { margin: 3px 0 0; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.report-id { color: #70869a; font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.report-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 10px; color: #6b8194; font-size: 12px; }
.status { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 850; }
.status-pending { background: #fff7db; color: #95630b; }
.status-in_progress { background: #e0f2fe; color: #0369a1; }
.status-resolved { background: #dcfce7; color: #047857; }
.status-closed { background: #edf1f5; color: #526274; }
.report-item details { margin-top: 12px; }
.report-item summary { cursor: pointer; color: #176b95; font-size: 13px; font-weight: 750; }
.report-content { white-space: pre-wrap; overflow-wrap: anywhere; color: #536b7e; font-size: 14px; line-height: 1.65; }
.attachment-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.attachment-links a { padding: 7px 10px; border-radius: 9px; background: #edf7fc; color: #0b6e98; text-decoration: none; font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.filters { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 12px; align-items: end; }
.filters label { gap: 5px; }
.admin-report { display: grid; gap: 14px; }
.owner-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; background: #f4f9fc; border-radius: 12px; color: #526b7f; font-size: 13px; }
.owner-info b { display: block; margin-bottom: 3px; color: #2f485b; font-size: 11px; text-transform: uppercase; }
.status-control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-control select { width: auto; min-width: 130px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.pagination button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: white; color: #315b73; cursor: pointer; font-weight: 750; }
.pagination button:disabled { opacity: .45; cursor: default; }
.footer { padding: 28px 0 46px; border-top: 1px solid #dce7ef; display: flex; justify-content: space-between; gap: 18px; color: #728396; font-size: 13px; }
.footer a { color: inherit; }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr 1fr; }
  .owner-info { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 26px, 1120px); }
  .site-nav { align-items: flex-start; padding: 16px 0; }
  .nav-actions { gap: 6px; }
  .nav-link { padding: 8px 10px; }
  .hero { padding-top: 34px; }
  .hero h1 { font-size: 44px; letter-spacing: -1.5px; }
  .hero p:not(.eyebrow) { font-size: 16px; }
  .card { padding: 20px; border-radius: 19px; }
  .form-grid, .filters { grid-template-columns: 1fr; }
  .primary-button, .secondary-button { width: 100%; }
  .report-item-head, .history-head, .admin-toolbar { align-items: flex-start; flex-direction: column; }
  .footer { flex-direction: column; }
}

/* The forms retain their IDs, states and controls; only portal styling changes. */
body.report-site { --ink:var(--site-ink,#101b35); --muted:var(--site-muted,#5f6d86); --line:var(--site-line,#dce3f0); --brand:var(--site-blue,#315efb); --brand-dark:#254edb; --surface:#fff; --shadow:0 8px 28px -16px #20357924; }
.report-site .wrap { width:min(1180px,calc(100% - 56px)); }
.report-site .hero { padding:54px 0 34px; max-width:800px; }
.report-site .hero h1 { color:var(--ink); font-size:clamp(32px,4.5vw,54px); line-height:1.2; letter-spacing:-.045em; }
.report-site .hero p:not(.eyebrow) { font-size:16px; line-height:1.85; }
.report-site .eyebrow { color:var(--brand); font-size:12px; letter-spacing:.13em; }
.report-site .account-strip { color:#3156a9; background:var(--site-soft,#edf2ff); border:1px solid #d7e2fc; border-radius:12px; overflow-wrap:anywhere; }
.report-site .card { border-color:var(--line); border-radius:20px; background:#fff; backdrop-filter:none; min-width:0; }
.report-site .card h2 { font-size:24px; letter-spacing:-.025em; }
.report-site .card-intro { font-size:14px; }
.report-site .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.report-site label,.report-site fieldset { min-width:0; color:#344363; font-weight:650; }
.report-site input,.report-site select,.report-site textarea { min-width:0; background:#fff; border-color:var(--line); border-radius:12px; min-height:44px; }
.report-site input:focus,.report-site select:focus,.report-site textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px #315efb12; }
.report-site .field-hint { color:var(--muted); }
.report-site .attachment-picker { border-color:#bdcdef; background:#f8faff; border-radius:16px; }
.report-site .attachment-picker input { background:transparent; min-height:30px; }
.report-site .attachment-picker input::file-selector-button { padding:8px 12px; margin-right:10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--brand); font:inherit; cursor:pointer; }
.report-site .file-summary,.report-site .report-meta,.report-site .report-id,.report-site .report-content { color:var(--muted); }
.report-site .primary-button { background:var(--brand); box-shadow:none; border-radius:12px; font-weight:650; }
.report-site .primary-button:hover { background:var(--brand-dark); }
.report-site .secondary-button { color:var(--brand); background:var(--site-soft,#edf2ff); border-color:#d7e2fc; border-radius:12px; }
.report-site .history-count { color:#3156a9; background:var(--site-soft,#edf2ff); }
.report-site .empty-state { color:var(--muted); background:#f3f6fc; }
.report-site .report-item { border-color:var(--line); background:#fff; border-radius:16px; }
.report-site .report-item summary { color:var(--brand); min-height:36px; }
.report-site .report-content { font-size:15px; line-height:1.8; }
.report-site .attachment-links a { background:var(--site-soft,#edf2ff); color:#3156a9; }
.report-site .filters { grid-template-columns:repeat(3,minmax(0,1fr)) auto; }
.report-site .owner-info { background:#f3f6fc; color:var(--muted); overflow-wrap:anywhere; }
.report-site .owner-info b { color:#344363; }
.report-site .pagination { flex-wrap:wrap; }
.report-site .pagination button { min-height:44px; color:var(--brand); }
.report-site .footer { border-color:var(--line); color:var(--muted); line-height:1.8; }
@media(max-width:860px) { .report-site .filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:820px) { .report-site .wrap { width:calc(100% - 40px); } .report-site .hero { padding-top:36px; } }
@media(max-width:560px) { .report-site .wrap { width:calc(100% - 32px); } .report-site .form-grid,.report-site .filters { grid-template-columns:minmax(0,1fr); } .report-site .card { padding:20px; } .report-site .status-control { align-items:stretch; } .report-site .status-control select { width:100%; } }

/* Constrain long user content at its own surface, never at the page edge. */
.report-site .layout > *, .report-site .report-list, .report-site .report-item,
.report-site .report-item-head > *, .report-site .form-grid > *,
.report-site .owner-info > *, .report-site .file-list { min-width: 0; }
.report-site input, .report-site select, .report-site textarea { font-size: 16px; max-width: 100%; }
.report-site textarea { min-height: 190px; }
.report-site .attachment-picker { min-inline-size: 0; max-width: 100%; }
.report-site .attachment-picker input[type="file"] { min-height: 44px; max-width: 100%; }
.report-site .attachment-picker input::file-selector-button { min-height: 44px; font-size: 16px; }
.report-site .account-strip { max-width: 100%; flex-wrap: wrap; line-height: 1.65; }
.report-site .file-item { min-width: 0; gap: 8px; }
.report-site .file-item span { flex: 1 1 0; }
.report-site .file-item button { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 8px; }
.report-site .report-id, .report-site .report-meta > *,
.report-site .form-message, .report-site .file-summary, .report-site .field-hint { overflow-wrap: anywhere; }
.report-site .attachment-links { min-width: 0; }
.report-site .attachment-links a { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; min-height: 44px; line-height: 1.65; }
.report-site .report-item summary { min-height: 44px; padding-block: 8px; }
.report-site .primary-button, .report-site .secondary-button { max-width: 100%; min-height: 46px; padding-block: 10px; text-align: center; line-height: 1.6; }
.report-site .status-control > * { min-width: 0; max-width: 100%; }
.report-site .pagination { gap: 8px 12px; }
@media (max-width: 900px) {
  .report-site .layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .report-site .card { padding: 20px 16px; }
  .report-site .attachment-picker { padding: 14px 12px; }
  .report-site .report-item { padding: 14px 12px; }
  .report-site .account-strip { border-radius: 12px; }
  .report-site .file-item { padding: 8px; }
  .report-site .status-control select { min-height: 46px; }
}