:root {
  --ink: #17202a;
  --muted: #68737d;
  --subtle: #8a949d;
  --navy: #193a52;
  --navy-2: #244f6d;
  --navy-3: #eaf0f3;
  --green: #25856d;
  --green-soft: #e7f4f0;
  --amber: #b67a1b;
  --amber-soft: #fff4df;
  --red: #b94b50;
  --red-soft: #fbeaec;
  --blue: #35759e;
  --blue-soft: #e9f3f8;
  --surface: #ffffff;
  --surface-2: #f5f7f8;
  --surface-3: #eef2f4;
  --border: #dce2e6;
  --border-strong: #c7d0d6;
  --shadow: 0 14px 40px rgba(28, 45, 58, .08);
  --shadow-sm: 0 5px 18px rgba(28, 45, 58, .07);
  --radius: 16px;
  --radius-sm: 10px;
  --sidebar: 258px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--surface-2); }
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  background: var(--surface-2);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
a { color: var(--navy-2); text-decoration: none; }
a:hover { color: var(--navy); }
img { max-width: 100%; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar);
  padding: 22px 16px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 5%, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(175deg, #17374d 0%, #11293a 100%);
  overflow-y: auto;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 6px 28px;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 13px;
  background: rgba(255,255,255,.09);
  font-weight: 800;
  letter-spacing: -.04em;
}
.brand-name { font-size: 15px; font-weight: 800; letter-spacing: .03em; }
.brand-sub { color: rgba(255,255,255,.58); font-size: 11px; letter-spacing: .04em; }
.nav-label {
  margin: 20px 12px 7px;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav-list { display: grid; gap: 4px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 11px;
  color: rgba(255,255,255,.76);
  font-weight: 650;
  transition: .18s ease;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-link.active { color: #fff; background: rgba(255,255,255,.13); box-shadow: inset 3px 0 0 #8ad4c3; }
.nav-icon { width: 22px; text-align: center; opacity: .9; }
.sidebar-footer {
  margin: 26px 8px 8px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: rgba(255,255,255,.58);
  font-size: 11px;
  background: rgba(255,255,255,.04);
}

.main-shell { margin-left: var(--sidebar); min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px 30px;
  border-bottom: 1px solid rgba(205, 214, 220, .8);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
}
.topbar-title { min-width: 0; }
.topbar-title h1 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
.topbar-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--navy);
  font-size: 12px;
  font-weight: 800;
}
.user-meta strong { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.user-meta span { display: block; color: var(--muted); font-size: 10px; }
.mobile-menu { display: none; }

.page { width: min(1540px, 100%); margin: 0 auto; padding: 28px 30px 52px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.page-heading p { margin: 5px 0 0; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); }

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.card-header h3 { margin: 0; font-size: 15px; }
.card-header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.card-body { padding: 20px; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--border); background: #fbfcfc; border-radius: 0 0 var(--radius) var(--radius); }
.card-flat { box-shadow: none; }

.stat-card { position: relative; overflow: hidden; padding: 20px; }
.stat-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -38px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--navy-3);
}
.stat-label { position: relative; z-index: 1; color: var(--muted); font-size: 12px; font-weight: 700; }
.stat-value { position: relative; z-index: 1; margin: 7px 0 2px; font-size: 34px; font-weight: 780; letter-spacing: -.04em; }
.stat-foot { position: relative; z-index: 1; color: var(--subtle); font-size: 11px; }
.stat-accent-success::after { background: var(--green-soft); }
.stat-accent-warning::after { background: var(--amber-soft); }
.stat-accent-danger::after { background: var(--red-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 720;
  font-size: 13px;
  line-height: 1.2;
  transition: .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { color: #fff; background: var(--navy); border-color: var(--navy); }
.btn-primary:hover { color: #fff; background: #102f45; }
.btn-secondary { color: var(--navy); background: #fff; border-color: var(--border-strong); }
.btn-secondary:hover { color: var(--navy); background: var(--surface-2); }
.btn-success { color: #fff; background: var(--green); border-color: var(--green); }
.btn-danger { color: #fff; background: var(--red); border-color: var(--red); }
.btn-danger-ghost { color: var(--red); background: #fff; border-color: #edc9cc; }
.btn-ghost { color: var(--muted); background: transparent; border-color: transparent; }
.btn-sm { min-height: 32px; padding: 6px 10px; border-radius: 8px; font-size: 11.5px; }
.btn-lg { min-height: 46px; padding: 11px 18px; font-size: 14px; }
.btn-block { width: 100%; }
.icon-btn { width: 38px; padding: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 760;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.badge-success { color: #19705d; background: var(--green-soft); }
.badge-warning { color: #946016; background: var(--amber-soft); }
.badge-danger { color: #a43f45; background: var(--red-soft); }
.badge-info { color: #2d7199; background: var(--blue-soft); }
.badge-muted { color: #6f7981; background: #edf0f2; }
.badge-draft { color: #6f7981; background: #edf0f2; }

.alert { display: flex; gap: 12px; margin: 0 0 18px; padding: 13px 15px; border: 1px solid; border-radius: 12px; font-size: 13px; }
.alert-success { color: #176451; background: var(--green-soft); border-color: #bce0d7; }
.alert-error { color: #943a40; background: var(--red-soft); border-color: #efc8cb; }
.alert-warning { color: #80500c; background: var(--amber-soft); border-color: #ecd39d; }
.alert-info { color: #2b6689; background: var(--blue-soft); border-color: #c4dfe9; }
.alert ul { margin: 4px 0 0; padding-left: 18px; }

.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 18px; }
.col-12 { grid-column: span 12; }
.col-9 { grid-column: span 9; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.form-group { min-width: 0; }
.form-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #39434b; font-size: 12px; font-weight: 750; }
.form-label .optional { color: var(--subtle); font-size: 10px; font-weight: 500; }
.form-control, .form-select, .form-textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-textarea { min-height: 108px; resize: vertical; }
.form-control:focus, .form-select:focus, .form-textarea:focus { border-color: #6e9bb8; box-shadow: 0 0 0 3px rgba(53, 117, 158, .12); }
.form-hint { margin-top: 5px; color: var(--subtle); font-size: 10.5px; }
.checkbox-row, .radio-row { display: flex; align-items: center; gap: 8px; min-height: 38px; }
.checkbox-row input, .radio-row input { width: 17px; height: 17px; accent-color: var(--navy); }
.fieldset { margin: 0; padding: 0; border: 0; }
.fieldset + .fieldset { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.fieldset-title { margin: 0 0 16px; font-size: 15px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }

.tabs { display: flex; gap: 6px; margin-bottom: 18px; padding: 5px; border: 1px solid var(--border); border-radius: 13px; background: #eef2f4; overflow-x: auto; }
.tab-btn { min-width: max-content; padding: 8px 12px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 750; }
.tab-btn.active { color: var(--navy); background: #fff; box-shadow: 0 2px 9px rgba(28,45,58,.08); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.table th { padding: 11px 12px; border-bottom: 1px solid var(--border-strong); color: var(--muted); background: #f7f9fa; text-align: left; font-size: 10.5px; letter-spacing: .025em; text-transform: uppercase; }
.table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:hover td { background: #fbfcfc; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.table .center { text-align: center; }
.table-title { font-weight: 760; }
.table-sub { margin-top: 2px; color: var(--muted); font-size: 10.5px; }

.searchbar { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 13px; background: #fff; }
.searchbar .form-control, .searchbar .form-select { min-height: 38px; border: 0; background: transparent; box-shadow: none; }
.searchbar .form-control { flex: 1; }

.progress { width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: #e7ecef; }
.progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #57ad96); }
.progress-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--muted); font-size: 10.5px; }

.project-hero { position: relative; overflow: hidden; margin-bottom: 18px; padding: 23px 24px; color: #fff; background: linear-gradient(130deg, #193a52 0%, #265b76 100%); }
.project-hero::after { content: "PIF"; position: absolute; right: 28px; bottom: -32px; color: rgba(255,255,255,.07); font-size: 112px; font-weight: 900; letter-spacing: -.08em; }
.project-hero-content { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.project-hero h2 { margin: 0; font-size: 24px; }
.project-hero p { margin: 5px 0 0; color: rgba(255,255,255,.68); }
.project-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 17px; color: rgba(255,255,255,.78); font-size: 11.5px; }
.project-meta strong { color: #fff; }
.project-hero .btn-secondary { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.08); }
.project-hero .btn-secondary:hover { background: rgba(255,255,255,.16); }

.pif-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 18px; align-items: start; }
.section-nav { position: sticky; top: 92px; max-height: calc(100vh - 118px); overflow-y: auto; }
.section-nav-list { display: grid; gap: 4px; padding: 8px; }
.section-nav-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border-radius: 10px; color: #46525c; }
.section-nav-item:hover { background: var(--surface-2); }
.section-nav-item.active { color: var(--navy); background: var(--navy-3); }
.section-num { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--muted); background: #edf1f3; font-size: 11px; font-weight: 800; }
.section-nav-item.active .section-num { color: #fff; background: var(--navy); }
.section-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 710; }
.section-count { color: var(--subtle); font-size: 10px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-dot.success { background: var(--green); }
.status-dot.warning { background: var(--amber); }
.status-dot.danger { background: var(--red); }
.status-dot.info { background: var(--blue); }
.status-dot.muted { background: #98a1a8; }

.section-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.section-intro h3 { margin: 0; font-size: 18px; }
.section-intro p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.upload-zone { padding: 17px; border: 1px dashed #a9bbc7; border-radius: 13px; background: #f7fafb; }
.file-list { display: grid; gap: 10px; }
.file-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.file-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--navy); background: var(--navy-3); font-size: 11px; font-weight: 850; }
.file-name { overflow-wrap: anywhere; font-size: 12px; font-weight: 730; }
.file-meta { margin-top: 3px; color: var(--muted); font-size: 10px; }
.file-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }

.kv-list { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-top: 1px solid var(--border); }
.kv-list > * { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.kv-key { color: var(--muted); background: #f7f9fa; font-size: 11px; font-weight: 720; }
.kv-value { white-space: pre-wrap; font-size: 12px; }

.timeline { display: grid; gap: 13px; }
.timeline-item { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; }
.timeline-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--navy-2); box-shadow: 0 0 0 4px var(--navy-3); }
.timeline-body { padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.timeline-body strong { font-size: 11.5px; }
.timeline-body p { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; }

.empty-state { padding: 36px 20px; text-align: center; }
.empty-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 17px; color: var(--navy); background: var(--navy-3); font-size: 22px; }
.empty-state h3 { margin: 0 0 5px; font-size: 15px; }
.empty-state p { max-width: 480px; margin: 0 auto 16px; color: var(--muted); font-size: 12px; }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); background: #f5f7f8; }
.auth-art { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 58px; color: #fff; background: linear-gradient(145deg, #102d41, #1f506d); }
.auth-art::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(circle, rgba(255,255,255,.11) 0 2px, transparent 3px); background-size: 28px 28px; transform: rotate(17deg); opacity: .34; }
.auth-art::after { content: "16"; position: absolute; top: 5%; right: 2%; color: rgba(255,255,255,.05); font-size: 360px; font-weight: 900; line-height: 1; }
.auth-copy { position: relative; z-index: 1; max-width: 620px; }
.auth-copy .eyebrow { color: #8dd4c4; font-size: 11px; font-weight: 850; letter-spacing: .15em; }
.auth-copy h1 { margin: 12px 0 14px; font-size: clamp(34px, 4vw, 60px); line-height: 1.12; letter-spacing: -.045em; }
.auth-copy p { max-width: 540px; color: rgba(255,255,255,.68); font-size: 15px; }
.auth-points { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.auth-point { padding: 7px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.05); font-size: 11px; }
.auth-panel { display: grid; place-items: center; padding: 36px; }
.auth-card { width: min(430px, 100%); padding: 34px; border: 1px solid var(--border); border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.auth-card h2 { margin: 0; font-size: 24px; }
.auth-card > p { margin: 6px 0 24px; color: var(--muted); }
.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth-logo .brand-mark { color: #fff; background: var(--navy); }
.auth-logo strong { display: block; }
.auth-logo span { color: var(--muted); font-size: 10px; }
.auth-footer { margin-top: 20px; color: var(--subtle); font-size: 10px; text-align: center; }

.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; padding: 20px; background: rgba(12, 26, 36, .52); backdrop-filter: blur(5px); }
.modal-backdrop.open { display: grid; }
.modal { width: min(640px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 18px; background: #fff; box-shadow: 0 28px 80px rgba(13,28,38,.26); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.modal-header h3 { margin: 0; }
.modal-body { padding: 20px; }

.code { padding: 2px 5px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; background: #eef2f4; }
.text-muted { color: var(--muted); }
.text-danger { color: var(--red); }
.text-success { color: var(--green); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.small { font-size: 11px; }
.nowrap { white-space: nowrap; }
.stack { display: grid; gap: 12px; }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.divider { height: 1px; margin: 18px 0; background: var(--border); }
.hidden { display: none !important; }

@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main { grid-template-columns: 1fr; }
  .pif-layout { grid-template-columns: 270px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --sidebar: 0px; }
  .sidebar { transform: translateX(-100%); width: 270px; transition: transform .2s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open::after { content: ""; position: fixed; inset: 0; z-index: 25; background: rgba(14, 27, 37, .4); }
  .main-shell { margin-left: 0; }
  .topbar { padding: 11px 18px; }
  .mobile-menu { display: inline-flex; }
  .page { padding: 22px 18px 42px; }
  .pif-layout { grid-template-columns: 1fr; }
  .section-nav { position: static; max-height: none; }
  .section-nav-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-page { grid-template-columns: 1fr; }
  .auth-art { display: none; }
}

@media (max-width: 680px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .page-heading, .project-hero-content { flex-direction: column; }
  .page-actions { justify-content: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > [class^="col-"] { grid-column: auto; }
  .topbar-title p, .user-meta { display: none; }
  .project-hero { padding: 20px; }
  .section-nav-list { grid-template-columns: 1fr; }
  .file-item { grid-template-columns: 40px minmax(0, 1fr); }
  .file-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .kv-list { grid-template-columns: 1fr; }
  .kv-key { padding-bottom: 4px; border-bottom: 0; }
  .kv-value { padding-top: 4px; }
  .auth-panel { padding: 18px; }
  .auth-card { padding: 24px; }
  .searchbar { align-items: stretch; flex-direction: column; }
}

.eyebrow-small { margin-bottom: 5px; color: var(--green); font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.document-text { min-height: 90px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; white-space: pre-wrap; background: #fbfcfc; font-size: 12.5px; line-height: 1.8; }
.ingredient-table tfoot td { padding: 12px; border-top: 1px solid var(--border-strong); background: #f7f9fa; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.permission-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; cursor: pointer; background: #fff; }
.permission-item:hover { border-color: #a9bbc7; background: #fbfcfc; }
.permission-item input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--navy); }
.permission-item strong { display: block; font-size: 12px; }
.permission-item small { display: block; margin-top: 2px; color: var(--subtle); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9.5px; }
.role-note { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.role-note:last-child { padding-bottom: 0; border-bottom: 0; }
.role-note strong { font-size: 12.5px; }
.role-note p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.danger-zone { border-color: #ecc8cb; box-shadow: none; }
.danger-zone h3 { color: var(--red); }
@media (max-width: 680px) { .permission-grid { grid-template-columns: 1fr; } }

/* v1.4 explicit-save and inline PIF editing */
.save-state { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:#f6f8f9; font-size:10.5px; font-weight:750; white-space:nowrap; }
.save-state::before { content:""; width:7px; height:7px; border-radius:50%; background:#9aa5ad; }
.save-state.is-saved { color:#24634f; border-color:#bddfd3; background:#edf8f4; }
.save-state.is-saved::before { background:var(--green); }
.save-state.is-dirty { color:#8a5a08; border-color:#efd69f; background:#fff8e8; }
.save-state.is-dirty::before { background:#d59417; box-shadow:0 0 0 3px rgba(213,148,23,.15); }
.sticky-save-actions { position:sticky; bottom:12px; z-index:12; margin:20px -4px -4px; padding:12px 14px; border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,.96); box-shadow:0 10px 30px rgba(19,44,60,.12); backdrop-filter:blur(10px); }
.sticky-save-actions .text-muted { margin-right:auto; }
.section-content-editor { min-height:230px; line-height:1.75; }
.structured-preview { padding:14px; border:1px solid var(--border); border-radius:13px; background:#fbfcfc; }
.structured-preview > h4 { margin:0 0 12px; color:var(--navy); font-size:13px; }
html { scroll-behavior:smooth; }
@media (max-width:680px) { .sticky-save-actions { position:static; align-items:stretch; } .sticky-save-actions .btn { width:100%; } .save-state { white-space:normal; } }

/* v1.5 full source-document preview */
.document-preview-backdrop { padding: 12px; }
.document-preview-modal { width: min(1240px, 98vw); height: min(920px, 96vh); max-height: 96vh; display: flex; flex-direction: column; overflow: hidden; }
.document-preview-modal .modal-header { flex: 0 0 auto; gap: 14px; }
.document-preview-body { position: relative; flex: 1 1 auto; min-height: 0; background: #e9eef1; }
.document-preview-body iframe { width: 100%; height: 100%; min-height: 600px; border: 0; display: block; background: #fff; }
.document-preview-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #53636e; font-weight: 700; background: linear-gradient(180deg,#f6f8f9,#edf2f4); }
.document-preview-body.is-loaded .document-preview-loading { display: none; }
.file-item .file-actions .btn-primary { white-space: nowrap; }
@media (max-width: 760px) {
  .document-preview-backdrop { padding: 0; }
  .document-preview-modal { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .document-preview-modal .modal-header { align-items: flex-start; padding: 14px; }
  .document-preview-modal .modal-header .inline { flex-wrap: nowrap; }
  .document-preview-body iframe { min-height: 0; }
}

/* v1.5 - the actual uploaded document is visible inside the chapter page. */
.file-inline-preview {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid #d6e0e5;
  border-radius: 13px;
  background: #e9eef1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.file-inline-preview-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 13px;
  border-bottom: 1px solid #d6e0e5;
  background: #f7f9fa;
  color: #5a6872;
  font-size: 12px;
}
.file-inline-preview-head strong { color: var(--navy); font-size: 13px; }
.file-inline-preview iframe {
  display: block;
  width: 100%;
  height: min(76vh, 820px);
  min-height: 620px;
  border: 0;
  background: #fff;
}

@media (max-width: 760px) {
  .file-inline-preview-head { display: block; line-height: 1.55; }
  .file-inline-preview-head span { display: block; margin-top: 2px; }
  .file-inline-preview iframe { height: 68vh; min-height: 470px; }
}

/* v1.7 A4 source preview and visible intelligence results */
.file-inline-preview {
  padding-bottom: 16px;
  background: #e5ebee;
}
.file-inline-preview-head { margin-bottom: 0; }
.file-inline-preview iframe {
  width: min(900px, calc(100% - 32px));
  height: auto;
  min-height: 0;
  aspect-ratio: 210 / 297;
  margin: 16px auto 0;
  border: 0;
  background: #fff;
  box-shadow: 0 10px 28px rgba(24, 48, 63, .16);
}
.document-preview-body { padding: 14px; overflow: auto; }
.document-preview-body iframe {
  width: min(960px, 100%);
  height: auto;
  min-height: 0;
  aspect-ratio: 210 / 297;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 10px 30px rgba(24, 48, 63, .14);
}

.intelligence-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
  gap: 24px;
  padding: 26px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 20%, rgba(128, 207, 188, .22), transparent 32%),
    linear-gradient(145deg, #173a52, #102b3d);
}
.intelligence-hero-copy h3 { margin: 4px 0 9px; font-size: 24px; letter-spacing: -.025em; }
.intelligence-hero-copy p { max-width: 780px; margin: 0; color: rgba(255,255,255,.72); }
.intelligence-hero .eyebrow-small { color: #8ad4c3; }
.intelligence-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-self: stretch; }
.intelligence-hero-stats div { display: grid; align-content: center; min-height: 108px; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.07); text-align: center; }
.intelligence-hero-stats strong { font-size: 27px; line-height: 1.1; }
.intelligence-hero-stats span { margin-top: 6px; color: rgba(255,255,255,.62); font-size: 10.5px; }
.intelligence-selector { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.intelligence-empty { padding: 54px 20px; }
.intelligence-report { overflow: hidden; }
.intelligence-report-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; border-bottom: 1px solid var(--border); background: #fbfcfc; }
.intelligence-report-head h3 { margin: 3px 0 4px; font-size: 20px; }
.intelligence-report-head p { margin: 0; color: var(--muted); font-size: 12px; }
.intelligence-score { flex: 0 0 auto; width: 112px; height: 112px; display: grid; place-items: center; border: 8px solid #dcebe6; border-radius: 50%; color: var(--green); background: #fff; box-shadow: inset 0 0 0 1px #c3ddd4; text-align: center; }
.intelligence-score strong { display: block; font-size: 31px; line-height: 1; }
.intelligence-score span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 750; }
.intelligence-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.intelligence-metrics-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.intelligence-metrics > div { padding: 15px; border: 1px solid var(--border); border-radius: 13px; background: #fff; }
.intelligence-metrics span { display: block; color: var(--muted); font-size: 10.5px; font-weight: 700; }
.intelligence-metrics strong { display: block; margin: 5px 0 2px; font-size: 22px; letter-spacing: -.03em; }
.intelligence-metrics small { display: block; color: var(--subtle); font-size: 9.5px; }
.intelligence-section-block { padding: 22px 24px; border-bottom: 1px solid var(--border); }
.intelligence-section-block:last-child { border-bottom: 0; }
.analysis-block-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.analysis-block-title h4 { margin: 0; font-size: 15px; }
.analysis-block-title p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; }
.intelligence-alerts { display: grid; gap: 9px; }
.intelligence-alert { padding: 11px 13px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; background: #fff; font-size: 12px; }
.intelligence-alert-warning { border-left-color: #d39218; background: #fffaf0; }
.intelligence-alert-info { border-left-color: #4386ad; background: #f2f8fb; }
.intelligence-alert-success { border-left-color: var(--green); background: #f1faf7; }
.intelligence-alert-danger { border-left-color: var(--red); background: #fff4f5; }
.intelligence-section-table th:nth-child(1) { width: 52px; }
.intelligence-section-table th:nth-child(3) { width: 120px; }
.intelligence-section-table th:nth-child(4), .intelligence-section-table th:nth-child(5) { width: 130px; }
.analysis-ok { color: #176a55; font-weight: 750; }
.analysis-muted { color: var(--subtle); }
.analysis-muted-box { padding: 13px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--muted); background: #f8fafb; font-size: 11.5px; line-height: 1.65; }
.intelligence-empty-inline { padding: 24px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--muted); background: #f8fafb; text-align: center; }
.ingredient-analysis-list { display: grid; gap: 10px; }
.ingredient-analysis-item { overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: #fff; }
.ingredient-analysis-item[open] { border-color: #b7cbd6; box-shadow: 0 8px 22px rgba(25,58,82,.07); }
.ingredient-analysis-item summary { display: grid; grid-template-columns: 42px minmax(0,1fr) auto 62px; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px; cursor: pointer; list-style: none; background: #fbfcfc; }
.ingredient-analysis-item summary::-webkit-details-marker { display: none; }
.ingredient-analysis-item summary::after { content: "+"; position: absolute; opacity: 0; }
.ingredient-index { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--navy); font-size: 10px; font-weight: 800; }
.ingredient-name strong { display: block; font-size: 13px; }
.ingredient-name small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.ingredient-source-count { color: var(--muted); font-size: 10.5px; }
.ingredient-data-score { display: grid; place-items: center; width: 52px; height: 32px; border-radius: 999px; color: #176a55; background: var(--green-soft); font-size: 11px; font-weight: 800; }
.ingredient-analysis-body { padding: 18px; border-top: 1px solid var(--border); }
.ingredient-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.ingredient-facts > div { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #fafcfc; }
.ingredient-facts span { display: block; color: var(--muted); font-size: 9.5px; }
.ingredient-facts strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: 11.5px; }
.ingredient-analysis-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.ingredient-analysis-columns h5 { margin: 0 0 9px; color: var(--navy); font-size: 12px; }
.ingredient-flags { display: grid; gap: 7px; }
.ingredient-flag { padding: 9px 10px; border-left: 3px solid var(--border-strong); border-radius: 7px; background: #f7f9fa; font-size: 10.5px; }
.ingredient-flag-warning { border-left-color: #d39218; background: #fff9ed; }
.ingredient-flag-info { border-left-color: #4c8eb4; background: #f2f8fb; }
.ingredient-source-list { display: grid; gap: 7px; }
.ingredient-source-list a { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--ink); background: #fff; font-size: 10.5px; overflow-wrap: anywhere; }
.ingredient-source-list a:hover { border-color: #a9bdc9; background: #f8fafb; }
.ingredient-source-list span { flex: 0 0 auto; color: var(--blue); font-weight: 750; }
.external-status-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.external-status-grid > div { padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: #f7f9fa; }
.external-status-grid span { display: block; color: var(--muted); font-size: 8.5px; font-weight: 800; }
.external-status-grid strong { display: block; margin-top: 3px; font-size: 9.5px; }
.intelligence-disclosure { margin-top: 14px; padding: 13px 14px; border: 1px solid #c9dfe9; border-radius: 10px; color: #2d627e; background: #eef7fb; font-size: 11px; line-height: 1.65; }
.intelligence-matrix { display: grid; }
.intelligence-row { display: grid; grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr); border-bottom: 1px solid var(--border); }
.intelligence-row:last-child { border-bottom: 0; }
.intelligence-label { display: grid; place-items: center; min-height: 74px; padding: 14px; border-right: 1px solid var(--border); color: var(--navy); background: #f4f7fb; font-weight: 800; text-align: center; }
.intelligence-description { display: flex; align-items: center; min-height: 74px; padding: 16px 20px; color: #2d3b45; line-height: 1.7; }

@media (max-width: 1180px) {
  .intelligence-metrics-6 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .external-status-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .intelligence-hero { grid-template-columns: 1fr; }
  .intelligence-report-head { align-items: flex-start; }
  .ingredient-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ingredient-analysis-columns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .file-inline-preview iframe { width: calc(100% - 16px); margin-top: 8px; }
  .document-preview-body { padding: 0; }
  .document-preview-body iframe { width: 100%; }
  .intelligence-hero { padding: 20px; }
  .intelligence-hero-stats { grid-template-columns: 1fr; }
  .intelligence-hero-stats div { min-height: 74px; }
  .intelligence-report-head { display: block; }
  .intelligence-score { width: 92px; height: 92px; margin-top: 16px; }
  .intelligence-metrics, .intelligence-metrics-6 { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 16px; }
  .intelligence-section-block { padding: 18px 16px; }
  .ingredient-analysis-item summary { grid-template-columns: 34px minmax(0,1fr) 48px; }
  .ingredient-source-count { display: none; }
  .ingredient-facts { grid-template-columns: 1fr; }
  .external-status-grid { grid-template-columns: 1fr 1fr; }
  .intelligence-row { grid-template-columns: 1fr; }
  .intelligence-label { min-height: 48px; border-right: 0; border-bottom: 1px solid var(--border); }
}