/* ---------- Tokens ---------- */
:root{
  --bg:#f6f7fb; --bg-soft:#eef0f6; --surface:#ffffff;
  --border:#e5e8f1; --border-strong:#d6dbeb;
  --text:#161922; --muted:#5c6575; --muted-2:#8b92a3;
  --accent:#0e87a8; --accent-strong:#0b6f8c; --accent-soft:rgba(14,135,168,.13);
  --accent-2:#0b8456;
  --shadow:0 1px 2px rgba(22,25,34,.05),0 10px 30px rgba(22,25,34,.07);
  --radius:16px; --radius-sm:10px;
  --font: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-head: "Pixelify Sans", var(--font);
  --mark-bg:#0f1117;
}
[data-theme="dark"]{
  --bg:#0b0d12; --bg-soft:#0f1219; --surface:#141824;
  --border:#242b3c; --border-strong:#313a50;
  --text:#e9ecf5; --muted:#9aa2b5; --muted-2:#6f7890;
  --accent:#00b3d6; --accent-strong:#39d9f0; --accent-soft:rgba(0,179,214,.16);
  --accent-2:#10b981;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.45);
  --mark-bg:#0a0c11;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; transition:background .25s,color .25s;
}
a{color:inherit; text-decoration:none;}
main{max-width:1456px; margin:0 auto; padding:0 20px;}

.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 20; vertical-align:middle;}
h1,h2,h3,h4,.brand-name{font-family:var(--font-head); letter-spacing:normal;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font:600 .95rem/1 var(--font); padding:.72rem 1.15rem; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; transition:transform .12s,box-shadow .12s,background .15s,color .15s,border-color .15s;
  min-height:46px;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 6px 18px var(--accent-soft);}
.btn-primary:hover{filter:brightness(1.05);}
.btn-primary:disabled{opacity:.55; cursor:not-allowed; filter:none;}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border-strong);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-block{width:100%; margin-top:1rem;}
.icon-btn{background:var(--surface); border:1px solid var(--border); color:var(--muted); width:40px; height:40px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}
.icon-btn:hover{color:var(--accent); border-color:var(--border-strong);}
.icon-btn.small{width:32px; height:32px;}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  max-width:1456px; margin:0 auto; padding:14px 20px;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:inline-flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.12rem; letter-spacing:-.3px;}
.brand-logo{width:27px; height:27px; display:block;}
.nav{display:flex; gap:1.1rem; margin-left:auto;}
.nav a{color:var(--muted); font-weight:500; font-size:.95rem; padding:.35rem .15rem; border-bottom:2px solid transparent;}
.nav a:hover{color:var(--text); border-color:var(--accent);}
.navbar-actions{display:flex; align-items:center; gap:.6rem;}

/* ---------- Hero ---------- */
.hero{text-align:center; padding:56px 20px 44px;}
.hero-logo{width:72px; height:72px; margin:0 auto 14px; display:block;
  animation:float 5s ease-in-out infinite; filter:drop-shadow(0 10px 22px rgba(0,210,255,.28));}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero .pill{display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:.35rem .8rem; border-radius:999px; margin-bottom:18px;}
.hero h1{font-size:clamp(2rem, 5vw, 3.5rem); font-weight:900; letter-spacing:-1.5px; margin:0 0 14px; line-height:1.08;}
.hero h1 .grad{background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{color:var(--muted); font-size:1.12rem; max-width:600px; margin:0 auto 26px;}

/* ---------- Card / Converter ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow);}
.converter{overflow:hidden;}
.mode-tabs{display:flex; gap:.4rem; padding:14px 18px 0; border-bottom:1px solid var(--border);}
.mode-tab{background:none; border:none; display:inline-flex; align-items:center; gap:.45rem; font:600 .95rem/1 var(--font); color:var(--muted); padding:.7rem 1rem; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.mode-tab:hover{color:var(--text);}
.mode-tab.active{color:var(--accent); border-color:var(--accent);}
.split{display:grid; grid-template-columns:2fr 3fr; gap:0;}
.panel-pane{padding:22px; min-width:0;}
.split-left{border-right:1px solid var(--border);}
.pane-title{margin:0 0 16px; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2);}
.mode-pane{min-height:150px;}

/* Dropzone */
.dropzone{
  border:2px dashed var(--border-strong); border-radius:14px; padding:38px 20px;
  text-align:center; cursor:pointer; transition:border-color .15s,background .15s,transform .1s;
}
.dropzone:hover,.dropzone.drag{border-color:var(--accent); background:var(--accent-soft); transform:scale(1.01);}
.dz-icon{font-size:40px; color:var(--accent);}
.dz-title{font-weight:700; margin:.4rem 0 .1rem;}
.dz-sub{color:var(--muted); font-size:.9rem; margin:0;}
.file-meta{display:flex; align-items:center; gap:.7rem; background:var(--bg-soft); border:1px solid var(--border); border-radius:12px; padding:.6rem .8rem; margin-top:.6rem;}
.file-meta .file-icon{color:var(--accent);}
.file-info{display:flex; flex-direction:column; min-width:0;}
.file-info strong{font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.file-info small{color:var(--muted); font-size:.78rem;}
.file-meta .icon-btn{margin-left:auto; flex-shrink:0;}
.chips{display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:14px;}
.chips span{font-size:.74rem; color:var(--muted); border:1px solid var(--border); background:var(--bg-soft); padding:.2rem .6rem; border-radius:999px;}

.field-label{display:block; font-size:.85rem; font-weight:600; margin-bottom:.45rem; color:var(--muted);}
.text-input{width:100%; padding:.8rem .9rem; font:400 .95rem/1.3 var(--font); color:var(--text); background:var(--bg-soft); border:1px solid var(--border-strong); border-radius:var(--radius-sm); outline:none; transition:border-color .15s,box-shadow .15s;}
.text-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}

.error{color:#e0566b; background:rgba(224,86,107,.1); border:1px solid rgba(224,86,107,.3); border-radius:var(--radius-sm); padding:.65rem .8rem; font-size:.9rem; margin-top:.8rem;}

/* Result */
.result-empty{border:2px dashed var(--border); border-radius:14px; padding:56px 20px; text-align:center; color:var(--muted-2);}
.result-empty .material-symbols-outlined{font-size:42px;}
.result-empty p{margin:.3rem 0 0; font-size:.92rem;}
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-bottom:12px;}
.metric{background:var(--bg-soft); border:1px solid var(--border); border-radius:12px; padding:.55rem .5rem; text-align:center;}
.metric b{display:block; font-size:1.25rem; font-weight:800;}
.metric span{font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.preview-toggle{display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; margin:6px 0 12px;}
.preview-toggle button{background:none; border:none; font:600 .9rem/1 var(--font); padding:.5rem .95rem; color:var(--muted); cursor:pointer;}
.preview-toggle button + button{border-left:1px solid var(--border-strong);}
.preview-toggle button.activated{background:var(--accent-soft); color:var(--accent);}
.preview{border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem; max-height:420px; overflow:auto; background:var(--mark-bg); color:#e6e8f0; font-size:.92rem;}
.source{width:100%; min-height:300px; resize:vertical; border:1px solid var(--border); border-radius:12px; padding:1rem; background:var(--mark-bg); color:#e6e8f0; font:400 .88rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;}
.result-actions{display:flex; gap:.6rem; margin-top:14px; flex-wrap:wrap;}
.result-actions .btn{flex:1; min-width:140px;}

/* ---------- Sections ---------- */
.section{margin:64px 0;}
.section-title{text-align:center; font-size:1.7rem; font-weight:800; letter-spacing:-.5px; margin:0 0 22px;}
.format-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;}
.format-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.1rem 1.2rem; box-shadow:var(--shadow);}
.format-card .material-symbols-outlined{color:var(--accent);}
.format-card h3{margin:.5rem 0 .2rem; font-size:1rem;}
.format-card p{color:var(--muted); font-size:.86rem; margin:0;}

.steps{list-style:none; margin:0 auto; max-width:720px; padding:0; display:flex; flex-direction:column; gap:12px;}
.step{display:flex; gap:1rem; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.1rem 1.3rem; box-shadow:var(--shadow);}
.step b{flex-shrink:0; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); font-weight:800;}
.step p{color:var(--muted); margin:0;}
.step strong{color:var(--text);}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--border); margin-top:56px; padding:26px 20px 34px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6rem;}
.fork-text{color:var(--muted); font-size:.9rem;}
.fork-icon{display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:14px; transition:color .15s, border-color .15s, transform .12s, box-shadow .15s;}
.fork-icon:hover{color:var(--accent); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 22px var(--accent-soft);}
.fork-icon svg{display:block;}

/* ---------- Markdown body ---------- */
.markdown-body h1,.markdown-body h2,.markdown-body h3{line-height:1.25;}
.markdown-body code{background:rgba(255,255,255,.12); padding:.12em .35em; border-radius:5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.markdown-body pre{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:.9rem; border-radius:10px; overflow:auto;}
.markdown-body pre code{background:none; padding:0;}
.markdown-body a{color:var(--accent);}
.markdown-body blockquote{border-left:3px solid #4a4f5e; margin:0; padding-left:1rem; color:#aab0bf;}
.markdown-body table{border-collapse:collapse;}
.markdown-body th,.markdown-body td{border:1px solid #3a4152; padding:.4rem .6rem;}
.markdown-body img{max-width:100%;}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .split{grid-template-columns:1fr;}
  .split-left{border-right:none; border-bottom:1px solid var(--border);}
  .nav{display:none;}
}
@media (max-width:480px){
  .metrics{grid-template-columns:repeat(2,1fr);}
  .hero{padding-top:44px;}
}