:root{--bg: #0a0c11;--bg-2: #0d1018;--surface: #12151d;--surface-2: #171b25;--line: #222836;--line-soft: #1a1f2b;--text: #e8ecf4;--muted: #8b95a7;--dim: #5c6575;--accent: #6c8cff;--accent-dim: #2c447f;--ok: #3ddc84;--warn: #ffb545;--bad: #ff5a5a;--radius: 12px;--shadow: 0 10px 34px rgba(0, 0, 0, .5)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(900px 600px at 12% -10%,rgba(108,140,255,.14),transparent 60%),radial-gradient(700px 500px at 100% 0%,rgba(199,120,255,.1),transparent 55%),var(--bg);color:var(--text);font:14px/1.5 Inter,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.layout{display:grid;grid-template-columns:244px 1fr;min-height:100vh}.sidebar{display:flex;flex-direction:column;gap:6px;padding:20px 14px;background:linear-gradient(180deg,#12151df5,#0a0c11f5);border-right:1px solid var(--line);position:sticky;top:0;height:100vh}.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.14em;font-size:13px;padding:4px 8px 18px}.logo small{display:block;font-size:10px;letter-spacing:.18em;color:var(--dim);font-weight:500;margin-top:2px}.logo-mark{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pulse 2.6s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.86)}}.sidebar nav{display:flex;flex-direction:column;gap:2px}.sidebar nav a{position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:550;font-size:13.5px;transition:color .16s,background .16s,transform .16s}.sidebar nav a svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.sidebar nav a:hover{color:var(--text);background:#ffffff0a}.sidebar nav a.active{color:#fff;background:linear-gradient(90deg,#6c8cff33,#6c8cff0d)}.sidebar nav a.active:before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:slideIn .22s ease}@keyframes slideIn{0%{transform:scaleY(0)}to{transform:scaleY(1)}}.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}.site-link{color:var(--muted);text-decoration:none;font-size:12.5px;padding:8px 12px;border-radius:8px;border:1px solid var(--line);transition:color .16s,border-color .16s}.site-link:hover{color:var(--text);border-color:var(--accent-dim)}.api-state{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim);padding:0 12px}.api-state i{width:7px;height:7px;border-radius:50%;background:var(--dim)}.api-state.on i{background:var(--ok);box-shadow:0 0 8px var(--ok)}.api-state.off i{background:var(--bad);box-shadow:0 0 8px var(--bad)}.logout{padding:9px 12px;border-radius:8px;cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--muted);font:inherit;font-size:12.5px;transition:color .16s,border-color .16s}.logout:hover{color:var(--bad);border-color:#ff5a5a66}.content{padding:26px 30px 60px;overflow-x:hidden}.page{animation:pageIn .3s cubic-bezier(.22,1,.36,1)}@keyframes pageIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.page-title{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px;flex-wrap:wrap}.page-title h1{margin:0;font-size:25px;letter-spacing:-.01em}.page-sub{margin:5px 0 0;color:var(--muted);font-size:13px}.page-actions{display:flex;gap:8px;align-items:center}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);margin-bottom:16px}.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}.card-head h3{margin:0;font-size:14.5px;font-weight:600}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}@media(max-width:1080px){.grid-2{grid-template-columns:1fr}}.muted{color:var(--muted)}.center{text-align:center}.hint{color:var(--dim);font-size:12px;line-height:1.5;margin:4px 0 10px}code{background:var(--surface-2);padding:1px 5px;border-radius:4px;font-size:12px}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px 8px;position:relative;overflow:hidden;animation:pageIn .4s backwards cubic-bezier(.22,1,.36,1);transition:transform .18s,border-color .18s}.stat:hover{transform:translateY(-2px);border-color:var(--accent-dim)}.stat .label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}.stat .value{font-size:27px;font-weight:650;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.spark{width:100%;height:28px;display:block;margin-top:4px;opacity:.85}.chart svg{width:100%;height:auto;display:block;overflow:visible}.chart-grid{stroke:var(--line-soft);stroke-width:1}.chart-axis{fill:var(--dim);font-size:10px}.chart-cursor{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}.chart-line{stroke-dasharray:2000;stroke-dashoffset:2000;animation:drawLine 1.1s cubic-bezier(.22,1,.36,1) forwards}@keyframes drawLine{to{stroke-dashoffset:0}}.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}.chart-legend span{display:flex;align-items:center;gap:6px}.chart-legend i{width:9px;height:9px;border-radius:3px}.chart-legend b{color:var(--text);font-variant-numeric:tabular-nums}.chart-when{margin-left:auto;color:var(--dim)}.barchart{display:flex;flex-direction:column;gap:9px}.bar-row{display:grid;grid-template-columns:130px 1fr 44px;gap:10px;align-items:center}.bar-label{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-label small{display:block;color:var(--dim);font-size:10.5px}.bar-track{height:9px;background:var(--surface-2);border-radius:5px;overflow:hidden}.bar-fill{height:100%;border-radius:5px;transform-origin:left;animation:growBar .6s cubic-bezier(.22,1,.36,1) backwards}@keyframes growBar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.bar-value{text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px}.funnel{display:flex;flex-direction:column;gap:12px}.funnel-head{display:flex;justify-content:space-between;font-size:12.5px}.funnel-head b{font-variant-numeric:tabular-nums}.funnel-track{height:12px;background:var(--surface-2);border-radius:6px;overflow:hidden;margin-top:5px}.funnel-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),#9db4ff);transform-origin:left;animation:growBar .7s cubic-bezier(.22,1,.36,1) backwards}.funnel-rate{color:var(--dim);font-size:11px;margin-top:4px}table{width:100%;border-collapse:collapse}th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;padding:0 10px 9px;border-bottom:1px solid var(--line-soft)}td{padding:10px;border-bottom:1px solid var(--line-soft);font-size:13px}tbody tr{animation:pageIn .3s backwards;transition:background .14s}tbody tr:hover{background:#ffffff06}.row-actions{display:flex;gap:5px}.badge{display:inline-block;padding:2.5px 8px;border-radius:999px;font-size:10.5px;font-weight:650;letter-spacing:.04em}.badge-active,.badge-paid{background:#3ddc8424;color:var(--ok)}.badge-draft,.badge-pending{background:#ffb54524;color:var(--warn)}.badge-hidden,.badge-cancelled{background:#8b95a724;color:var(--muted)}.badge-refunded{background:#c778ff24;color:#c778ff}.btn{padding:9px 15px;border-radius:9px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;border:1px solid transparent;transition:filter .15s,transform .12s,border-color .15s,background .15s}.btn:active{transform:translateY(1px)}.btn-sm{padding:6px 11px;font-size:12px}.btn-primary{background:linear-gradient(180deg,var(--accent),#4f74f0);color:#fff;box-shadow:0 4px 16px #6c8cff47}.btn-primary:hover{filter:brightness(1.08)}.btn-primary:disabled{opacity:.55;cursor:default}.btn-ghost{background:transparent;border-color:var(--line);color:var(--muted)}.btn-ghost:hover{color:var(--text);border-color:var(--accent-dim)}.btn-danger{background:#ff5a5a1f;border-color:#ff5a5a4d;color:var(--bad)}.btn-danger:hover{background:#ff5a5a33}.icon-btn{width:28px;height:28px;border-radius:7px;cursor:pointer;background:transparent;border:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1;display:grid;place-items:center;transition:color .15s,border-color .15s,background .15s}.icon-btn:hover{color:var(--text);border-color:var(--accent-dim);background:#ffffff0a}.icon-btn.danger:hover{color:var(--bad);border-color:#ff5a5a66}input,select,textarea{width:100%;padding:9px 11px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font:inherit;font-size:13px;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-dim);box-shadow:0 0 0 3px #6c8cff1f}textarea{resize:vertical}.search{width:220px}.field{display:block;margin-bottom:12px}.field>span{display:block;font-size:11px;color:var(--dim);margin-bottom:5px;letter-spacing:.04em;font-weight:600}.field-row{display:flex;gap:10px}.field-row .field{flex:1}.field-sm{max-width:150px}.switch{display:flex;align-items:center;gap:9px;margin-bottom:12px;cursor:pointer;font-size:13px}.switch input{width:16px;height:16px;accent-color:var(--accent)}.seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px}.seg button{padding:6px 12px;border:0;background:transparent;cursor:pointer;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;border-radius:7px;transition:background .15s,color .15s;display:inline-flex;align-items:center;gap:6px}.seg button b{font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}.seg button.on{background:var(--accent);color:#fff}.seg-wide{display:flex;margin-bottom:14px}.seg-wide button{flex:1;justify-content:center}.swatches{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.swatch{width:26px;height:26px;border-radius:7px;cursor:pointer;border:2px solid transparent;transition:transform .14s,border-color .14s}.swatch:hover{transform:scale(1.1)}.swatch.on{border-color:#fff}.color-input{width:42px;height:28px;padding:2px}.card-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.products-layout{display:grid;grid-template-columns:1fr;gap:16px}.products-layout.with-editor{grid-template-columns:minmax(0,1fr) minmax(0,520px)}@media(max-width:1240px){.products-layout.with-editor{grid-template-columns:1fr}}.product-list{display:flex;flex-direction:column;gap:10px}.plist-card{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;animation:pageIn .35s backwards;transition:border-color .16s,transform .16s,box-shadow .16s,opacity .16s}.plist-card:hover{border-color:var(--accent-dim);transform:translateY(-1px)}.plist-card.is-editing{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-dim)}.plist-card.is-dragging{opacity:.4}.plist-card.is-over{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 22px #6c8cff2e}.plist-grip{display:flex;flex-direction:column;gap:3px;cursor:grab;padding:4px}.plist-grip span{display:block;height:2px;border-radius:2px;background:var(--dim)}.plist-card:hover .plist-grip span{background:var(--accent)}.plist-grip:active{cursor:grabbing}.plist-main{cursor:pointer;min-width:0}.plist-top{display:flex;align-items:center;gap:9px}.plist-top h3{margin:0;font-size:15px;font-weight:600}.plist-sub{margin:4px 0 8px;color:var(--muted);font-size:12.5px}.plist-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:7px}.chip{font-size:10.5px;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line-soft)}.chip-accent{color:var(--accent);border-color:var(--accent-dim)}.chip-warn{color:var(--warn);border-color:#ffb54559}.plist-plans{display:flex;gap:6px;flex-wrap:wrap}.mini-plan{font-size:11px;padding:3px 8px;border-radius:6px;background:#6c8cff1a;color:#a9bcff}.plist-actions{display:flex;gap:4px}.editor{position:sticky;top:26px;max-height:calc(100vh - 90px);display:flex;flex-direction:column;padding:0;margin:0;animation:slideLeft .28s cubic-bezier(.22,1,.36,1)}@keyframes slideLeft{0%{opacity:0;transform:translate(18px)}to{opacity:1;transform:none}}.editor-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line-soft)}.editor-head h3{margin:0;font-size:14.5px}.editor-scroll{overflow-y:auto;padding:16px 18px;flex:1}.editor-foot{display:flex;gap:8px;padding:13px 18px;border-top:1px solid var(--line-soft);background:var(--surface-2)}.editor-section{margin:18px 0;padding-top:14px;border-top:1px solid var(--line-soft)}.editor-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.editor-section-head h4{margin:0;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.plan-editor{display:flex;flex-direction:column;gap:7px}.plan-row{display:grid;grid-template-columns:16px minmax(70px,1fr) 78px minmax(110px,1.4fr) 74px auto;gap:6px;align-items:center;padding:7px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line-soft);transition:border-color .15s,transform .15s,opacity .15s}.plan-row.is-dragging{opacity:.4}.plan-row.is-over{border-color:var(--accent);transform:translateY(-2px)}.plan-grip{cursor:grab;color:var(--dim);text-align:center;-webkit-user-select:none;user-select:none}.plan-grip:active{cursor:grabbing}.plan-row input{padding:6px 8px;font-size:12px}.plan-price,.plan-badge{text-align:center}.plan-url{font-size:11.5px}.plan-tools{display:flex;gap:3px}.plan-tools .icon-btn{width:24px;height:24px;font-size:11px}.hl-row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:6px;margin-bottom:7px}.hl-row input{padding:7px 9px;font-size:12px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--surface);border:1px solid var(--accent-dim);color:var(--text);padding:10px 18px;border-radius:10px;box-shadow:var(--shadow);font-size:13px;z-index:50;animation:toastIn .28s cubic-bezier(.22,1,.36,1)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%)}}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:100%;max-width:380px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);animation:pageIn .4s cubic-bezier(.22,1,.36,1)}.login-card h1{margin:0 0 6px;font-size:21px;letter-spacing:.04em}.login-card p{margin:0 0 20px;color:var(--muted);font-size:13px}.error{color:var(--bad);font-size:12.5px;margin-bottom:10px}.form-grid{display:flex;flex-direction:column}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#262c39;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#333a4a}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
