:root{--bg-primary: #0b0b0c;--bg-surface: #141417;--bg-card: #1c1d22;--bg-card-hover: #24252c;--border-subtle: #2a2b34;--border-strong: #3e404f;--text-primary: #f2f2f7;--text-secondary: #9898a0;--text-tertiary: #636366;--accent-red: #ff453a;--accent-orange: #ff9f0a;--accent-yellow: #ffd60a;--accent-green: #30d158;--accent-blue: #0a84ff;--accent-purple: #bf5af2;--status-draft: #636366;--status-ready: #0a84ff;--status-generating: #bf5af2;--status-generated: #64d2ff;--status-qc-pending: #ffd60a;--status-qc-failed: #ff453a;--status-qc-passed: #30d158;--status-approval-pending: #ff9f0a;--status-approved: #34c759;--status-rejected: #ff453a;--status-stale: #8e8e93;--status-blocked: #e02424}[data-theme=light]{--bg-primary: #f2f2f7;--bg-surface: #ffffff;--bg-card: #ffffff;--bg-card-hover: #e5e5ea;--border-subtle: #d1d1d6;--border-strong: #c7c7cc;--text-primary: #1c1c1e;--text-secondary: #636366;--text-tertiary: #8e8e93}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:rgba(10,132,255,.15)}html,body{overscroll-behavior-y:contain;background-color:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Thonburi,Sukhumvit Set,Sarabun,Noto Sans Thai,SF Pro Display,SF Pro Text,Segoe UI,sans-serif;height:100%;width:100%;line-height:1.45;-webkit-font-smoothing:antialiased;touch-action:manipulation}button,a,[onclick],.card-clickable,.nav-tab,input,select,textarea,[role=button]{touch-action:manipulation;cursor:pointer}input,textarea,select{font-size:16px!important;font-family:inherit;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:10px;padding:10px 14px;width:100%}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent-blue)}button{font-family:inherit;font-size:15px;font-weight:600;border:none;cursor:pointer;min-height:44px;min-width:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;transition:opacity .15s ease,transform .1s ease}button:active{transform:scale(.97);opacity:.85}.btn-primary{background:var(--accent-blue);color:#fff}.btn-success{background:var(--accent-green);color:#000;font-weight:700}.btn-danger{background:var(--accent-red);color:#fff}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-subtle)}.btn-ghost{background:transparent;color:var(--text-secondary)}.app-shell{display:flex;flex-direction:column;height:100vh;height:100dvh;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);background:var(--bg-primary);overflow:hidden}.app-header{height:52px;min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border-subtle);background:var(--bg-surface);z-index:20}.app-title-group{display:flex;align-items:center;gap:8px}.brand-badge{font-size:11px;font-weight:800;background:var(--accent-red);color:#fff;padding:2px 6px;border-radius:6px;letter-spacing:.5px}.network-indicator{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 8px;border-radius:20px;background:var(--bg-card);border:1px solid var(--border-subtle)}.indicator-dot{width:8px;height:8px;border-radius:50%}.indicator-dot.online{background:var(--accent-green)}.indicator-dot.offline{background:var(--accent-orange)}.app-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;padding-bottom:calc(72px + env(safe-area-inset-bottom))}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--bg-surface);border-top:1px solid var(--border-subtle);display:flex;justify-content:space-around;align-items:center;height:calc(56px + max(12px,env(safe-area-inset-bottom)));padding-bottom:max(12px,env(safe-area-inset-bottom));z-index:30}.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-secondary);font-size:10px;font-weight:600;text-decoration:none;background:transparent;border:none;min-height:48px;cursor:pointer;position:relative}.nav-tab.active{color:var(--accent-blue)}.nav-tab svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;margin-bottom:2px}.nav-badge{position:absolute;top:4px;right:calc(50% - 18px);background:var(--accent-red);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}.status-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap;letter-spacing:.2px}.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:14px;padding:16px;margin-bottom:14px}.card-clickable{cursor:pointer}.card-clickable:active{background:var(--bg-card-hover)}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;z-index:100;display:none;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.sheet-backdrop.active{display:flex;opacity:1;visibility:visible;pointer-events:auto}.bottom-sheet{background:var(--bg-surface);border-top-left-radius:20px;border-top-right-radius:20px;width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;padding:18px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.3,1);border-top:1px solid var(--border-strong);overflow-y:auto;pointer-events:auto;-webkit-overflow-scrolling:touch}.sheet-backdrop.active .bottom-sheet{transform:translateY(0)}.sheet-handle{width:38px;height:5px;background:var(--border-strong);border-radius:3px;align-self:center;margin-bottom:14px}.sheet-close-btn{background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:50%;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer}.sheet-close-btn:active{background:var(--bg-card-hover);color:var(--text-primary)}@media(min-width:768px){.ipad-split{display:grid;grid-template-columns:320px 1fr 340px;gap:16px;height:100%}.ipad-col{overflow-y:auto;background:var(--bg-surface);border-radius:16px;border:1px solid var(--border-subtle);padding:16px}}