:root{--bg: #0b1020;--bg-elev-1: rgba(15, 23, 42, .65);--bg-elev-2: rgba(15, 23, 42, .8);--border: rgba(148, 163, 184, .18);--text: #e5e7eb;--muted: #94a3b8;--primary: #3b82f6;--primary-contrast: #ffffff;--accent: #22d3ee;--danger: #ef4444;--ok: #10b981;--focus: #60a5fa;--shadow: 0 10px 30px rgba(2, 6, 23, .5);--radius: 12px}*,*:before,*:after{box-sizing:border-box;min-width:0}@media (prefers-contrast: more){:root{--bg: #070b16;--bg-elev-1: rgba(12, 19, 36, .9);--border: rgba(203, 213, 225, .3);--text: #f8fafc;--primary: #1d4ed8}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 10% -10%,#0b1730,transparent),radial-gradient(1200px 800px at 110% 10%,#10223f,transparent),var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-shell{min-height:100vh;display:flex;flex-direction:column}.container{padding:16px}.install-bar{position:sticky;top:0;z-index:12;background:linear-gradient(0deg,transparent,rgba(2,6,23,.6)),var(--bg-elev-2);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);border-bottom:1px solid var(--border)}.install-bar .header-row{align-items:center;min-height:96px;gap:16px}.install-bar .header-row>div:first-child{flex:1 1 auto}.install-bar .row{flex-wrap:nowrap;gap:12px}.app-header{position:sticky;top:0;z-index:10;background:linear-gradient(0deg,transparent,rgba(2,6,23,.6)),var(--bg-elev-2);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);border-bottom:1px solid var(--border);min-height:64px}.app-shell>main{flex:1 1 auto;min-height:0}.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.app-title{margin:0;font-size:18px;letter-spacing:.2px}.app-subtle{opacity:.8;font-size:13px;color:var(--muted)}.card{background:var(--bg-elev-1);border:1px solid var(--border);border-radius:var(--radius);padding:12px;backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);box-shadow:var(--shadow)}.card-item{border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);padding:10px;background:linear-gradient(180deg,#0f172acc,#0f172a80);transition:transform .2s ease,border-color .2s ease,background .2s ease}.card-item:hover{transform:translateY(-1px)}.card-clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.btn{--btn-base: var(--primary);--btn-bg: var(--btn-base);--btn-fg: var(--primary-contrast);display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--btn-bg),var(--btn-bg));background:linear-gradient(180deg,color-mix(in srgb,var(--btn-bg) 95%,#fff 5%),var(--btn-bg));color:var(--btn-fg);border:1px solid var(--btn-bg);border:1px solid color-mix(in srgb,var(--btn-bg) 80%,#000 20%);padding:12px 14px;border-radius:10px;font-weight:650;cursor:pointer;box-shadow:0 6px 18px #3b82f640;transition:transform .15s ease,box-shadow .15s ease,background .2s ease,opacity .2s ease;touch-action:manipulation}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px #3b82f647}.btn:active{transform:translateY(0) scale(.99)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{--btn-base: #475569;box-shadow:0 6px 18px #1e293b40}.btn-danger{--btn-base: var(--danger);box-shadow:0 6px 18px #ef444440}.btn-ghost{--btn-bg: transparent;--btn-fg: var(--text);background:linear-gradient(180deg,#1e293b99,#0f172a99);border:1px solid var(--border);box-shadow:none}.btn-icon{padding:10px 12px}.btn .icon{width:18px;height:18px}.icon-lg{width:20px;height:20px}.btn-soft{box-shadow:0 4px 12px #0000002e;opacity:.95}@supports (color: color-mix(in srgb,black,white)){.btn-soft{--btn-bg: color-mix(in srgb, var(--btn-base) 90%, var(--bg) 10%)}.btn-danger.btn-soft{--btn-bg: color-mix(in srgb, var(--btn-base) 80%, var(--bg) 20%)}.btn-secondary.btn-soft{--btn-bg: color-mix(in srgb, var(--btn-base) 78%, var(--bg) 22%)}}.btn-ghost.btn-soft{background:linear-gradient(180deg,#1f293740,#0f172a40);border-color:#94a3b840}.btn-ghost.btn-soft:hover{background:linear-gradient(180deg,#1f293759,#0f172a59)}.btn.btn-soft:not(.btn-secondary):not(.btn-danger):not(.btn-ghost){border-color:color-mix(in srgb,var(--primary) 85%,var(--border) 15%);box-shadow:0 6px 20px #3b82f63d}.modal .btn.btn-soft:not(.btn-secondary):not(.btn-danger):not(.btn-ghost){background:linear-gradient(180deg,var(--btn-bg),var(--btn-bg))}@supports (color: color-mix(in srgb,black,white)){.modal .btn.btn-soft:not(.btn-secondary):not(.btn-danger):not(.btn-ghost){--btn-bg: color-mix(in srgb, var(--btn-base) 95%, #ffffff 5%);border-color:color-mix(in srgb,var(--primary) 60%,var(--border) 40%);box-shadow:0 5px 16px #3b82f62e}}.modal .btn-secondary.btn-soft{border-color:#94a3b847;box-shadow:0 4px 14px #4755692e}@supports (color: color-mix(in srgb,black,white)){.modal .btn-secondary.btn-soft{border-color:color-mix(in srgb,#475569 60%,var(--border) 40%)}}.btn-link{background:transparent;border-color:transparent;box-shadow:none;padding:6px 8px;opacity:.82}.btn-link:hover{opacity:1;background:transparent}.drag-handle{cursor:grab;opacity:.75;padding:6px;border:1px solid var(--border);border-radius:8px;background:linear-gradient(180deg,#1e293b99,#0f172a99)}.drag-handle:active{cursor:grabbing;opacity:.9}.drop-placeholder{height:10px;border:1px dashed var(--border);border-radius:8px;background:#94a3b814;animation:drop-grow .15s ease both}@keyframes drop-grow{0%{height:0;opacity:0;margin:0}to{height:10px;opacity:1;margin:4px 0}}.po-actions{animation:fade-slide .15s ease both}@keyframes fade-slide{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}.chev{transition:transform .15s ease}.chev-open{transform:rotate(180deg)}.po-card{position:relative;display:grid;gap:8px}.po-delete{position:absolute;top:8px;right:8px}.po-header{display:flex;align-items:center;gap:10px}.po-name{display:inline-flex;align-items:center;gap:6px}.po-products{display:grid;gap:6px}.po-product-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid var(--border);border-radius:8px}.form-row{width:100%}.form-row .input{flex:1 1 auto;min-width:180px}.form-actions{width:100%;display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.input{display:block;width:100%;box-sizing:border-box;padding:12px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,#0b1020e6,#0b1020b3);color:var(--text);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.input::placeholder{color:var(--muted)}@supports (color: color-mix(in srgb,black,white)){.input::placeholder{color:color-mix(in srgb,var(--muted) 90%,var(--text) 10%)}}.input:focus{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 30%,transparent 70%)}.badge{font-size:12px;padding:4px 10px;border-radius:999px;background:#1f2a44;color:#cbd5e1;border:1px solid var(--border)}.badge-ok{background:#0f3b32;color:#d1fae5}.badge-pending{background:#103644;color:#cffafe}.badge .icon{width:14px;height:14px}@supports (color: color-mix(in srgb,black,white)){.badge-ok{background:color-mix(in srgb,var(--ok) 20%,#1f2a44 80%)}.badge-pending{background:color-mix(in srgb,var(--accent) 15%,#1f2a44 85%)}}.media{max-width:100%;border-radius:10px;border:1px solid var(--border)}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.grid{display:grid;gap:16px}.grid-sm{display:grid;gap:12px}.grid,.grid-sm{align-content:start;justify-items:stretch}.hint{color:var(--muted);font-size:13px}.hint-error{color:#fca5a5cc}@supports (color: color-mix(in srgb,black,white)){.hint-error{color:color-mix(in srgb,#fca5a5 40%,var(--muted) 60%)}}.title-accent{position:relative}.title-accent:after{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:4px;height:60%;border-radius:2px;background:linear-gradient(180deg,var(--accent),transparent)}@keyframes appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.appear{animation:appear .2s ease both}.drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#02061780;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}.drawer-overlay.open{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;left:0;height:100vh;width:280px;max-width:85vw;background:var(--bg-elev-2);border-right:1px solid var(--border);box-shadow:var(--shadow);transform:translate(-100%);transition:transform .2s ease;z-index:50;-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%)}.drawer.open{transform:translate(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid var(--border)}.nav-list{display:grid;gap:6px;padding:10px}.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none;border:1px solid rgba(148,163,184,.12);background:transparent;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.nav-link:hover{background:#94a3b80f;border-color:#94a3b838}.nav-link.active{border-color:color-mix(in srgb,var(--primary) 50%,var(--border) 50%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 30%,transparent 70%)}@supports (color: color-mix(in srgb,black,white)){.nav-link.active{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 18%,transparent),color-mix(in srgb,var(--primary) 8%,transparent))}}.menu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:transparent}.profile-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:260px;z-index:50;padding:12px;backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);background:transparent!important;overflow:hidden}.profile-menu .menu-section{margin-top:10px}.profile-menu:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--bg-elev-1);backdrop-filter:inherit;-webkit-backdrop-filter:inherit;z-index:-1}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;background:#02061773;backdrop-filter:blur(6px) saturate(110%);-webkit-backdrop-filter:blur(6px) saturate(110%)}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:grid;place-items:center;padding:16px}.modal-panel{width:min(420px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;border-radius:var(--radius);padding:16px}.modal-panel .title-accent:after{left:-4px}.modal .title-accent{margin:0 0 8px}.modal .modal-message{margin:8px 0 16px}.modal .modal-actions{justify-content:end;gap:10px}.input-with-icon{position:relative}.input-with-icon .icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}.input-with-icon>.input{padding-left:34px}.install-bar .install-inner{display:grid;grid-template-columns:1fr;row-gap:10px;padding:12px 16px}.install-bar .install-actions{display:flex;align-items:center;gap:12px}.install-bar .install-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.btn-icon-plain{background:transparent!important;border:0!important;box-shadow:none!important}.btn-icon-plain:hover{background:#94a3b814!important}.po-delete .icon{color:#ef4444d9}@supports (color: color-mix(in srgb,black,white)){.po-delete .icon{color:color-mix(in srgb,var(--danger) 65%,var(--text) 35%)}}.icon-danger{color:#ef4444d9}@supports (color: color-mix(in srgb,black,white)){.icon-danger{color:color-mix(in srgb,var(--danger) 65%,var(--text) 35%)}}.btn-icon-xs{padding:6px!important}