:root{
  color-scheme:light;
  --bg:#f4f6fb;
  --ink:#111827;
  --muted:#667085;
  --line:#e3e8f0;
  --card:#ffffff;
  --shadow:0 18px 50px rgba(18,32,62,.08);
}
*{box-sizing:border-box}
html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
body{margin:0;min-height:100vh;background:
  radial-gradient(circle at 0% 0%,rgba(124,58,237,.06),transparent 34rem),
  radial-gradient(circle at 100% 10%,rgba(14,165,233,.06),transparent 30rem),
  var(--bg)}
button,input{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.eyebrow{margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:.13em;color:#7c3aed}
.muted{color:var(--muted);margin:.35rem 0 0;line-height:1.45}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow)}
.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#111827;color:#fff;font-weight:900;font-size:23px;margin-bottom:22px}
.login-card h1{font-size:28px;margin:0}
.login-card form{display:grid;gap:16px;margin-top:28px}
.login-card label{display:grid;gap:7px;font-size:13px;font-weight:700;color:#344054}
.login-card input{height:48px;border:1px solid #d0d5dd;border-radius:12px;padding:0 13px;outline:none;background:#fff}
.login-card input:focus,.money-field input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.primary{border:0;background:#111827;color:#fff;border-radius:12px;height:48px;font-weight:800}
.form-error,.field-error{min-height:18px;margin:0;color:#c62828;font-size:12px}
.app-shell{width:min(1440px,100%);margin:0 auto;padding:28px 28px 44px}
.topbar{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:22px}
.title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.title-row h1{font-size:28px;margin:0}
.brand-dot{width:12px;height:12px;border-radius:999px;background:#7c3aed;box-shadow:0 0 0 5px rgba(124,58,237,.11)}
.version-badge{font-size:11px;font-weight:800;border-radius:999px;padding:5px 9px;background:#ede9fe;color:#6d28d9}
.subtitle{margin:7px 0 0;color:var(--muted)}
.user-area{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 10px 9px 14px}
.user-area>div{display:grid;text-align:right}
.user-area strong{font-size:12px}
.user-area small{font-size:10px;color:var(--muted)}
.ghost{border:1px solid #d0d5dd;background:#fff;border-radius:9px;padding:8px 11px;font-weight:700;color:#475467}
.market-selector{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
.market-tab{min-height:66px;border:2px solid transparent;border-radius:16px;background:#fff;display:flex;align-items:center;gap:10px;padding:10px 13px;font-weight:800;color:#344054;box-shadow:0 3px 14px rgba(18,32,62,.04);transition:.16s}
.market-tab:hover{transform:translateY(-1px)}
.market-icon{display:grid;place-items:center;min-width:34px;height:34px;border-radius:10px;font-size:11px;font-weight:900;background:#eef2f6;color:#344054}
.market-tab.shopee.active{border-color:#ee4d2d;background:#fff7f4;color:#a52c16}.market-tab.shopee.active .market-icon{background:#ee4d2d;color:#fff}
.market-tab.ml.active{border-color:#ffe600;background:#fffbea;color:#1f2937}.market-tab.ml.active .market-icon{background:#ffe600;color:#111827}
.market-tab.amazon.active{border-color:#ff9900;background:#111827;color:#fff}.market-tab.amazon.active .market-icon{background:#ff9900;color:#111827}
.market-tab.magalu.active{border-color:#0086ff;background:#f2f8ff;color:#075ea7}.market-tab.magalu.active .market-icon{background:#0086ff;color:#fff}
.market-tab.shein.active{border-color:#111;background:#fff;color:#111}.market-tab.shein.active .market-icon{background:#111;color:#fff}
.market-tab.tiktok.active{border-color:#111;background:linear-gradient(135deg,#111827,#050505);color:#fff}.market-tab.tiktok.active .market-icon{background:#25f4ee;color:#111827;box-shadow:8px 0 0 -5px #fe2c55}
.input-panel,.reverse-panel{display:grid;grid-template-columns:minmax(250px,1fr) minmax(280px,430px);gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px;box-shadow:0 8px 30px rgba(18,32,62,.045)}
.input-panel h2,.reverse-panel h2{margin:0;font-size:20px}
.money-field{display:grid;gap:7px}
.money-field>span{font-size:12px;font-weight:800;color:#475467}
.money-field>div{height:62px;border:1px solid #d0d5dd;border-radius:14px;display:flex;align-items:center;background:#fff;overflow:hidden}
.money-field b{padding-left:15px;color:#667085}
.money-field input{min-width:0;flex:1;height:100%;border:0;outline:0;padding:0 14px 0 8px;font-weight:900;font-size:27px;color:#111827;background:transparent}
.money-field.compact>div{height:52px}
.money-field.compact input{font-size:22px}
.results-area{margin:16px 0}
.empty-state{min-height:260px;background:#fff;border:1px dashed #cfd6e2;border-radius:20px;display:grid;place-items:center;align-content:center;text-align:center;padding:30px;color:#667085}
.empty-state h2{color:#344054;margin:10px 0 5px}
.empty-state p{max-width:520px;margin:0}
.empty-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#f2f4f7;font-weight:900;font-size:20px;color:#7c3aed}
.profile-section{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 8px 30px rgba(18,32,62,.045)}
.profile-section+.profile-section{margin-top:14px}
.profile-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:15px}
.profile-head h2{font-size:17px;margin:0}
.profile-head p{font-size:11px;color:var(--muted);margin:4px 0 0}
.profile-chip{white-space:nowrap;font-size:10px;font-weight:800;background:#f2f4f7;color:#475467;border-radius:999px;padding:5px 8px}
.margin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.margin-card{border:1px solid #e4e7ec;border-radius:16px;padding:15px;background:linear-gradient(180deg,#fff,#fbfcfe)}
.margin-card .target{font-size:11px;font-weight:900;letter-spacing:.08em;color:#667085;text-transform:uppercase}
.margin-card .suggested-label{font-size:11px;color:#98a2b3;margin-top:9px}
.margin-card .price{font-size:25px;line-height:1.1;font-weight:900;margin:2px 0 10px;color:#101828}
.breakdown{display:grid;gap:5px}
.breakdown div{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#667085}
.breakdown strong{color:#344054}
.breakdown .profit strong{color:#067647}
.reverse-panel{grid-template-columns:minmax(250px,1fr) minmax(240px,320px);margin-top:16px}
.reverse-results{grid-column:1/-1;display:grid;gap:10px}
.reverse-card{display:grid;grid-template-columns:1.25fr repeat(5,1fr);gap:12px;align-items:center;border:1px solid #e4e7ec;border-radius:14px;padding:13px 15px}
.reverse-card.positive{background:#f0fdf4;border-color:#bbf7d0}.reverse-card.neutral{background:#fffbeb;border-color:#fde68a}.reverse-card.negative{background:#fff1f2;border-color:#fecdd3}
.reverse-card .profile-name{font-weight:800;font-size:12px}
.metric small{display:block;font-size:10px;color:#667085;margin-bottom:2px}
.metric strong{font-size:13px}
.notice{margin-top:16px;border-radius:14px;background:#101828;color:#d0d5dd;padding:13px 16px;display:flex;gap:10px;font-size:11px;line-height:1.5}
.notice strong{color:#fff;white-space:nowrap}
.loading{opacity:.6;pointer-events:none}
@media(max-width:980px){
  .market-selector{grid-template-columns:repeat(3,1fr)}
  .market-option-block{grid-template-columns:1fr 1fr}
  .market-option-block>div:first-child{grid-column:1/-1}
  .margin-grid{grid-template-columns:repeat(2,1fr)}
  .reverse-card{grid-template-columns:1fr 1fr 1fr}
  .reverse-card .profile-name{grid-column:1/-1}
}
@media(max-width:700px){
  .app-shell{padding:18px 14px 32px}
  .topbar{display:grid}
  .user-area{justify-content:space-between}.user-area>div{text-align:left}
  .market-selector{grid-template-columns:1fr 1fr}
  .market-tab{min-height:58px;padding:8px 10px}
  .input-panel,.reverse-panel{grid-template-columns:1fr;padding:18px}
  .market-option-block{grid-template-columns:1fr;padding:18px}
  .ml-weight-fields{grid-template-columns:1fr}
  .market-option-block>div:first-child{grid-column:auto}
  .margin-grid{grid-template-columns:1fr 1fr}
  .profile-head{display:grid}
  .profile-chip{justify-self:start}
  .reverse-card{grid-template-columns:1fr 1fr}
  .notice{display:grid}
}
@media(max-width:430px){
  .market-selector{grid-template-columns:1fr}
  .margin-grid{grid-template-columns:1fr}
  .reverse-card{grid-template-columns:1fr}
}

.market-options{margin:16px 0 0}
.market-option-block{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(210px,300px) minmax(260px,.9fr);gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:0 8px 30px rgba(18,32,62,.045)}
.market-option-block h2{margin:0;font-size:18px}
.percent-field{display:grid;gap:7px}
.percent-field>span{font-size:12px;font-weight:800;color:#475467}
.percent-field>div{height:52px;border:1px solid #d0d5dd;border-radius:12px;display:flex;align-items:center;background:#fff;overflow:hidden}
.percent-field input{min-width:0;flex:1;height:100%;border:0;outline:0;padding:0 10px 0 13px;font-weight:900;font-size:20px;color:#111827;background:transparent}
.percent-field input:focus{box-shadow:inset 0 0 0 2px rgba(124,58,237,.35)}
.percent-field b{padding-right:13px;color:#667085}
.toggle-field{display:flex;align-items:flex-start;gap:10px;border:1px solid #e4e7ec;border-radius:14px;padding:12px 13px;background:#fbfcfe}
.toggle-field input{margin-top:3px;width:18px;height:18px;accent-color:#111827}
.toggle-field span{display:grid;gap:3px}
.toggle-field strong{font-size:12px}
.toggle-field small{font-size:10px;color:#667085;line-height:1.4}
#mlOptions{grid-template-columns:1fr}
#mlOptions .muted{max-width:920px}

.select-field,.compact-field{display:grid;gap:7px}
.select-field>span,.compact-field>span{font-size:12px;font-weight:800;color:#475467}
.select-field select,.compact-field>input,.compact-field>div{height:50px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;color:#111827}
.select-field select{padding:0 12px;font-weight:700}
.compact-field>input{padding:0 12px;font-weight:800}
.compact-field>div{display:flex;align-items:center;overflow:hidden}
.compact-field>div input{min-width:0;flex:1;height:100%;border:0;outline:0;padding:0 10px 0 12px;font-weight:800}
.compact-field>div b{padding-right:12px;color:#667085}
.ml-weight-fields{display:grid;grid-template-columns:minmax(180px,220px) minmax(220px,1fr);gap:12px;align-items:end}
.weight-summary{border:1px solid #e4e7ec;border-radius:14px;padding:11px 13px;background:#fbfcfe;display:grid;gap:3px;min-height:74px}
.weight-summary small{font-size:10px;color:#667085}
.weight-summary strong{font-size:14px}
.weight-summary span{font-size:9px;line-height:1.35;color:#7b8495}
.ml-weight-fields>.field-error{grid-column:1/-1}