/* Levr — styles for the sub-pages: /coin/<tic>, /create, /docs.
   Loaded after styles.css, which supplies the tokens and shared chrome. */

/* ---------- shared page shell ---------- */
.page{max-width:960px;margin:0 auto;padding:16px 16px 40px;display:flex;flex-direction:column;gap:16px}
.page-wide{max-width:1240px}
.backlink{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--dim);
  padding:4px 0;
}
.backlink svg{width:13px;height:13px}
.backlink:hover{color:var(--text)}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--accent)}
.page-title{margin:10px 0 0;font-size:30px;font-weight:900;letter-spacing:-.7px;line-height:1.15}
.page-sub{margin:10px 0 0;max-width:640px;font-size:13px;line-height:1.65;color:var(--muted)}
.pad{padding:16px}
.pad-lg{padding:44px 24px}
.mb{display:block;margin-bottom:12px}
.center-text{text-align:center}
.block-label{display:block;margin:18px 0 8px}
.muted-note{margin:12px 0 0;font-size:11px;line-height:1.6;color:var(--dim)}
.muted-note.warn{color:var(--amber)}
.accent{color:var(--accent)}
.mono-sm{font-family:var(--mono);font-size:10px;color:var(--muted);word-break:break-all}
.lev.is-pending{background:rgba(255,255,255,.05);color:var(--dim)}

/* ---------- coin: head card ---------- */
.coin-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:18px;
}
.coin-head-left{display:flex;align-items:center;gap:14px;min-width:0}
.coin-head-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.coin-h1{margin:0;font-size:22px;font-weight:900;letter-spacing:-.4px}
.coin-head-tic{margin-top:3px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.coin-head-right{text-align:right}
.coin-head-under{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px}
.coin-head-sym{font-family:var(--mono);font-size:15px;font-weight:700}

/* ---------- coin: price feed ---------- */
.feed{height:380px;background:#0f0e18;border-bottom:1px solid var(--line)}
.feed-frame{width:100%;height:100%;border:0;display:block}
.feed-pending{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:20px;
}
.feed-pending-title{font-size:14px;font-weight:700;color:var(--muted)}
.feed-pending-sub{font-size:11px;color:var(--dim);max-width:320px;line-height:1.6}
.feed-foot{
  padding:11px;text-align:center;background:#0b0a12;
  font-size:10px;font-style:italic;letter-spacing:.1em;color:var(--dim);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.feed-foot b{font-style:normal;color:var(--muted)}

/* ---------- coin: trade + stats ---------- */
.coin-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.coin-col{display:flex;flex-direction:column;gap:16px}
.side-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.side{
  padding:12px;border-radius:var(--r);cursor:pointer;
  background:rgba(25,22,35,.5);border:1px solid var(--line);color:var(--muted);
  font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.1em;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.side:hover{color:var(--text);border-color:#3a3654}
.side-buy.is-active{background:var(--up);border-color:var(--up);color:#0b1a12}
.side-sell.is-active{background:var(--down);border-color:var(--down);color:#1c0c0c}
.amount{
  display:flex;align-items:center;gap:10px;margin-top:10px;
  background:rgba(25,22,35,.5);border:1px solid var(--line);border-radius:var(--r);
  padding:0 12px;
}
.amount input{
  flex:1;min-width:0;height:42px;border:0;background:transparent;outline:none;
  color:var(--text);font-family:var(--mono);font-size:14px;
}
.amount input::placeholder{color:var(--dim)}
.amount:focus-within{border-color:rgba(202,150,255,.45)}
.amount-unit{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.quick-btn{
  padding:9px;border-radius:var(--r);cursor:pointer;
  background:rgba(25,22,35,.5);border:1px solid var(--line);color:var(--muted);
  font-family:var(--mono);font-size:11px;
}
.quick-btn:hover{color:var(--text);border-color:#3a3654}
.place{margin-top:12px;border-radius:var(--r)}
.place-sell{background:var(--down);border-color:var(--down);color:#1c0c0c}
.place-sell:hover{background:#ff8585;border-color:#ff8585}
.stat{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line-soft);
}
.stat:last-child{border-bottom:0}
.stat-k{font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--dim)}
.stat-v{font-family:var(--mono);font-size:12px;font-weight:700;text-align:right}
.linkrow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;margin-top:8px;font-size:12px;
  background:rgba(25,22,35,.5);border:1px solid var(--line);border-radius:var(--r);
}
a.linkrow:hover{border-color:rgba(202,150,255,.45);color:var(--accent)}
.linkrow-ico svg{width:12px;height:12px}

/* ---------- create ---------- */
.create-intro{margin-bottom:4px}
.create-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.create-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.create-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--topbar-h) + 16px)}
.step-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.step-n{
  display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;
  background:rgba(196,147,255,.14);border:1px solid rgba(202,150,255,.35);
  color:var(--accent);font-size:11px;font-weight:800;
}
.step-title{margin:0;font-size:15px;font-weight:800}
.step-sub{margin:3px 0 0;font-size:11px;color:var(--dim)}

.dir-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dir-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:16px;text-align:left;cursor:pointer;
  background:rgba(25,22,35,.4);border:1px solid var(--line);border-radius:var(--r-lg);
  font-family:var(--sans);color:var(--text);
  transition:border-color .16s ease,background .16s ease;
}
.dir-card:hover{border-color:#3a3654}
.dir-card.is-active{background:rgba(203,151,255,.06);border-color:rgba(202,150,255,.5)}
.dir-name{font-size:19px;font-weight:900;letter-spacing:.12em}
.dir-long{color:var(--up)}
.dir-short{color:var(--down)}
.dir-desc{font-size:11px;line-height:1.55;color:var(--muted)}
.tag{font-size:9px;font-weight:800;letter-spacing:.1em;padding:3px 8px;border-radius:var(--r)}
.tag-long{background:rgba(54,235,141,.14);color:var(--up)}
.tag-short{background:rgba(255,107,107,.14);color:var(--down)}
.dir-check{position:absolute;top:14px;right:14px;width:15px;height:15px;color:var(--accent);opacity:0}
.dir-card.is-active .dir-check{opacity:1}

.field-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 8px}
.count{font-family:var(--mono);font-size:9px;color:var(--dim)}
.mini-search{
  width:130px;height:26px;padding:0 9px;
  background:rgba(25,22,35,.5);border:1px solid var(--line);border-radius:var(--r);
  color:var(--text);font-family:var(--sans);font-size:11px;outline:none;
}
.mini-search::placeholder{color:var(--dim)}
.mini-search:focus{border-color:rgba(202,150,255,.45)}

.asset-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;
  max-height:270px;overflow-y:auto;padding-right:4px;
}
.asset-grid::-webkit-scrollbar{width:6px}
.asset-grid::-webkit-scrollbar-thumb{background:#33304a;border-radius:99px}
.asset{
  position:relative;display:flex;align-items:center;gap:9px;padding:10px 11px;
  background:rgba(25,22,35,.4);border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;text-align:left;font-family:var(--sans);color:var(--text);
  transition:border-color .16s ease,background .16s ease;
}
.asset:hover{border-color:#3a3654}
.asset.is-active{background:rgba(203,151,255,.08);border-color:rgba(202,150,255,.5)}
.asset-mid{min-width:0;flex:1}
.asset-sym{font-family:var(--mono);font-size:11px;font-weight:700}
.asset-ch{font-family:var(--mono);font-size:9px;font-weight:700;margin-top:2px}
.asset-ch.is-pending{
  font-family:var(--sans);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.asset-check{opacity:0;color:var(--accent)}
.asset-check svg{width:13px;height:13px}
.asset.is-active .asset-check{opacity:1}

.lev-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lev-btn{
  padding:12px;border-radius:var(--r);cursor:pointer;
  background:rgba(25,22,35,.5);border:1px solid var(--line);color:var(--muted);
  font-family:var(--mono);font-size:13px;font-weight:700;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.lev-btn:hover{color:var(--text);border-color:#3a3654}
.lev-btn.is-active{background:rgba(203,151,255,.14);border-color:rgba(202,150,255,.5);color:var(--accent)}

.pair-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding:13px 14px;
  background:rgba(25,22,35,.5);border:1px solid var(--line);border-radius:var(--r);
}
.pair-left{display:flex;align-items:center;gap:9px;min-width:0}
.pair-text{font-family:var(--mono);font-size:12px;font-weight:700}
.pair-ch{font-family:var(--mono);font-size:11px;font-weight:700}
.pair-ch.is-pending{font-family:var(--sans);font-weight:400;color:var(--dim)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row{min-width:0}
.input{
  width:100%;height:42px;padding:0 12px;
  background:rgba(25,22,35,.5);border:1px solid var(--line);border-radius:var(--r);
  color:var(--text);font-family:var(--sans);font-size:13px;outline:none;
}
.input::placeholder{color:var(--dim)}
.input:focus{border-color:rgba(202,150,255,.45)}
.textarea{height:auto;padding:11px 12px;line-height:1.55;resize:vertical}
.dropzone{display:block;cursor:pointer}
.dropzone-inner{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:24px 14px;text-align:center;
  background:rgba(25,22,35,.4);border:1px dashed var(--line);border-radius:var(--r);
  font-size:11px;color:var(--dim);
  transition:border-color .16s ease,color .16s ease;
}
.dropzone-inner svg{width:15px;height:15px}
.dropzone:hover .dropzone-inner{border-color:rgba(202,150,255,.45);color:var(--muted)}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}

.preview-head{display:flex;align-items:center;gap:11px}
.preview-name{font-size:14px;font-weight:800;line-height:1.2}
.preview-tic{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:2px}
.preview-pair{
  display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 11px;
  background:rgba(25,22,35,.5);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:11px;font-weight:700;
}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.preview-cell{
  padding:10px 8px;text-align:center;
  background:rgba(25,22,35,.4);border:1px solid var(--line);border-radius:var(--r);
}
.preview-v{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent)}
.preview-k{font-size:8px;font-weight:800;letter-spacing:.1em;color:var(--dim);margin-top:3px}
.preview-addr{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding:9px 11px;
  background:rgba(25,22,35,.4);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:11px;
}
.preview-note{margin:12px 0 0;font-size:11px;line-height:1.6;color:var(--muted)}

.how{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.how li{display:flex;align-items:flex-start;gap:10px;font-size:11px;line-height:1.6;color:var(--muted)}
.how-n{
  display:grid;place-items:center;flex:none;width:19px;height:19px;border-radius:50%;
  background:rgba(196,147,255,.12);color:var(--accent);
  font-family:var(--mono);font-size:9px;font-weight:700;
}

/* ---------- docs ---------- */
.doc{max-width:720px}
.doc-lede{margin:16px 0 0;font-size:15px;line-height:1.7;color:var(--muted)}
.doc h2{
  margin:38px 0 0;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--accent);
  padding-bottom:9px;border-bottom:1px solid var(--line);
}
.doc p{margin:14px 0 0;font-size:14px;line-height:1.75;color:var(--muted)}
.doc p b,.doc li b{color:var(--text);font-weight:700}
.doc ul,.doc-steps{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.doc li{font-size:14px;line-height:1.7;color:var(--muted)}
.doc ul li::marker{color:var(--accent)}
.doc-steps li::marker{color:var(--accent);font-weight:700}
.doc-formula{
  font-family:var(--mono)!important;font-size:12px!important;line-height:1.8!important;
  padding:15px 16px;border-radius:var(--r);
  background:rgba(25,22,35,.6);border:1px solid var(--line);color:var(--muted);
}
.doc-warn{
  padding:14px 16px;border-radius:var(--r);
  background:rgba(255,181,28,.07);border:1px solid rgba(255,181,28,.28);
  color:var(--amber)!important;font-size:13px!important;
}
.doc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .create-cols{grid-template-columns:minmax(0,1fr)}
  .create-side{position:static}
}
@media (max-width:720px){
  .coin-cols{grid-template-columns:minmax(0,1fr)}
  .dir-cards,.form-grid{grid-template-columns:minmax(0,1fr)}
  .lev-row{grid-template-columns:repeat(2,1fr)}
  .page-title{font-size:24px}
  .coin-head{flex-direction:column;align-items:flex-start}
  .coin-head-right{text-align:left}
  .coin-head-under{justify-content:flex-start}
  .feed{height:280px}
  .form-actions{flex-direction:column-reverse}
  .form-actions .btn{width:100%}
}