/* ==========================================================================
   P&P Online design system — ต่อยอดจาก Bootstrap 3.3.7
   1. Tokens   2. Base   3. App shell   4. Page   5. Components   6. Auth   7. Print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* brand (teal) */
  --ppo-brand-50:  #f0fdfa;
  --ppo-brand-100: #ccfbf1;
  --ppo-brand-200: #99f6e4;
  --ppo-brand-600: #0d9488;
  --ppo-brand-700: #0f766e;  /* primary — 5.5:1 on white */
  --ppo-brand-800: #115e59;
  --ppo-brand-900: #134e4a;

  /* neutrals (slate) */
  --ppo-ink-900: #0f172a;
  --ppo-ink-700: #334155;
  --ppo-ink-600: #475569;
  --ppo-ink-500: #64748b;
  --ppo-ink-400: #94a3b8;
  --ppo-line:    #e2e8f0;
  --ppo-line-strong: #cbd5e1;
  --ppo-bg:      #f5f7f9;
  --ppo-surface: #ffffff;
  --ppo-surface-2: #f8fafc;

  /* status — text on tint; always paired with icon + label */
  --ppo-success: #15803d; --ppo-success-bg: #dcfce7;
  --ppo-warning: #a16207; --ppo-warning-bg: #fef3c7;
  --ppo-danger:  #b91c1c; --ppo-danger-bg:  #fee2e2;
  --ppo-info:    #1d4ed8; --ppo-info-bg:    #dbeafe;
  --ppo-neutral: #475569; --ppo-neutral-bg: #f1f5f9;

  /* type */
  --ppo-font: "Sarabun", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --ppo-fs-xs: 12px;
  --ppo-fs-sm: 13px;
  --ppo-fs-md: 15px;
  --ppo-fs-lg: 17px;
  --ppo-fs-xl: 20px;
  --ppo-fs-2xl: 24px;
  --ppo-fs-3xl: 30px;

  /* space (4px scale) */
  --ppo-s1: 4px; --ppo-s2: 8px; --ppo-s3: 12px; --ppo-s4: 16px;
  --ppo-s5: 20px; --ppo-s6: 24px; --ppo-s8: 32px; --ppo-s10: 40px;

  /* shape & depth */
  --ppo-r-sm: 6px; --ppo-r-md: 10px; --ppo-r-lg: 14px; --ppo-r-pill: 999px;
  --ppo-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --ppo-shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
  --ppo-focus: 0 0 0 3px rgba(13, 148, 136, .28);
  --ppo-ease: cubic-bezier(.2, .8, .2, 1);
}

/* 2. Base ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body.ppo {
  background: var(--ppo-bg);
  color: var(--ppo-ink-900);
  font-family: var(--ppo-font);
  font-size: var(--ppo-fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ppo h1, .ppo h2, .ppo h3, .ppo h4, .ppo h5 { font-family: var(--ppo-font); color: var(--ppo-ink-900); font-weight: 600; line-height: 1.35; }
.ppo a { color: var(--ppo-brand-700); }
.ppo a:hover, .ppo a:focus { color: var(--ppo-brand-800); }
.ppo :focus-visible { outline: none; box-shadow: var(--ppo-focus); border-radius: var(--ppo-r-sm); }
.ppo .text-muted { color: var(--ppo-ink-500); }
.ppo .tnum { font-variant-numeric: tabular-nums; }
.ppo-skip { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--ppo-ink-900); color: #fff !important; padding: 8px 14px; border-radius: var(--ppo-r-sm); }
.ppo-skip:focus { left: 8px; }

/* Bootstrap overrides */
.ppo .btn { border-radius: var(--ppo-r-sm); font-weight: 500; padding: 8px 16px; font-size: var(--ppo-fs-md); transition: background-color .15s var(--ppo-ease), border-color .15s, box-shadow .15s; }
.ppo .btn-sm { padding: 5px 12px; font-size: var(--ppo-fs-sm); }
.ppo .btn-lg { padding: 11px 20px; font-size: var(--ppo-fs-lg); }
.ppo .btn-primary { background: var(--ppo-brand-700); border-color: var(--ppo-brand-700); }
.ppo .btn-primary:hover, .ppo .btn-primary:focus, .ppo .btn-primary:active { background: var(--ppo-brand-800); border-color: var(--ppo-brand-800); }
/* ลิงก์ที่เป็นปุ่มสีทึบ: กัน .ppo a ทับสีตัวอักษรขาวของ bootstrap */
.ppo a.btn-primary, .ppo a.btn-success, .ppo a.btn-danger, .ppo a.btn-info, .ppo a.btn-warning,
.ppo a.btn-primary:hover, .ppo a.btn-primary:focus, .ppo a.btn-success:hover, .ppo a.btn-danger:hover { color: #fff; }
.ppo .btn-default { background: var(--ppo-surface); border-color: var(--ppo-line-strong); color: var(--ppo-ink-700); }
.ppo .btn-default:hover { background: var(--ppo-surface-2); border-color: var(--ppo-ink-400); }
.ppo .btn-success { background: var(--ppo-success); border-color: var(--ppo-success); }
.ppo .btn-danger { background: var(--ppo-danger); border-color: var(--ppo-danger); }
.ppo .btn-ghost { background: transparent; border-color: transparent; color: var(--ppo-ink-600); }
.ppo .btn-ghost:hover { background: var(--ppo-neutral-bg); color: var(--ppo-ink-900); }
.ppo .btn[disabled] { opacity: .55; }
.ppo .form-control { height: 40px; border-radius: var(--ppo-r-sm); border-color: var(--ppo-line-strong); box-shadow: none; font-size: var(--ppo-fs-md); color: var(--ppo-ink-900); }
.ppo textarea.form-control { height: auto; }
.ppo .form-control:focus { border-color: var(--ppo-brand-600); box-shadow: var(--ppo-focus); }
.ppo .form-control[readonly] { background: var(--ppo-surface-2); }
.ppo label { font-weight: 500; color: var(--ppo-ink-700); }
.ppo .help-block { color: var(--ppo-ink-500); font-size: var(--ppo-fs-sm); }
.ppo .required::after { content: " *"; color: var(--ppo-danger); }
.ppo .modal-content { border-radius: var(--ppo-r-lg); border: 0; box-shadow: var(--ppo-shadow-md); }

/* 3. App shell ------------------------------------------------------------- */
.ppo-topbar { background: var(--ppo-surface); border-bottom: 1px solid var(--ppo-line); position: sticky; top: 0; z-index: 1000; }
.ppo-topbar__inner { display: flex; align-items: center; gap: var(--ppo-s4); min-height: 60px; padding: 0 var(--ppo-s4); max-width: 1320px; margin: 0 auto; }
.ppo-brand { display: flex; align-items: center; gap: 10px; color: var(--ppo-ink-900) !important; text-decoration: none !important; white-space: nowrap; }
.ppo-brand__mark { width: 34px; height: 34px; border-radius: 9px; background: var(--ppo-brand-700); color: #fff; display: grid; place-items: center; font-size: 16px; }
.ppo-brand__name { font-weight: 700; font-size: var(--ppo-fs-lg); line-height: 1.1; }
.ppo-brand__sub { display: block; font-size: var(--ppo-fs-xs); color: var(--ppo-ink-500); font-weight: 400; }
.ppo-nav { display: flex; gap: 2px; margin: 0 0 0 var(--ppo-s4); padding: 0; list-style: none; flex: 1; overflow-x: auto; }
.ppo-nav a { display: block; padding: 8px 12px; border-radius: var(--ppo-r-sm); color: var(--ppo-ink-600); font-weight: 500; white-space: nowrap; text-decoration: none !important; }
.ppo-nav a:hover { background: var(--ppo-neutral-bg); color: var(--ppo-ink-900); }
.ppo-nav a.is-active { background: var(--ppo-brand-50); color: var(--ppo-brand-800); }
.ppo-topbar__tools { display: flex; align-items: center; gap: var(--ppo-s2); margin-left: auto; }
.ppo-year { display: flex; align-items: center; gap: 6px; font-size: var(--ppo-fs-sm); color: var(--ppo-ink-500); }
.ppo-year select { height: 34px; border: 1px solid var(--ppo-line-strong); border-radius: var(--ppo-r-sm); padding: 0 8px; background: var(--ppo-surface); color: var(--ppo-ink-900); font: inherit; }
.ppo-user { position: relative; }
.ppo-user__btn { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; border-radius: var(--ppo-r-pill); padding: 4px 10px 4px 4px; color: var(--ppo-ink-700); }
.ppo-user__btn:hover { background: var(--ppo-neutral-bg); }
.ppo-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ppo-brand-100); color: var(--ppo-brand-800); display: grid; place-items: center; font-weight: 700; font-size: var(--ppo-fs-sm); }
.ppo-user .dropdown-menu { border-radius: var(--ppo-r-md); border-color: var(--ppo-line); box-shadow: var(--ppo-shadow-md); padding: 6px; min-width: 220px; }
.ppo-user .dropdown-menu > li > a { border-radius: var(--ppo-r-sm); padding: 8px 12px; }
.ppo-user .dropdown-header { padding: 8px 12px; font-size: var(--ppo-fs-sm); }
.ppo-menu-toggle { display: none; }
@media (max-width: 991px) {
  .ppo-topbar__inner { flex-wrap: wrap; padding: 8px var(--ppo-s4); }
  .ppo-nav { order: 3; flex-basis: 100%; margin: 0 -4px; padding-bottom: 4px; }
  .ppo-year label { display: none; }
  .ppo-user__name { display: none; }
}

/* 4. Page ------------------------------------------------------------------ */
.ppo-page { max-width: 1320px; margin: 0 auto; padding: var(--ppo-s6) var(--ppo-s4) var(--ppo-s10); }
.ppo-page--narrow { max-width: 880px; }
.ppo-crumbs { list-style: none; padding: 0; margin: 0 0 var(--ppo-s2); display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--ppo-fs-sm); color: var(--ppo-ink-500); }
.ppo-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ppo-ink-400); }
.ppo-crumbs a { color: var(--ppo-ink-500); }
.ppo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ppo-s4); flex-wrap: wrap; margin-bottom: var(--ppo-s5); }
.ppo-head h1 { font-size: var(--ppo-fs-2xl); margin: 0; }
.ppo-head p { margin: 4px 0 0; color: var(--ppo-ink-500); }
.ppo-head__actions { display: flex; gap: var(--ppo-s2); flex-wrap: wrap; }
.ppo-section-title { font-size: var(--ppo-fs-lg); margin: var(--ppo-s6) 0 var(--ppo-s3); display: flex; align-items: center; gap: 8px; }
.ppo-grid { display: grid; gap: var(--ppo-s4); }
.ppo-grid--stats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 575px) {
  .ppo-grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ppo-s3); }
  .ppo-stat { padding: var(--ppo-s3) var(--ppo-s4); }
  .ppo-stat__value { font-size: var(--ppo-fs-2xl); }
  .ppo-stat__hint { display: none; }
  .ppo-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
.ppo-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ppo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--ppo-s5); align-items: start; }
@media (max-width: 991px) { .ppo-layout { grid-template-columns: 1fr; } }

/* 5. Components ------------------------------------------------------------ */
/* Card */
.ppo-card { background: var(--ppo-surface); border: 1px solid var(--ppo-line); border-radius: var(--ppo-r-lg); box-shadow: var(--ppo-shadow-sm); }
.ppo-card + .ppo-card { margin-top: var(--ppo-s4); }
.ppo-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ppo-s3); padding: var(--ppo-s4) var(--ppo-s5); border-bottom: 1px solid var(--ppo-line); }
.ppo-card__head h2, .ppo-card__head h3 { font-size: var(--ppo-fs-lg); margin: 0; }
.ppo-card__body { padding: var(--ppo-s5); }
.ppo-card__body--flush { padding: 0; }
.ppo-card--accent { border-top: 3px solid var(--ppo-brand-700); }

/* Stat tile — label / value / hint; the whole tile is the link */
.ppo-stat { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--ppo-s4) var(--ppo-s5); background: var(--ppo-surface); border: 1px solid var(--ppo-line); border-radius: var(--ppo-r-lg); box-shadow: var(--ppo-shadow-sm); color: var(--ppo-ink-900) !important; text-decoration: none !important; transition: transform .15s var(--ppo-ease), box-shadow .15s, border-color .15s; overflow: hidden; }
a.ppo-stat:hover { transform: translateY(-2px); box-shadow: var(--ppo-shadow-md); border-color: var(--ppo-line-strong); }
.ppo-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ppo-tone, var(--ppo-ink-400)); }
.ppo-stat__label { display: flex; align-items: center; gap: 8px; font-size: var(--ppo-fs-sm); color: var(--ppo-ink-600); font-weight: 500; }
.ppo-stat__icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--ppo-tone-bg, var(--ppo-neutral-bg)); color: var(--ppo-tone, var(--ppo-ink-600)); font-size: 14px; }
.ppo-stat__value { font-size: var(--ppo-fs-3xl); font-weight: 700; line-height: 1.2; margin-top: 6px; }
.ppo-stat__hint { font-size: var(--ppo-fs-xs); color: var(--ppo-ink-500); padding-right: 22px; }
.ppo-stat__go { position: absolute; right: 14px; bottom: 12px; color: var(--ppo-ink-400); }
a.ppo-stat:hover .ppo-stat__go { color: var(--ppo-tone, var(--ppo-brand-700)); }
.ppo-stat--highlight { background: var(--ppo-tone-bg, var(--ppo-surface)); }
.tone-brand   { --ppo-tone: var(--ppo-brand-700); --ppo-tone-bg: var(--ppo-brand-50); }
.tone-success { --ppo-tone: var(--ppo-success); --ppo-tone-bg: var(--ppo-success-bg); }
.tone-warning { --ppo-tone: var(--ppo-warning); --ppo-tone-bg: var(--ppo-warning-bg); }
.tone-danger  { --ppo-tone: var(--ppo-danger);  --ppo-tone-bg: var(--ppo-danger-bg); }
.tone-info    { --ppo-tone: var(--ppo-info);    --ppo-tone-bg: var(--ppo-info-bg); }
.tone-neutral { --ppo-tone: var(--ppo-neutral); --ppo-tone-bg: var(--ppo-neutral-bg); }
.tone-muted   { --ppo-tone: var(--ppo-ink-400); --ppo-tone-bg: var(--ppo-neutral-bg); }

/* Badge (status) — icon + label, never color alone */
.ppo-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--ppo-r-pill); font-size: var(--ppo-fs-sm); font-weight: 500; white-space: nowrap; line-height: 1.6; }
.ppo-badge--success { background: var(--ppo-success-bg); color: var(--ppo-success); }
.ppo-badge--warning { background: var(--ppo-warning-bg); color: var(--ppo-warning); }
.ppo-badge--danger  { background: var(--ppo-danger-bg);  color: var(--ppo-danger); }
.ppo-badge--info    { background: var(--ppo-info-bg);    color: var(--ppo-info); }
.ppo-badge--neutral, .ppo-badge--muted { background: var(--ppo-neutral-bg); color: var(--ppo-neutral); }
.ppo-chip { display: inline-block; padding: 1px 8px; border-radius: var(--ppo-r-sm); background: var(--ppo-neutral-bg); color: var(--ppo-ink-600); font-size: var(--ppo-fs-xs); font-weight: 500; }

/* Review result icon (per reviewer) */
.ppo-review { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; }
.ppo-review--pass { background: var(--ppo-success-bg); color: var(--ppo-success); }
.ppo-review--fail { background: var(--ppo-danger-bg); color: var(--ppo-danger); }
.ppo-review--wait { background: var(--ppo-warning-bg); color: var(--ppo-warning); }

/* Table */
.ppo-table-wrap { overflow-x: auto; }
.ppo-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ppo-fs-md); }
.ppo-table th { background: var(--ppo-surface-2); color: var(--ppo-ink-600); font-weight: 600; font-size: var(--ppo-fs-sm); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ppo-line); white-space: nowrap; }
.ppo-table td { padding: 12px 14px; border-bottom: 1px solid var(--ppo-line); vertical-align: middle; }
.ppo-table tbody tr:last-child td { border-bottom: 0; }
.ppo-table tbody tr:hover td { background: #fafcfd; }
.ppo-table .is-current td { background: var(--ppo-brand-50); }
.ppo-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ppo-table .center { text-align: center; }
.ppo-table .nowrap { white-space: nowrap; }
.ppo-table__title { font-weight: 600; color: var(--ppo-ink-900); display: block; }
.ppo-table__meta { font-size: var(--ppo-fs-sm); color: var(--ppo-ink-500); }
.ppo-table a.ppo-table__title:hover { color: var(--ppo-brand-700); }
/* จอเล็ก: แต่ละแถวเป็นการ์ดซ้อนแนวตั้ง */
@media (max-width: 767px) {
  .ppo-table--stack thead { display: none; }
  .ppo-table--stack, .ppo-table--stack tbody, .ppo-table--stack tr, .ppo-table--stack td { display: block; width: 100%; }
  .ppo-table--stack tr { padding: 10px 16px; border-bottom: 1px solid var(--ppo-line); }
  .ppo-table--stack tr[hidden] { display: none; }
  .ppo-table--stack tbody tr:last-child { border-bottom: 0; }
  .ppo-table--stack td { border: 0; padding: 2px 0; text-align: left !important; white-space: normal !important; }
  .ppo-table--stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ppo-ink-500); font-size: var(--ppo-fs-sm); }
  .ppo-table--stack .ppo-actions { justify-content: flex-start; margin-top: 6px; }
}

/* Toolbar (search/filter above lists) */
.ppo-toolbar { display: flex; gap: var(--ppo-s3); align-items: center; flex-wrap: wrap; padding: var(--ppo-s3) var(--ppo-s5); border-bottom: 1px solid var(--ppo-line); }
.ppo-search { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.ppo-search .fa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ppo-ink-400); }
.ppo-search input { padding-left: 34px; }
.ppo-count { font-size: var(--ppo-fs-sm); color: var(--ppo-ink-500); margin-left: auto; }

/* Alert / flash */
.ppo-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--ppo-r-md); margin-bottom: var(--ppo-s4); font-size: var(--ppo-fs-md); border: 1px solid transparent; }
.ppo-alert .fa { margin-top: 4px; }
.ppo-alert--success { background: var(--ppo-success-bg); color: #14532d; border-color: #bbf7d0; }
.ppo-alert--error   { background: var(--ppo-danger-bg); color: #7f1d1d; border-color: #fecaca; }
.ppo-alert--info    { background: var(--ppo-info-bg); color: #1e3a8a; border-color: #bfdbfe; }
.ppo-alert--warning { background: var(--ppo-warning-bg); color: #713f12; border-color: #fde68a; }

/* Empty state */
.ppo-empty { text-align: center; padding: var(--ppo-s10) var(--ppo-s5); color: var(--ppo-ink-500); }
.ppo-empty .fa { font-size: 36px; color: var(--ppo-ink-400); margin-bottom: var(--ppo-s3); display: block; }
.ppo-empty strong { display: block; color: var(--ppo-ink-700); font-size: var(--ppo-fs-lg); margin-bottom: 4px; }

/* Key-value list */
.ppo-kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px var(--ppo-s4); margin: 0; }
.ppo-kv dt { color: var(--ppo-ink-500); font-weight: 500; }
.ppo-kv dd { margin: 0; color: var(--ppo-ink-900); word-break: break-word; }
@media (max-width: 575px) { .ppo-kv { grid-template-columns: 1fr; gap: 2px; } .ppo-kv dd { margin-bottom: 10px; } }

/* Steps — review progress */
.ppo-steps { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.ppo-steps li { flex: 1; position: relative; text-align: center; font-size: var(--ppo-fs-sm); color: var(--ppo-ink-500); padding-top: 36px; min-width: 0; }
.ppo-steps li::before { content: counter(step); counter-increment: step; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--ppo-surface); border: 2px solid var(--ppo-line-strong); color: var(--ppo-ink-500); display: grid; place-items: center; font-weight: 700; font-size: var(--ppo-fs-sm); z-index: 1; }
.ppo-steps li::after { content: ""; position: absolute; top: 13px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: var(--ppo-line-strong); }
.ppo-steps li:first-child::after { display: none; }
.ppo-steps li.is-done { color: var(--ppo-ink-700); }
.ppo-steps li.is-done::before { content: "\f00c"; font-family: FontAwesome; background: var(--ppo-brand-700); border-color: var(--ppo-brand-700); color: #fff; font-weight: 400; }
.ppo-steps li.is-done::after, .ppo-steps li.is-current::after { background: var(--ppo-brand-700); }
.ppo-steps li.is-current { color: var(--ppo-ink-900); font-weight: 600; }
.ppo-steps li.is-current::before { border-color: var(--ppo-brand-700); color: var(--ppo-brand-700); box-shadow: 0 0 0 4px var(--ppo-brand-100); }
.ppo-steps li.is-fail::before { content: "!"; background: var(--ppo-danger); border-color: var(--ppo-danger); color: #fff; }
.ppo-steps li.is-fail { color: var(--ppo-danger); font-weight: 600; }

/* Choice cards (radio) */
.ppo-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ppo-s2); }
.ppo-choice label { display: flex; gap: 10px; align-items: center; margin: 0; padding: 12px 14px; border: 1.5px solid var(--ppo-line-strong); border-radius: var(--ppo-r-md); cursor: pointer; font-weight: 500; background: var(--ppo-surface); }
.ppo-choice input { margin: 0; accent-color: var(--ppo-brand-700); width: 18px; height: 18px; }
.ppo-choice label:has(input:checked) { border-color: var(--ppo-tone, var(--ppo-brand-700)); background: var(--ppo-tone-bg, var(--ppo-brand-50)); }

/* File drop */
.ppo-file { display: block; border: 2px dashed var(--ppo-line-strong); border-radius: var(--ppo-r-md); padding: var(--ppo-s5); text-align: center; background: var(--ppo-surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.ppo-file:hover, .ppo-file.is-drag { border-color: var(--ppo-brand-600); background: var(--ppo-brand-50); }
.ppo-file input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ppo-file .fa { font-size: 28px; color: var(--ppo-brand-700); display: block; margin-bottom: 6px; }
.ppo-file__name { display: block; margin-top: 6px; font-weight: 600; color: var(--ppo-ink-900); word-break: break-all; }

/* Timeline (version history) */
.ppo-timeline { list-style: none; margin: 0; padding: 0; }
.ppo-timeline li { position: relative; padding: 0 0 var(--ppo-s4) 28px; }
.ppo-timeline li::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: -4px; width: 2px; background: var(--ppo-line); }
.ppo-timeline li:last-child::before { display: none; }
.ppo-timeline li::after { content: ""; position: absolute; left: 3px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ppo-surface); border: 2px solid var(--ppo-brand-700); }

/* Misc */
.ppo-divider { height: 1px; background: var(--ppo-line); margin: var(--ppo-s5) 0; border: 0; }
.ppo-inline-form { display: inline; margin: 0; }
.ppo-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ppo-callout { padding: var(--ppo-s4); border-radius: var(--ppo-r-md); background: var(--ppo-surface-2); border: 1px solid var(--ppo-line); }
.ppo-note { font-size: var(--ppo-fs-sm); color: var(--ppo-ink-500); }
.ppo-footer { max-width: 1320px; margin: 0 auto; padding: 0 var(--ppo-s4) var(--ppo-s8); font-size: var(--ppo-fs-sm); color: var(--ppo-ink-400); }

/* 6. Auth ------------------------------------------------------------------ */
.ppo-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); background: var(--ppo-surface); }
.ppo-auth__side { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--ppo-brand-800), var(--ppo-brand-900) 60%, #0b3b37); color: #fff; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; }
.ppo-auth__side::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .05); }
.ppo-auth__side h1 { color: #fff; font-size: 34px; font-weight: 700; margin: 0 0 12px; }
.ppo-auth__side p { color: rgba(255, 255, 255, .82); font-size: var(--ppo-fs-lg); max-width: 460px; }
.ppo-auth__points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.ppo-auth__points li { display: flex; gap: 12px; align-items: center; color: rgba(255, 255, 255, .9); }
.ppo-auth__points .fa { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.ppo-auth__main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.ppo-auth__box { width: 100%; max-width: 380px; }
.ppo-auth__box h2 { font-size: var(--ppo-fs-2xl); margin: 0 0 4px; }
.ppo-auth__box .lead { color: var(--ppo-ink-500); font-size: var(--ppo-fs-md); margin-bottom: var(--ppo-s6); }
.ppo-auth .form-control { height: 46px; }
.ppo-otp { font-size: 28px !important; letter-spacing: 12px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; height: 60px !important; }
.ppo-auth__foot { margin-top: var(--ppo-s6); font-size: var(--ppo-fs-sm); color: var(--ppo-ink-500); text-align: center; }
.ppo-pw { position: relative; }
.ppo-pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--ppo-ink-500); padding: 6px 8px; }
@media (max-width: 860px) {
  .ppo-auth { grid-template-columns: 1fr; }
  .ppo-auth__side { padding: 28px 24px; }
  .ppo-auth__side h1 { font-size: 24px; }
  .ppo-auth__points, .ppo-auth__side .ppo-auth__foot { display: none; }
}

/* 7. Print ----------------------------------------------------------------- */
@media print {
  .ppo-topbar, .ppo-head__actions, .ppo-toolbar, .btn { display: none !important; }
  body.ppo { background: #fff; }
  .ppo-card { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ppo * { transition: none !important; }
}