-
{title}
+const Ic = ({ n, s=16, c }) => (
+
+);
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// ATOMS
+// ═══════════════════════════════════════════════════════════════════════════════
+const css = `
+ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=JetBrains+Mono:wght@400;600&display=swap');
+ *{box-sizing:border-box;margin:0;padding:0}
+ body{background:#07080a;color:#e8eaed;-webkit-font-smoothing:antialiased}
+ ::-webkit-scrollbar{width:4px;height:4px}
+ ::-webkit-scrollbar-track{background:#111}
+ ::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:2px}
+ select option{background:#161920}
+ input::placeholder,textarea::placeholder{color:#3a3f4a}
+ input:focus,textarea:focus,select:focus{outline:none!important;border-color:#4f6ef7!important}
+ tr:hover>td{background:#0f1118!important}
+ @media(max-width:767px){
+ .hide-mobile{display:none!important}
+ .mob-full{width:100%!important}
+ .mob-stack{flex-direction:column!important}
+ .mob-p{padding:16px!important}
+ .mob-grid1{grid-template-columns:1fr!important}
+ .mob-grid2{grid-template-columns:1fr 1fr!important}
+ .mob-fs13{font-size:13px!important}
+ .mob-fs22{font-size:22px!important}
+ }
+`;
+
+const Tag = ({label,color,bg})=>(
+
{label}
+);
+const PlanTag = ({plan})=>{const p=PLANS[plan]||PLANS.trial_week;return
;};
+
+const Btn = ({children,onClick,v="primary",sm,full,disabled,style:s={}})=>{
+ const st={
+ primary:{bg:R.accent,color:"#fff",bo:R.accent},
+ ghost:{bg:"transparent",color:R.muted,bo:R.border2},
+ danger:{bg:`${R.red}15`,color:R.red,bo:`${R.red}40`},
+ success:{bg:`${R.green}15`,color:R.green,bo:`${R.green}40`},
+ warning:{bg:`${R.yellow}15`,color:R.yellow,bo:`${R.yellow}40`},
+ orange:{bg:`${R.orange}15`,color:R.orange,bo:`${R.orange}40`},
+ purple:{bg:`${R.purple}15`,color:R.purple,bo:`${R.purple}40`},
+ cyan:{bg:`${R.cyan}15`,color:R.cyan,bo:`${R.cyan}40`},
+ }[v]||{bg:R.surface,color:R.muted,bo:R.border2};
+ return(
+
+ );
+};
+
+const F = ({label,children,style:s={}})=>(
+
+ {label&&}
+ {children}
+
+);
+const baseInput = {width:"100%",background:R.surface,border:`1px solid ${R.border2}`,borderRadius:8,padding:"9px 12px",color:R.text,fontSize:13,fontFamily:"'JetBrains Mono'"};
+const Inp = ({label,...p})=>;
+const Sel = ({label,children,...p})=>;
+const Txa = ({label,...p})=>