:root{--app-bg: #0f172a;--app-card: #1e293b;--app-border: #334155;--app-primary: #0d6efd;--app-success: #16a34a;--app-warning: #d97706;--app-danger: #dc2626;--app-text: #f1f5f9;--app-muted: #94a3b8;--app-safe-top: env(safe-area-inset-top, 0px);--app-safe-bottom: env(safe-area-inset-bottom, 0px);--app-header-h: calc(64px + var(--app-safe-top));--app-nav-h: 68px}.app-root{display:flex;flex-direction:column;min-height:100dvh;background:var(--app-bg);color:var(--app-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;max-width:480px;margin:0 auto;position:relative}.app-drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a8c;opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:140}.app-drawer-backdrop.open{opacity:1;pointer-events:auto}.app-drawer{position:fixed;top:var(--app-safe-top);left:max(0px,calc(50% - 240px));transform:translate(-104%);width:min(86vw,360px);height:calc(100dvh - var(--app-safe-top));background:linear-gradient(180deg,#111827,#0f172a);border-right:1px solid rgba(148,163,184,.14);z-index:150;display:flex;flex-direction:column;transition:transform .24s ease;box-shadow:18px 0 50px #02061773}.app-drawer.open{transform:translate(0)}.app-drawer-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 16px 14px;border-bottom:1px solid rgba(148,163,184,.12)}.app-drawer-brand{display:flex;align-items:center;gap:10px}.app-drawer-title{font-size:15px;font-weight:800;color:#fff}.app-drawer-subtitle{font-size:11px;color:var(--app-muted);margin-top:2px;text-transform:uppercase;letter-spacing:.08em}.app-icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid rgba(148,163,184,.16);background:#1e293bcc;color:#fff;font-size:18px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}.app-drawer-search-wrap{padding:14px 16px 10px}.app-drawer-nav{flex:1;overflow-y:auto;padding:6px 12px 20px}.app-drawer-section{margin-bottom:14px}.app-drawer-section-toggle{width:100%;background:none;border:none;color:var(--app-muted);display:flex;align-items:center;justify-content:space-between;padding:0 8px 8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.app-drawer-chevron{font-size:11px;transition:transform .2s ease}.app-drawer-chevron.collapsed{transform:rotate(-90deg)}.app-drawer-links{display:flex;flex-direction:column;gap:6px}.app-drawer-links.hidden{display:none}.app-drawer-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--app-text);padding:12px;border-radius:14px;border:1px solid transparent;background:#1e293b80}.app-drawer-link.active{background:linear-gradient(135deg,#0d6efdf2,#6366f1eb);border-color:#93c5fd59}.app-drawer-link-icon{width:28px;height:28px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#94a3b81f;font-size:12px;font-weight:800}.app-drawer-footer{border-top:1px solid rgba(148,163,184,.12);padding:14px 16px 20px;display:flex;flex-direction:column;gap:12px}.app-drawer-user{display:flex;align-items:center;gap:10px}.app-header{position:fixed;top:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;height:var(--app-header-h);background:#0f172af2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--app-border);display:flex;align-items:center;justify-content:space-between;padding:var(--app-safe-top) 16px 0;z-index:100}.app-header-logo{display:flex;align-items:center;gap:10px}.app-logo-icon{width:38px;height:38px;background:linear-gradient(135deg,#0d6efd,#6366f1);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:#fff}.app-header-title{font-weight:800;font-size:15px;color:#fff;line-height:1}.app-header-sub{font-size:11px;color:var(--app-muted);margin-top:2px}.app-header-user{display:flex;align-items:center;gap:8px}.app-avatar{width:34px;height:34px;background:linear-gradient(135deg,#6366f1,#0d6efd);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff}.app-header-name{font-size:12px;font-weight:600;text-align:right}.app-header-role{font-size:10px;color:var(--app-muted);text-align:right;text-transform:uppercase}.app-content{flex:1;padding-top:var(--app-header-h);padding-bottom:calc(var(--app-nav-h) + var(--app-safe-bottom) + 86px);overflow-y:auto}.app-bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;height:calc(var(--app-nav-h) + var(--app-safe-bottom));background:#0f172afa;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--app-border);display:flex;padding-bottom:var(--app-safe-bottom);z-index:100}.app-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--app-muted);transition:color .2s}.app-nav-item.active{color:var(--app-primary)}.app-nav-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}.app-nav-label{font-size:10px;font-weight:600;letter-spacing:.3px}.app-loading{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--app-bg);color:var(--app-text);gap:12px;text-align:center;padding:24px}.app-spinner{width:40px;height:40px;border:3px solid var(--app-border);border-top-color:var(--app-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-card{background:var(--app-card);border:1px solid var(--app-border);border-radius:16px;padding:16px;margin-bottom:12px}.app-page{padding:16px}.app-page-title{font-size:22px;font-weight:800;margin-bottom:4px}.app-page-sub{font-size:13px;color:var(--app-muted);margin-bottom:20px}.app-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.badge-new{background:#1d4ed8;color:#bfdbfe}.badge-approved{background:#0369a1;color:#bae6fd}.badge-production{background:#92400e;color:#fde68a}.badge-packed{background:#7c3aed;color:#ddd6fe}.badge-dispatched{background:#0f766e;color:#99f6e4}.badge-delivered{background:#15803d;color:#bbf7d0}.badge-cancelled{background:#991b1b;color:#fecaca}.app-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.app-stat{background:var(--app-card);border:1px solid var(--app-border);border-radius:14px;padding:14px;text-align:center}.app-stat-value{font-size:22px;font-weight:800}.app-stat-label{font-size:11px;color:var(--app-muted);margin-top:2px}.app-list-item{background:var(--app-card);border:1px solid var(--app-border);border-radius:14px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,transform .1s;text-decoration:none;display:block;color:var(--app-text)}.app-list-item:active{transform:scale(.98);border-color:var(--app-primary)}.app-list-row{display:flex;align-items:center;justify-content:space-between}.app-list-title{font-weight:700;font-size:15px}.app-list-sub{font-size:12px;color:var(--app-muted);margin-top:3px}.app-list-amount{font-weight:800;font-size:16px;color:var(--app-text)}.app-list-chevron{color:var(--app-muted);font-size:16px}.app-section-title{font-size:13px;font-weight:700;color:var(--app-muted);text-transform:uppercase;letter-spacing:.8px;margin:20px 0 10px}.app-input{width:100%;background:var(--app-card);border:1px solid var(--app-border);border-radius:12px;padding:12px 14px;color:var(--app-text);font-size:14px;outline:none;transition:border-color .2s}.app-input:focus{border-color:var(--app-primary)}.app-btn{display:block;width:100%;padding:14px;border:none;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .2s,transform .1s;text-align:center}.app-btn:active{transform:scale(.97);opacity:.85}.app-btn-primary{background:var(--app-primary);color:#fff}.app-btn-danger{background:var(--app-danger);color:#fff}.app-btn-ghost{background:var(--app-card);color:var(--app-text);border:1px solid var(--app-border)}.app-timeline{position:relative;padding-left:20px}.app-timeline:before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--app-border)}.app-timeline-item{position:relative;margin-bottom:16px}.app-timeline-dot{position:absolute;left:-20px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--app-border);border:2px solid var(--app-bg)}.app-timeline-dot.done{background:var(--app-success)}.app-timeline-dot.active{background:var(--app-primary);box-shadow:0 0 0 4px #0d6efd33}.app-timeline-label{font-size:13px;font-weight:600}.app-timeline-time{font-size:11px;color:var(--app-muted);margin-top:2px}.app-empty{text-align:center;padding:48px 24px;color:var(--app-muted)}.app-empty-icon{font-size:48px;margin-bottom:12px}.app-empty-text{font-size:14px}.app-banner{background:linear-gradient(135deg,#0d6efd,#6366f1);border-radius:18px;padding:20px;margin-bottom:16px;position:relative;overflow:hidden}.app-banner:after{content:"";position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:#ffffff14}.app-install-banner{position:fixed;bottom:calc(80px + var(--app-safe-bottom));left:50%;transform:translate(-50%);width:calc(100% - 16px);max-width:464px;z-index:130;background:linear-gradient(135deg,#1e3a5f,#1e293b);border:1px solid rgba(13,110,253,.33);border-radius:16px;padding:14px 16px;box-shadow:0 8px 32px #0006;display:flex;align-items:flex-start;gap:12px}.app-install-icon{width:44px;height:44px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,#0d6efd,#6366f1);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#fff}.app-install-copy{flex:1}.app-install-title{font-weight:700;font-size:14px;color:#f1f5f9;margin-bottom:3px}.app-install-text{font-size:12px;color:#94a3b8;line-height:1.5}.app-install-text strong{color:#60a5fa}.app-install-button{margin-top:10px;padding:8px 16px;border-radius:10px;background:#0d6efd;color:#fff;border:none;font-size:13px;font-weight:700}.app-install-dismiss{background:none;border:none;color:#64748b;font-size:18px;cursor:pointer;padding:0;line-height:1}