/* ============================================================
   MIO - Pages interactives top-level
   ============================================================ */

.mio-fade{animation:mioFade .28s ease both}
@keyframes mioFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.mio-actionbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.mio-actionbar .left,.mio-actionbar .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.mio-soft-panel{background:linear-gradient(135deg,#fff 0%,#FBFCFF 100%);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.mio-panel-glow{position:relative;overflow:hidden}
.mio-panel-glow::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 0,rgba(33,69,230,.08),transparent 32%),radial-gradient(circle at 92% 15%,rgba(244,80,28,.08),transparent 26%);pointer-events:none}
.mio-panel-glow>*{position:relative}

.mio-chip-btn{border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:700;color:var(--text);display:inline-flex;align-items:center;gap:7px;transition:all .16s ease}
.mio-chip-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.mio-chip-btn.on{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}

.fit-grid{display:grid;grid-template-columns:280px minmax(0,1fr) 360px;gap:16px;margin-bottom:18px;align-items:stretch}
.cmp-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.cmp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cmp-card.sel{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft),var(--shadow)}
.cmp-card .flag-big{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--border);overflow:hidden;flex:none}
.cmp-card .flag-big .mio-flag{width:42px!important;height:31px!important;border-radius:0!important;box-shadow:none!important}
.cmp-score-row{display:flex;align-items:baseline;gap:5px;margin-top:13px}
.cmp-score-row b{font-size:31px;color:var(--blue);line-height:1}
.cmp-score-row small{font-size:13px;color:var(--muted);font-weight:700}
.cmp-total-row td{background:#F8FAFF}
.cmp-total-row td.best{background:linear-gradient(180deg,#EEF2FE,#F7F9FF)}

.radar-wrap{min-height:350px;display:grid;place-items:center}
.radar{max-width:100%;height:auto;overflow:visible}
.radar .axis{stroke:#DDE4F2;stroke-width:1}
.radar .ring{fill:none;stroke:#E7ECF5;stroke-width:1}
.radar .poly{fill-opacity:.08;stroke-width:2.2;transition:opacity .2s ease}
.radar .poly:hover{fill-opacity:.16}
.radar text{font-family:inherit;font-size:11px;fill:var(--text);font-weight:700}
.radar .legend text{font-size:10.5px;fill:var(--muted)}

.mio-rec-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.mio-rec-card .winner{font-size:30px;line-height:1.08;color:var(--ink)}
.mio-rec-card .score-pill{align-self:flex-start;background:var(--green-soft);color:var(--green);border-radius:10px;padding:9px 13px;font-weight:800}
.mio-rec-card .reason{display:flex;gap:11px;font-size:12.5px;line-height:1.45;color:var(--text)}
.mio-rec-card .reason .r-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);flex:none}

.decomp-panel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.decomp-panel .piece{min-width:100px;text-align:center;font-size:11px;color:var(--muted);flex:1}
.decomp-panel .piece .ic{color:var(--blue);margin-bottom:6px}
.decomp-panel .piece b{display:block;font-size:18px;color:var(--blue);margin-top:3px}
.decomp-panel .op{font-weight:800;color:var(--muted)}
.decomp-panel .total{border:1px solid var(--border);border-radius:14px;padding:13px 17px;text-align:center;background:#fff}
.decomp-panel .total b{display:block;font-size:23px;color:var(--blue)}

.chat-wrap{max-width:940px}
.msg .bubble.generating{min-width:160px}
.ai-block .risk-num{width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;flex:none;margin-top:1px}
.ai-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px}
.ai-actions button{background:none;border:none;color:var(--muted);padding:6px;border-radius:8px}
.ai-actions button:hover{background:var(--bg);color:var(--blue)}
.chat-input .attach{width:34px;height:34px;border-radius:50%;border:none;background:var(--bg);color:var(--text);display:grid;place-items:center}
.chat-input .attach:hover{color:var(--blue);background:var(--blue-soft)}

.ctx-card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.ctx-card .ctx-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.ctx-card .ctx-head h3{font-size:15px}
.ctx-safe{display:flex;gap:10px;align-items:flex-start;background:var(--blue-soft);border-radius:12px;padding:13px;margin-top:8px;font-size:12px;color:var(--ink)}
.ctx-safe .ic{color:var(--blue);flex:none;margin-top:1px}

.dna-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.dna-list{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.dna-row{padding:18px 22px;transition:background .16s ease}
.dna-row:hover{background:#FAFBFE}
.dna-row .end .mio-flag{width:24px!important;height:18px!important;border-radius:50%!important}
.dna-score-card{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:24px}
.dna-score-card .score{font-size:42px;font-weight:800;color:var(--blue);line-height:1}
.dna-score-card .score small{font-size:17px;color:var(--muted)}
.dna-progress{height:8px;background:#E9EEF7;border-radius:999px;overflow:hidden;margin:15px 0}
.dna-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#4B6BFF);border-radius:999px;transition:width .7s ease}
.dna-mini-box{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:20px}
.dna-mini-box h3{font-size:15px;margin-bottom:12px}
.dna-reco{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--text)}
.dna-reco:last-child{border-bottom:none}
.dna-reco .r-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);flex:none}
.dna-reco b{display:block;color:var(--ink);font-size:13px}
.dna-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.textarea-xl{min-height:110px!important}

@media(max-width:1180px){
  .dna-shell{grid-template-columns:1fr}
  .fit-grid{grid-template-columns:1fr}
  .cmp-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .cmp-cards{grid-template-columns:1fr}
  .mio-actionbar{align-items:flex-start}
  .mio-actionbar .right{width:100%}
  .mio-actionbar .right .btn{flex:1}
  .dna-editor-grid{grid-template-columns:1fr}
}