*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--red:#e63946;--orange:#f4722b;--grad:linear-gradient(135deg, #e63946, #f4722b);--grad-soft:linear-gradient(135deg, #e6394610, #f4722b10);--dark:#0f0d0b;--dark2:#171310;--dark3:#201c18;--border:#2c2722;--text:#f5f3f0;--muted:#9a8f85;--panel-bg:#f6f3f1;--panel-text:#1a1614;--panel-muted:#78706b;--panel-border:#e4dfdb;--panel-surface:#fff;--radius:.875rem;--radius-sm:.5rem;--shadow-sm:0 1px 3px #0000000d, 0 1px 2px #00000008;--shadow-md:0 4px 16px #00000014, 0 2px 6px #00000008;--shadow-lg:0 24px 48px #00000028, 0 8px 24px #00000014;--t:.18s cubic-bezier(.4,0,.2,1)}body{background:var(--dark);color:var(--text);flex-direction:column;min-height:100dvh;font-family:Segoe UI,system-ui,-apple-system,sans-serif;display:flex}#auth-screen{background:radial-gradient(at 50% 0,#e6394608 0%,#0000 60%);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2.5rem;padding:2rem;display:flex}.auth-logo{align-items:center;gap:.875rem;display:flex}.auth-logo-icon{background:var(--grad);border-radius:.875rem;justify-content:center;align-items:center;width:52px;height:52px;font-size:1.6rem;display:flex;box-shadow:0 8px 24px #e6394628}.auth-logo h1{letter-spacing:-.02em;font-size:1.5rem;font-weight:800}.auth-logo span{color:var(--muted);margin-top:.1rem;font-size:.8rem;display:block}#clerk-mount{width:100%;max-width:420px}#app-screen{flex-direction:column;flex:1;height:100dvh;display:flex}header{background:var(--dark);border-bottom:1px solid var(--border);z-index:10;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.9rem;padding:.6rem 1.25rem;display:flex;position:sticky;top:0}.logo{flex-shrink:0;align-items:center;gap:.6rem;display:flex}.logo-icon{background:var(--grad);border-radius:.5rem;justify-content:center;align-items:center;width:32px;height:32px;font-size:.95rem;display:flex;box-shadow:0 4px 12px #e6394622}.logo h1{letter-spacing:-.01em;font-size:.9rem;font-weight:700}.logo span{color:var(--muted);font-size:.63rem;display:block}.header-right{align-items:center;gap:.5rem;margin-right:auto;display:flex}.layout{flex:1;grid-template-columns:272px 1fr;display:grid;overflow:hidden}.sidebar{background:var(--dark2);border-left:1px solid var(--border);flex-direction:column;display:flex;overflow-y:auto}.sidebar::-webkit-scrollbar{width:3px}.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.sidebar-header{border-bottom:1px solid var(--border);background:var(--dark2);z-index:1;padding:.875rem 1rem .65rem;position:sticky;top:0}.sidebar-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:.4rem;margin-bottom:.55rem;font-size:.64rem;font-weight:700;display:flex}.cat-count{background:var(--dark3);border:1px solid var(--border);color:var(--muted);border-radius:99px;padding:.05rem .4rem;font-size:.6rem;font-weight:600}.add-root-row{gap:.4rem;display:flex}.add-root-row input{background:var(--dark3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);transition:border-color var(--t);flex:1;padding:.38rem .65rem;font-size:.82rem}.add-root-row input:focus{border-color:var(--orange);outline:none}.add-root-row input::placeholder{color:var(--muted)}.tree-wrap{flex-direction:column;flex:1;padding:.5rem .6rem;display:flex;overflow-y:auto}.tree-node{flex-direction:column;display:flex}.tree-item{border-radius:var(--radius-sm);cursor:pointer;color:#c5bdb5;transition:background var(--t), color var(--t);-webkit-user-select:none;user-select:none;align-items:center;gap:.4rem;padding:.34rem .42rem;font-size:.83rem;display:flex;position:relative}.tree-item:hover{background:var(--dark3);color:var(--text)}.tree-item:hover .tree-delete{opacity:1}.tree-item.active{background:var(--grad-soft);color:var(--orange);border-right:2px solid var(--orange)}.tree-item .name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:500;overflow:hidden}.tree-item img{object-fit:cover;border-radius:.3rem;flex-shrink:0;width:24px;height:24px}.tree-dot{background:var(--dark3);border:1px solid var(--border);width:24px;height:24px;color:var(--muted);border-radius:.3rem;flex-shrink:0;justify-content:center;align-items:center;font-size:.6rem;display:flex}.tree-chevron{width:18px;height:18px;color:var(--muted);transition:transform var(--t), color var(--t), background var(--t);cursor:pointer;background:0 0;border:none;border-radius:.25rem;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.72rem;display:flex}.tree-chevron:hover{color:var(--text);background:var(--border)}.tree-chevron--empty{visibility:hidden;pointer-events:none}.tree-chevron--collapsed{transform:rotate(-90deg)}.child-count{background:var(--dark3);border:1px solid var(--border);color:var(--muted);border-radius:99px;flex-shrink:0;padding:.04rem .35rem;font-size:.58rem;font-weight:700}.tree-delete{opacity:0;transition:opacity var(--t);flex-shrink:0}.children{border-right:1px dashed var(--border);flex-direction:column;margin-top:.05rem;margin-right:.6rem;padding-right:1rem;display:flex}.sidebar-empty{color:var(--muted);text-align:center;flex-direction:column;align-items:center;gap:.4rem;padding:2.5rem .5rem;font-size:.8rem;line-height:1.7;display:flex}.sidebar-empty span{opacity:.35;font-size:1.75rem}.panel{background:var(--panel-bg);padding:1.5rem;overflow-y:auto}.panel-inner{flex-direction:column;gap:.875rem;max-width:600px;display:flex}.empty-state{color:var(--panel-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:5rem 2rem;display:flex}.empty-state .icon{opacity:.3;font-size:2.5rem}.empty-state p{max-width:220px;font-size:.875rem;line-height:1.6}.card{background:var(--panel-surface);border-radius:var(--radius);border:1px solid var(--panel-border);box-shadow:var(--shadow-sm);transition:box-shadow var(--t);overflow:hidden}.card:hover{box-shadow:var(--shadow-md)}.card-header{justify-content:space-between;align-items:center;padding:.8rem 1.1rem;display:flex}.card--open .card-header{border-bottom:1px solid var(--panel-border)}.card-header--clickable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--t)}.card-header--clickable:hover{background:#f8f5f2}.card-header h2{align-items:center;gap:.5rem;font-size:.875rem;font-weight:700;display:flex}.card-badge{background:var(--grad);color:#fff;border-radius:99px;padding:.14rem .5rem;font-size:.62rem;font-weight:700}.card-chevron{color:var(--panel-muted);transition:transform var(--t);flex-shrink:0;font-size:.72rem}.card-chevron--collapsed{transform:rotate(-90deg)}.card-body{flex-direction:column;gap:.875rem;padding:1rem 1.1rem;display:flex}.field{flex-direction:column;gap:.3rem;display:flex}label{color:var(--panel-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:700}input[type=text],input[type=url],textarea{border:1px solid var(--panel-border);border-radius:var(--radius-sm);background:var(--panel-bg);width:100%;color:var(--panel-text);transition:border-color var(--t), box-shadow var(--t);padding:.5rem .75rem;font-size:.875rem}input:focus,textarea:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px #f4722b12}.upload-area{align-items:center;gap:1rem;display:flex}.thumb{object-fit:cover;border-radius:var(--radius-sm);border:2px solid var(--panel-border);flex-shrink:0;width:64px;height:64px}.thumb-placeholder{border-radius:var(--radius-sm);border:2px dashed var(--panel-border);background:var(--panel-bg);width:64px;height:64px;color:var(--panel-muted);text-align:center;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:.2rem;font-size:.6rem;display:flex}.thumb-placeholder span{font-size:1.1rem}input[type=file]{color:var(--panel-muted);font-size:.78rem}.products-wrap{flex-wrap:wrap;gap:.4rem;min-height:30px;display:flex}.product-tag{background:var(--grad-soft);color:var(--orange);transition:border-color var(--t);border:1px solid #f4722b22;border-radius:99px;align-items:center;gap:.4rem;padding:.22rem .7rem .22rem .55rem;font-size:.75rem;font-weight:600;display:inline-flex}.product-tag:hover{border-color:#f4722b48}.product-tag button{color:var(--red);background:0 0;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;padding:0;font-size:.68rem;display:flex}.add-row{gap:.5rem;display:flex}.add-row input{flex:1}.product-url-input{resize:vertical;min-height:72px;font-size:.8rem;line-height:1.6}.divider{background:var(--panel-border);height:1px}button{cursor:pointer;border-radius:var(--radius-sm);transition:transform var(--t), box-shadow var(--t), opacity var(--t), background var(--t);letter-spacing:.01em;border:none;padding:.44rem .9rem;font-size:.82rem;font-weight:600}button:active{transform:scale(.96)}button:disabled{opacity:.4;cursor:not-allowed}.btn-grad{background:var(--grad);color:#fff;box-shadow:0 2px 8px #e6394620}.btn-grad:hover{box-shadow:0 4px 16px #e6394632}.btn-outline{border:1px solid var(--border);color:var(--text);background:0 0}.btn-outline:hover{border-color:var(--orange);color:var(--orange)}.btn-ghost{color:var(--panel-text);background:#ede9e6}.btn-ghost:hover{background:#ddd9d5}.btn-danger{color:#fca5a5;background:#3d0808;border:1px solid #6b1717}.btn-danger:hover{color:#fff;background:#7f1d1d}.btn-sm{padding:.22rem .55rem;font-size:.75rem}.btn-icon{border-radius:.4rem;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:flex}.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;background:#00000085;justify-content:center;align-items:center;padding:1rem;animation:.15s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--panel-surface);border-radius:calc(var(--radius) * 1.25);border:1px solid var(--panel-border);box-shadow:var(--shadow-lg);flex-direction:column;gap:1rem;width:100%;max-width:680px;max-height:90dvh;padding:1.5rem;animation:.2s cubic-bezier(.34,1.4,.64,1) slideUp;display:flex}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)scale(.97)}to{opacity:1;transform:none}}.modal-header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.modal-header h2{font-size:1rem;font-weight:700}.modal-header p{color:var(--panel-muted);margin-top:.25rem;font-size:.79rem}.modal textarea{resize:vertical;color:#f5f3f0;border-color:var(--border);background:#14110e;flex:1;min-height:320px;font-family:Cascadia Code,Fira Code,monospace;font-size:.78rem}.modal-footer{gap:.5rem;display:flex}.toast{background:var(--dark2);color:var(--text);border:1px solid var(--border);opacity:0;pointer-events:none;z-index:200;border-radius:99px;padding:.6rem 1.25rem;font-size:.82rem;font-weight:500;transition:opacity .22s,transform .22s;position:fixed;bottom:1.75rem;left:50%;transform:translate(-50%)translateY(1rem);box-shadow:0 8px 28px #00000032}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.tool-switcher{background:var(--dark3);border:1px solid var(--border);border-radius:99px;gap:.3rem;padding:.2rem;display:flex}.tool-switcher button{color:var(--muted);background:0 0;border-radius:99px;padding:.3rem .8rem;font-size:.78rem;font-weight:600}.tool-switcher button:hover{color:var(--text)}.tool-switcher button.active{background:var(--grad);color:#fff;box-shadow:0 2px 8px #e6394620}.add-product-rows{flex-direction:column;gap:.4rem;display:flex}.add-product-rows>input{background:var(--dark3);border:1px solid var(--border);width:100%;color:var(--text);border-radius:var(--radius-sm);transition:border-color var(--t);padding:.38rem .65rem;font-size:.82rem}.add-product-rows>input:focus{border-color:var(--orange);outline:none}.add-product-rows>input::placeholder{color:var(--muted)}.panel-toolbar{background:var(--panel-surface);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem 1rem;display:flex}.panel-toolbar__info{flex-direction:column;gap:.15rem;display:flex}.panel-toolbar__pid{font-size:.85rem;font-weight:700}.panel-toolbar__count{color:var(--panel-muted);font-size:.7rem}.panel-toolbar__actions{gap:.4rem;display:flex}.switch{cursor:pointer;display:inline-flex;position:relative}.switch input{opacity:0;width:0;height:0;position:absolute}.switch__track{background:var(--panel-border);width:38px;height:22px;transition:background var(--t);border-radius:99px;display:block;position:relative}.switch__track:after{content:"";width:18px;height:18px;box-shadow:var(--shadow-sm);transition:transform var(--t);background:#fff;border-radius:50%;position:absolute;top:2px;right:2px}.switch input:checked+.switch__track{background:var(--orange)}.switch input:checked+.switch__track:after{transform:translate(-16px)}.tab-card .card-header{cursor:default}.repeater{flex-direction:column;gap:.7rem;display:flex}.repeater-item{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-sm);flex-direction:column;gap:.6rem;padding:.8rem;display:flex}.repeater-item__head{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.repeater-item__num{color:var(--orange);background:var(--grad-soft);border:1px solid #f4722b22;border-radius:99px;padding:.1rem .55rem;font-size:.7rem;font-weight:700}.repeater-item--row{flex-direction:row;align-items:flex-end;gap:.5rem}.repeater-item--row .field{flex:1}.repeater-item__row-del{margin-bottom:.12rem}.repeater-add{align-self:flex-start}.repeater-item select{border:1px solid var(--panel-border);border-radius:var(--radius-sm);background:var(--panel-surface);color:var(--panel-text);padding:.35rem .6rem;font-size:.8rem}.img-field{align-items:stretch;gap:.6rem;display:flex}.img-field__thumb{object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--panel-border);flex-shrink:0;width:56px;height:56px}.img-field__ph{border-radius:var(--radius-sm);border:1px dashed var(--panel-border);background:var(--panel-bg);opacity:.5;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;font-size:1.1rem;display:flex}.img-field__controls{flex:1;align-items:center;gap:.4rem;display:flex}.img-field__controls input{flex:1}.img-upload-btn{cursor:pointer;white-space:nowrap;align-items:center;display:inline-flex}.img-upload-btn input{display:none}@media (width<=700px){.layout{grid-template-rows:220px 1fr;grid-template-columns:1fr}.logo span{display:none}.tool-switcher button{padding:.3rem .55rem;font-size:.72rem}}
