@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";
:root{--color-primary:#ff385c;--color-primary-active:#e00b41;--color-primary-disabled:#ffd1da;--color-ink:#222;--color-body:#3f3f3f;--color-muted:#6a6a6a;--color-muted-soft:#929292;--color-hairline:#ddd;--color-hairline-soft:#ebebeb;--color-border-strong:#c1c1c1;--color-canvas:#fff;--color-surface-soft:#f7f7f7;--color-surface-card:#fff;--color-surface-strong:#f2f2f2;--color-on-primary:#fff;--color-error:#c13515;--color-success:#008a05;--sidebar-w:240px;--sp-xxs:2px;--sp-xs:4px;--sp-sm:8px;--sp-md:12px;--sp-base:16px;--sp-lg:24px;--sp-xl:32px;--sp-xxl:48px;--sp-section:64px;--r-none:0px;--r-xs:4px;--r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:32px;--r-full:9999px;--shadow-card:#00000005 0 0 0 1px, #0000000a 0 2px 6px, #0000001a 0 4px 8px;--shadow-sm:0 1px 3px #00000014, 0 1px 2px #0000000a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{background:var(--color-surface-soft);color:var(--color-ink);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,system-ui,Roboto,Helvetica Neue,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,textarea,select{font-family:inherit}.btn-primary{background:var(--color-primary);color:var(--color-on-primary);border-radius:var(--r-sm);white-space:nowrap;justify-content:center;align-items:center;gap:8px;height:48px;padding:14px 24px;font-size:16px;font-weight:500;line-height:1.25;transition:background .15s,transform .1s;display:inline-flex}.btn-primary:hover{background:var(--color-primary-active)}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{background:var(--color-primary-disabled);cursor:not-allowed}.btn-secondary{background:var(--color-canvas);color:var(--color-ink);border-radius:var(--r-sm);border:1px solid var(--color-ink);white-space:nowrap;justify-content:center;align-items:center;gap:8px;height:48px;padding:13px 23px;font-size:16px;font-weight:500;line-height:1.25;transition:background .15s;display:inline-flex}.btn-secondary:hover{background:var(--color-surface-soft)}.btn-ghost{color:var(--color-ink);border-radius:var(--r-sm);background:0 0;justify-content:center;align-items:center;gap:8px;padding:8px 12px;font-size:14px;font-weight:500;transition:background .15s;display:inline-flex}.btn-ghost:hover{background:var(--color-surface-soft)}.btn-danger{color:var(--color-primary);border-radius:var(--r-sm);border:1px solid var(--color-primary-disabled);background:#fff0f1;justify-content:center;align-items:center;gap:8px;padding:8px 14px;font-size:14px;font-weight:500;transition:background .15s;display:inline-flex}.btn-danger:hover{background:var(--color-primary-disabled)}.btn-sm{height:36px!important;padding:8px 16px!important;font-size:14px!important}.input{background:var(--color-canvas);width:100%;color:var(--color-ink);border-radius:var(--r-sm);border:1px solid var(--color-hairline);outline:none;height:56px;padding:14px 12px;font-size:16px;font-weight:400;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--color-ink);border-width:2px}.input::placeholder{color:var(--color-muted-soft)}.input.error{border-color:var(--color-error)}.textarea{background:var(--color-canvas);width:100%;color:var(--color-ink);border-radius:var(--r-sm);border:1px solid var(--color-hairline);resize:vertical;outline:none;min-height:120px;padding:14px 12px;font-size:16px;font-weight:400;transition:border-color .15s}.textarea:focus{border-color:var(--color-ink);border-width:2px}.select{background:var(--color-canvas);width:100%;color:var(--color-ink);border-radius:var(--r-sm);border:1px solid var(--color-hairline);appearance:none;cursor:pointer;outline:none;height:56px;padding:14px 12px;font-size:16px;font-weight:400}.select:focus{border-color:var(--color-ink);border-width:2px}.form-group{flex-direction:column;gap:6px;display:flex}.form-label{color:var(--color-muted);font-size:14px;font-weight:500}.form-error{color:var(--color-error);font-size:13px}.card{background:var(--color-canvas);border-radius:var(--r-md);border:1px solid var(--color-hairline-soft);padding:var(--sp-lg)}.card-hover{background:var(--color-canvas);border-radius:var(--r-md);border:1px solid var(--color-hairline-soft);padding:var(--sp-lg);transition:box-shadow .2s,transform .15s}.card-hover:hover{box-shadow:var(--shadow-card);transform:translateY(-1px)}.badge{border-radius:var(--r-full);white-space:nowrap;align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:600;line-height:1.18;display:inline-flex}.badge-primary{color:var(--color-primary);background:#fff0f1}.badge-success{color:var(--color-success);background:#e6f4e6}.badge-warning{color:#b85c00;background:#fff8e6}.badge-muted{background:var(--color-surface-strong);color:var(--color-muted)}.badge-ink{background:var(--color-ink);color:#fff}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--sp-sm)}.gap-md{gap:var(--sp-md)}.gap-base{gap:var(--sp-base)}.gap-lg{gap:var(--sp-lg)}.divider{background:var(--color-hairline-soft);height:1px;margin:var(--sp-lg) 0}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:2px solid var(--color-hairline);border-top-color:var(--color-primary);border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.25s both fadeIn}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toast-container{z-index:9999;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:24px;right:24px}.toast{background:var(--color-ink);color:#fff;border-radius:var(--r-sm);box-shadow:var(--shadow-card);align-items:center;gap:10px;min-width:260px;padding:12px 18px;font-size:14px;font-weight:500;animation:.25s both slideUp;display:flex}.toast.success{border-left:3px solid var(--color-success);background:#1a3a1a}.toast.error{border-left:3px solid var(--color-primary);background:#3a1a1a}.empty-state{text-align:center;color:var(--color-muted);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:48px 24px;display:flex}.empty-state svg{opacity:.35}.stat-card{background:var(--color-canvas);border-radius:var(--r-md);border:1px solid var(--color-hairline-soft);padding:var(--sp-lg);flex-direction:column;gap:8px;transition:box-shadow .2s;display:flex}.stat-card:hover{box-shadow:var(--shadow-sm)}.stat-value{color:var(--color-ink);font-size:28px;font-weight:700;line-height:1.2}.stat-label{color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em;font-size:13px;font-weight:500}.stat-delta{color:var(--color-success);font-size:13px;font-weight:500}.page-header{margin-bottom:var(--sp-xl)}.page-title{color:var(--color-ink);letter-spacing:-.02em;font-size:22px;font-weight:600;line-height:1.2}.page-subtitle{color:var(--color-muted);margin-top:4px;font-size:14px}.table{border-collapse:collapse;width:100%}.table th{color:var(--color-muted);text-transform:uppercase;letter-spacing:.05em;text-align:left;border-bottom:1px solid var(--color-hairline-soft);padding:10px 16px;font-size:12px;font-weight:700}.table td{color:var(--color-ink);border-bottom:1px solid var(--color-hairline-soft);vertical-align:middle;padding:14px 16px;font-size:14px}.table tr:last-child td{border-bottom:none}.table tbody tr:hover{background:var(--color-surface-soft)}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:flex-start;height:100vh;padding:24px;animation:.15s fadeIn;display:flex;position:fixed;inset:0;overflow-y:auto}.modal{background:var(--color-canvas);border-radius:var(--r-lg);padding:var(--sp-xl);width:100%;max-width:480px;box-shadow:var(--shadow-card);flex-shrink:0;align-self:flex-start;margin:auto;animation:.2s fadeIn}.modal-title{margin-bottom:var(--sp-lg);font-size:20px;font-weight:700}.app-layout{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-w);background:var(--color-canvas);border-right:1px solid var(--color-hairline-soft);z-index:100;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar-logo{border-bottom:1px solid var(--color-hairline-soft);align-items:center;gap:10px;padding:24px 20px;display:flex}.sidebar-logo-mark{background:var(--color-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;font-weight:700;display:flex}.sidebar-logo-text{color:var(--color-ink);font-size:16px;font-weight:700}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:16px 12px;display:flex}.sidebar-link{border-radius:var(--r-sm);color:var(--color-muted);align-items:center;gap:10px;padding:10px 12px;font-size:14px;font-weight:500;transition:all .15s;display:flex}.sidebar-link:hover{background:var(--color-surface-soft);color:var(--color-ink)}.sidebar-link.active{color:var(--color-primary);background:#fff0f1}.sidebar-link.active svg{color:var(--color-primary)}.sidebar-section-label{color:var(--color-muted-soft);text-transform:uppercase;letter-spacing:.08em;padding:16px 12px 6px;font-size:11px;font-weight:700}.sidebar-footer{border-top:1px solid var(--color-hairline-soft);padding:16px 12px}.main-content{margin-left:var(--sidebar-w);min-height:100vh;max-width:calc(100vw - var(--sidebar-w));flex:1;padding:32px}.topbar{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.user-avatar{background:var(--color-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:700;display:flex}.grid-2{gap:var(--sp-lg);grid-template-columns:1fr 1fr;display:grid}.grid-3{gap:var(--sp-lg);grid-template-columns:repeat(3,1fr);display:grid}.grid-4{gap:var(--sp-lg);grid-template-columns:repeat(4,1fr);display:grid}@media (max-width:1024px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.sidebar{transform:translate(-100%)}.main-content{margin-left:0}}.status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-dot.pending{background:#f5a623}.status-dot.processing{background:#4a90e2}.status-dot.ready{background:var(--color-success)}.status-dot.posted{background:var(--color-muted)}.status-dot.failed{background:var(--color-primary)}.pill-tabs{background:var(--color-surface-strong);border-radius:var(--r-full);gap:4px;padding:4px;display:flex}.pill-tab{border-radius:var(--r-full);color:var(--color-muted);padding:8px 20px;font-size:14px;font-weight:500;transition:all .15s}.pill-tab.active{background:var(--color-canvas);color:var(--color-ink);box-shadow:var(--shadow-sm)}.code-block{color:#e8e8f0;border-radius:var(--r-sm);white-space:pre-wrap;word-break:break-all;background:#1a1a2e;padding:16px;font-family:SF Mono,Fira Code,monospace;font-size:13px;line-height:1.6;overflow-x:auto}