:root{font-family:Noto Sans Thai,IBM Plex Sans Thai,Segoe UI,sans-serif;color:#10202c;background:radial-gradient(circle at top left,rgba(7,127,111,.18),transparent 22%),radial-gradient(circle at bottom right,rgba(242,164,54,.14),transparent 20%),linear-gradient(180deg,#eff4f1,#f8fbfa);line-height:1.5;font-weight:400;color-scheme:light;--surface: rgba(255, 255, 255, .78);--surface-strong: #ffffff;--border: rgba(16, 32, 44, .09);--ink: #10202c;--muted: #61717d;--accent: #067b6d;--accent-strong: #0c4f47;--amber: #b86c17;--danger: #b44a36;--shadow: 0 24px 44px rgba(16, 32, 44, .08)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--ink)}button,input,select{font:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:290px 1fr}.sidebar{padding:28px 22px;border-right:1px solid var(--border);background:#ffffffa3;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:grid;align-content:start;gap:28px}.brand-block h1,.hero h2,.section-head h3{margin:0;letter-spacing:-.04em}.brand-block p:last-child,.hero-copy p,.sidebar-note p,.display-row p,.refund-row p,.timestamp-card span{color:var(--muted)}.eyebrow{margin:0 0 10px;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.nav-list{display:grid;gap:8px}.nav-item{border:0;background:transparent;text-align:left;padding:12px 14px;border-radius:16px;color:var(--ink);transition:background-color .18s ease,transform .18s ease}.nav-item:hover,.nav-item:focus-visible{background:#067b6d14;outline:none;transform:translate(2px)}.nav-item.active{background:linear-gradient(135deg,#067b6d29,#067b6d0a);color:var(--accent-strong);font-weight:700}.sidebar-note{padding-top:22px;border-top:1px solid var(--border)}.sidebar-note strong{display:block;margin-bottom:8px}.main-panel{padding:32px}.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:20px;align-items:end}.hero-copy h2{max-width:13ch;font-size:clamp(2rem,4vw,3.5rem);line-height:.96}.hero-copy p:last-child{max-width:58ch;margin-top:14px}.hero-rail{display:grid;gap:14px;justify-items:start}.status-pill,.timestamp-card,.surface,.metrics-strip article{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.status-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;font-weight:700}.status-pill.api{color:var(--accent-strong)}.status-pill.mock{color:var(--amber)}.status-dot{width:10px;height:10px;border-radius:999px;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pulse 2s infinite}.timestamp-card{width:100%;border-radius:24px;padding:18px 18px 20px}.timestamp-card strong{display:block;margin-top:4px;font-size:1.02rem}.timestamp-card small{display:block;margin-top:8px;color:var(--muted)}.metrics-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}.metrics-strip article{border-radius:24px;padding:18px 20px}.metrics-strip span{display:block;color:var(--muted)}.metrics-strip strong{display:block;margin-top:10px;font-size:clamp(1.7rem,2.4vw,2.6rem);letter-spacing:-.05em}.workspace-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(320px,.9fr);gap:18px;margin-top:20px}.surface{border-radius:30px;padding:22px}.surface-main{display:grid;gap:18px}.surface-side{display:grid;align-content:start;gap:18px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px}.section-head.compact{align-items:start}.search-field{min-width:min(100%,320px)}.compact-field{min-width:min(100%,180px)}.search-field span{display:block;margin-bottom:8px;font-size:.88rem;color:var(--muted)}.search-field input,.search-field select{width:100%;border:1px solid rgba(16,32,44,.1);background:#ffffffe0;color:var(--ink);border-radius:16px;padding:12px 14px}.search-field input:focus-visible,.search-field select:focus-visible{outline:2px solid rgba(6,123,109,.22);border-color:#067b6d4d}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:14px 10px;text-align:left;border-bottom:1px solid rgba(16,32,44,.08)}th{color:var(--muted);font-size:.9rem;font-weight:700}.empty-cell,.empty-block{color:var(--muted)}.tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:.82rem;font-weight:700;background:#10202c14;color:var(--ink)}.tag.pending_customer_payment,.tag.processing,.tag.tone-warn{background:#b86c1724;color:var(--amber)}.tag.succeeded,.tag.refunded,.tag.paired,.tag.tone-good{background:#067b6d24;color:var(--accent-strong)}.tag.failed,.tag.canceled,.tag.unpaired{background:#b44a3624;color:var(--danger)}.tag.tone-muted{background:#61717d24;color:var(--muted)}.refund-band,.reporting-band{padding-top:8px;border-top:1px solid rgba(16,32,44,.08)}.report-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.limit-field{min-width:0}.refund-list,.display-list{display:grid;gap:10px}.refund-row,.display-row{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid rgba(16,32,44,.08)}.refund-row{grid-template-columns:minmax(0,1.2fr) auto auto;align-items:center}.refund-row strong,.display-row strong{line-height:1.2}.refund-row p,.display-row p{margin:0;font-size:.92rem}.display-row-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.alert-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.alert-list li{padding:14px 16px;border-radius:18px;background:#ffffffa8;border:1px solid rgba(16,32,44,.08)}.alert-list.compact li{padding:10px 12px;font-size:.92rem}.mini-metrics{display:grid;gap:10px}.mini-metrics.compact{grid-template-columns:repeat(3,minmax(0,1fr))}.mini-metrics article,.finance-card{padding:14px 16px;border-radius:18px;background:#ffffffa8;border:1px solid rgba(16,32,44,.08)}.mini-metrics span,.finance-card p{color:var(--muted)}.mini-metrics strong,.finance-card strong{display:block;margin-top:6px}.recovery-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.recovery-actions{display:flex;gap:8px;flex-wrap:wrap}.maintenance-actions{margin-top:14px}.action-button{border:0;border-radius:999px;padding:10px 14px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}.action-button.secondary{background:#10202c14;color:var(--ink)}.action-button.tertiary{background:#067b6d1a;color:var(--accent-strong)}.action-button:disabled{opacity:.6;cursor:not-allowed}.inline-note{margin:12px 0 0;color:var(--muted)}.inline-note.success{color:var(--accent-strong)}.inline-note.error{color:var(--danger)}.inline-note.neutral{color:var(--muted)}.recovery-list{display:grid;gap:10px;margin-top:12px}.readiness-grid{margin-top:14px;grid-template-columns:repeat(4,minmax(0,1fr))}.readiness-block{margin-top:14px}.readiness-block strong{margin-bottom:8px}.performance-list{display:grid;gap:10px;margin-top:14px}.performance-row{display:flex;align-items:start;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid rgba(16,32,44,.08)}.performance-row:first-child{padding-top:0;border-top:0}.performance-row p{margin:4px 0 0;color:var(--muted)}.recovery-item-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.recovery-item,.history-item{padding:0}.history-list{margin-top:14px}.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.report-card{padding:14px 16px;border-radius:18px;background:#ffffffa8;border:1px solid rgba(16,32,44,.08)}.report-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.text-link{color:var(--accent-strong);font-weight:700;text-decoration:none}.text-link:hover,.text-link:focus-visible{text-decoration:underline;outline:none}.muted-inline{color:var(--muted);font-size:.88rem}.report-item+.report-item{margin-top:12px;padding-top:12px;border-top:1px solid rgba(16,32,44,.08)}.report-item p{margin:4px 0 0;color:var(--muted)}@keyframes pulse{0%{box-shadow:0 0 #067b6d40}70%{box-shadow:0 0 0 10px #067b6d00}to{box-shadow:0 0 #067b6d00}}@media(max-width:1180px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--border)}.hero,.workspace-grid,.metrics-strip,.report-grid,.report-toolbar{grid-template-columns:1fr 1fr}.mini-metrics.compact{grid-template-columns:1fr}}@media(max-width:840px){.main-panel,.sidebar{padding:22px 18px}.hero,.workspace-grid,.metrics-strip,.refund-row,.report-grid,.report-toolbar{grid-template-columns:1fr}.recovery-head,.recovery-item-head{flex-direction:column}.section-head{align-items:start;flex-direction:column}.hero-copy h2{max-width:11ch}}
