/* EASYCONVERTEASY v18.0 */
:root { --primary:#2563eb; --accent:#16a34a; --bg:#f8fafc; --card:#ffffff; --text:#0f172a; --sub:#64748b; --input:#f8fafc; --border:#e2e8f0; }
body.dark-mode { --primary:#3b82f6; --bg:#0f172a; --card:#1e293b; --text:#f1f5f9; --sub:#94a3b8; --input:#334155; --border:#334155; }
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; padding:20px; transition:0.3s; overscroll-behavior-y:none; }
.wrapper { max-width:900px; margin:0 auto; padding-bottom:80px; }
a { text-decoration:none; color:inherit; transition:0.2s; }
header { text-align:center; margin-bottom:30px; position:relative; }
.brand-lockup { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px; }
.logo-svg { width:42px; height:42px; filter:drop-shadow(0 2px 4px rgba(37,99,235,0.2)); }
h1 { font-weight:900; font-size:2rem; letter-spacing:-0.03rem; line-height:1; }
.subtitle { color:var(--sub); font-size:1rem; font-weight:500; }
.theme-toggle { position:absolute; top:0; right:0; background:none; border:none; font-size:1.5rem; cursor:pointer; opacity:0.7; }
/* NAV */
.tool-hub { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:30px; position:sticky; top:10px; z-index:100; }
.hub-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--card); padding:12px 2px; border-radius:12px; border:1px solid var(--border); box-shadow:0 4px 6px -1px rgba(0,0,0,0.05); font-weight:700; font-size:0.75rem; color:var(--sub); transition:0.1s; text-align:center; height:100%; backdrop-filter:blur(10px); opacity:0.95; }
.hub-btn.active { background:#eff6ff; border-color:var(--primary); color:var(--primary); opacity:1; }
body.dark-mode .hub-btn.active { background:#1e3a8a; color:#60a5fa; }
.hub-btn:hover { transform:translateY(-2px); color:var(--primary); }
/* CARDS */
.card { background:var(--card); padding:25px; border-radius:20px; border:1px solid var(--border); box-shadow:0 10px 20px -5px rgba(0,0,0,0.1); margin-bottom:30px; }
.border-profit { border-top:5px solid var(--accent); } .border-sourcing { border-top:5px solid #8b5cf6; }
.border-listing { border-top:5px solid #ec4899; } .border-unit { border-top:5px solid var(--text); }
.border-ship { border-top:5px solid var(--primary); } .border-guide { border-top:5px solid #d97706; }
.border-calc { border-top:5px solid #6366f1; } .border-business { border-top:5px solid #06b6d4; }
.input-row { display:flex; gap:15px; margin-bottom:20px; } .col { flex:1; min-width:130px; position:relative; }
label { display:flex; justify-content:space-between; font-size:0.75rem; font-weight:800; color:var(--sub); margin-bottom:6px; text-transform:uppercase; }
input, select { width:100%; padding:14px; border:2px solid var(--border); border-radius:12px; font-size:1.1rem; background:var(--input); color:var(--text); font-weight:600; transition:0.2s; -webkit-appearance:none; inputmode:decimal; }
input:focus, select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.2); }
/* BUTTONS */
.btn-main { width:100%; padding:18px; border:none; border-radius:12px; font-size:1.1rem; font-weight:800; color:white; background:linear-gradient(to bottom right,var(--primary),#1d4ed8); box-shadow:0 4px 0 #1e40af; cursor:pointer; touch-action:manipulation; margin-bottom:15px; display:block; text-align:center; }
.btn-main:active { transform:translateY(4px); box-shadow:none; }
.btn-green { background:linear-gradient(to bottom right,var(--accent),#15803d); box-shadow:0 4px 0 #14532d; }
/* EXTRA UI */
.result-box { margin-top:25px; padding:20px; border-radius:12px; display:none; background:rgba(0,255,0,0.05); border:1px solid var(--accent); }
.result-row { display:flex; justify-content:space-between; margin-bottom:8px; font-size:1rem; }
.big-money { font-size:2rem; font-weight:900; }
.help-icon { display:inline-block; width:16px; height:16px; background:var(--sub); color:var(--card); border-radius:50%; text-align:center; line-height:16px; font-size:10px; cursor:help; margin-left:5px; }
.help-icon:hover::after { content:attr(data-tip); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#0f172a; color:white; padding:5px 10px; border-radius:6px; font-size:0.7rem; white-space:nowrap; z-index:10; margin-bottom:5px; }
.calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.calc-btn { padding:15px; border:none; border-radius:8px; font-size:1.4rem; font-weight:700; background:var(--input); color:var(--text); box-shadow:0 4px 0 var(--border); cursor:pointer; }
.calc-btn:active { transform:translateY(4px); box-shadow:none; }
/* METER */
.meter-wrapper{position:relative;width:260px;height:130px;margin:0 auto 20px;overflow:hidden;}
.meter-bg{width:260px;height:130px;border-radius:130px 130px 0 0;background:conic-gradient(from 180deg at 50% 100%,#ef4444 0deg,#eab308 90deg,#22c55e 135deg,#3b82f6 160deg);}
.meter-needle{position:absolute;bottom:0;left:50%;width:4px;height:120px;background:var(--text);transform-origin:bottom center;transform:rotate(-90deg);transition:0.5s cubic-bezier(0.34,1.56,0.64,1);z-index:2;}
.meter-hub{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:30px;height:30px;background:var(--text);border-radius:50%;z-index:3;}
.status-text{text-align:center;font-weight:700;margin-top:5px;font-size:0.9rem;height:1.2rem;}
.char-count{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:2.5rem;font-weight:900;color:var(--text);z-index:4;text-shadow:2px 2px 0 var(--bg);}
/* FOOTER */
footer { text-align:center; border-top:1px solid var(--border); padding-top:30px; font-size:0.8rem; color:var(--sub); }
.footer-links a { margin:0 8px; font-weight:600; }
.legal-text { font-size:0.75rem; opacity:0.7; margin-top:10px; }
.tool-promo { display:flex; align-items:center; justify-content:center; gap:10px; background:rgba(252,211,77,0.1); border:2px dashed #fcd34d; padding:15px; border-radius:10px; margin:25px 0; color:#92400e; font-weight:700; font-size:0.95rem; }
.seo-content h2 { margin-top:30px; font-size:1.4rem; border-bottom:2px solid var(--border); padding-bottom:10px; }
@media print { .tool-hub,.theme-toggle,.btn-main,.tool-promo,footer { display:none!important; } body { background:white; color:black; } .card { box-shadow:none; border:1px solid black; } }
@media(max-width:700px){ body{padding:10px 5px;} .tool-hub{gap:4px;} .hub-btn{padding:10px 2px;font-size:0.7rem;} }