/* ================================================================
   DeepSeek Mac Installer v2 — Styles
   All selectors scoped to .dsmi2 to avoid theme bleed.
   ================================================================ */

/* ---- Custom properties ---------------------------------------- */
.dsmi2 {
    --acc:        var(--dsmi2-accent, #0f62fe);
    --acc-dim:    color-mix(in srgb, var(--acc) 15%, transparent);
    --bg:         #0d0d0d;
    --bg2:        #161616;
    --bg3:        #1f1f1f;
    --border:     #2a2a2a;
    --border2:    #333;
    --text:       #e8e8e8;
    --text2:      #a0a0a0;
    --text3:      #636363;
    --fast:       #24a148;
    --fast-bg:    #0d2117;
    --bal:        #0f62fe;
    --bal-bg:     #061433;
    --pow:        #d4a017;
    --pow-bg:     #251d05;
    --cod:        #8a3ffc;
    --cod-bg:     #1a0d33;
    --radius:     10px;
    --radius-sm:  6px;
    font-family:  "SF Mono", "Fira Code", ui-monospace, Consolas, monospace;
    background:   var(--bg);
    color:        var(--text);
    border-radius: var(--radius);
    border:       1px solid var(--border);
    overflow:     hidden;
    max-width:    860px;
    margin:       2rem auto;
}

/* ---- Tabs ----------------------------------------------------- */
.dsmi2-tabs {
    display:     flex;
    border-bottom: 1px solid var(--border);
    background:  var(--bg);
}
.dsmi2-tab {
    font-family:  inherit;
    font-size:    .82rem;
    letter-spacing: .04em;
    padding:      .85rem 1.4rem;
    background:   transparent;
    border:       none;
    border-bottom: 2px solid transparent;
    color:        var(--text2);
    cursor:       pointer;
    display:      flex;
    align-items:  center;
    gap:          6px;
    transition:   color .15s, border-color .15s;
}
.dsmi2-tab:hover { color: var(--text); }
.dsmi2-tab--active {
    color:        var(--text);
    border-bottom-color: var(--acc);
}
.dsmi2-tab-icon { font-size: .88rem; }

/* ---- Panels --------------------------------------------------- */
.dsmi2-panel { padding: 1.75rem 2rem; }
.dsmi2-panel--hidden { display: none; }

/* ---- Install hero --------------------------------------------- */
.dsmi2-install-hero { margin-bottom: 1.5rem; }
.dsmi2-heading {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size:   1.45rem;
    font-weight: 600;
    color:       var(--text);
    margin:      0 0 .4rem;
    letter-spacing: -.01em;
}
.dsmi2-sub {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:   .88rem;
    color:       var(--text2);
    margin:      0;
}

/* ---- Filter chips --------------------------------------------- */
.dsmi2-filter-row {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px;
    margin-bottom: 1.1rem;
}
.dsmi2-chip {
    font-family: inherit;
    font-size:   .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:     4px 14px;
    border-radius: 20px;
    border:      1px solid var(--border2);
    background:  transparent;
    color:       var(--text2);
    cursor:      pointer;
    transition:  background .12s, color .12s, border-color .12s;
}
.dsmi2-chip:hover { border-color: #555; color: var(--text); }
.dsmi2-chip--on {
    background:  var(--acc);
    border-color: var(--acc);
    color:       #fff;
}

/* ---- Model grid ----------------------------------------------- */
.dsmi2-model-grid {
    display:    grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:        8px;
    margin-bottom: 1.4rem;
}
.dsmi2-card {
    background:   var(--bg2);
    border:       1px solid var(--border);
    border-radius: var(--radius);
    padding:      14px 16px;
    cursor:       pointer;
    transition:   border-color .15s, background .15s;
}
.dsmi2-card:hover { border-color: var(--border2); background: var(--bg3); }
.dsmi2-card--sel {
    border-color: var(--acc) !important;
    background:   var(--acc-dim) !important;
}
.dsmi2-card-name {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:   .85rem;
    font-weight: 600;
    color:       var(--text);
    margin:      0 0 6px;
}
.dsmi2-badge {
    display:     inline-block;
    font-size:   .65rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding:     2px 9px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.dsmi2-badge--fast    { background: var(--fast-bg);  color: var(--fast); }
.dsmi2-badge--balanced{ background: var(--bal-bg);   color: var(--bal);  }
.dsmi2-badge--power   { background: var(--pow-bg);   color: var(--pow);  }
.dsmi2-badge--coder   { background: var(--cod-bg);   color: var(--cod);  }
.dsmi2-card-meta {
    font-size:  .72rem;
    color:      var(--text3);
    line-height: 1.5;
    margin:     0;
}

/* ---- One-click install block ---------------------------------- */
.dsmi2-install-block {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           1rem;
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       1.1rem 1.4rem;
    margin-bottom: 1.2rem;
    flex-wrap:     wrap;
}
.dsmi2-install-label {
    font-size:   .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:       var(--text3);
    margin:      0 0 2px;
}
.dsmi2-install-model-name {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:   1rem;
    font-weight: 600;
    color:       var(--text);
    margin:      0 0 2px;
}
.dsmi2-install-meta {
    font-size:  .75rem;
    color:      var(--text2);
    margin:     0;
}
.dsmi2-btn-install {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:   .88rem;
    font-weight: 600;
    padding:     10px 22px;
    border-radius: var(--radius-sm);
    background:  var(--acc);
    color:       #fff !important;
    text-decoration: none !important;
    border:      none;
    cursor:      pointer;
    transition:  opacity .15s, transform .1s;
    white-space: nowrap;
    flex-shrink: 0;
}
.dsmi2-btn-install:hover { opacity: .88; transform: translateY(-1px); }
.dsmi2-btn-install[aria-disabled="true"] {
    background:  var(--bg3);
    color:       var(--text3) !important;
    cursor:      not-allowed;
    pointer-events: none;
    border:      1px solid var(--border);
}
.dsmi2-btn-icon { font-size: 1.1rem; line-height: 1; }

/* ---- Details / accordion -------------------------------------- */
.dsmi2-details {
    border:       1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: .8rem;
    overflow:     hidden;
}
.dsmi2-details-summary {
    font-size:   .8rem;
    letter-spacing: .03em;
    color:       var(--text2);
    padding:     .75rem 1rem;
    cursor:      pointer;
    list-style:  none;
    background:  var(--bg2);
    user-select: none;
}
.dsmi2-details-summary::-webkit-details-marker { display: none; }
.dsmi2-details-summary::before {
    content:    "▸ ";
    color:      var(--acc);
    transition: transform .15s;
}
.dsmi2-details[open] .dsmi2-details-summary::before { content: "▾ "; }
.dsmi2-details-summary:hover { color: var(--text); }

/* ---- Steps ---------------------------------------------------- */
.dsmi2-steps {
    list-style:  none;
    counter-reset: dsmi2-steps;
    padding:     1rem;
    margin:      0;
    background:  var(--bg);
}
.dsmi2-steps li {
    counter-increment: dsmi2-steps;
    display:     flex;
    gap:         10px;
    align-items: flex-start;
    font-size:   .8rem;
    color:       var(--text2);
    padding:     7px 0;
    border-bottom: 1px solid var(--border);
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.dsmi2-steps li:last-child { border-bottom: none; }
.dsmi2-steps li::before {
    content:    counter(dsmi2-steps);
    font-size:  .65rem;
    font-weight: 700;
    min-width:  20px;
    height:     20px;
    border-radius: 50%;
    background: var(--bg3);
    display:    flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color:      var(--acc);
    margin-top: 1px;
}
.dsmi2-icode {
    font-family: inherit;
    font-size:   .72rem;
    background:  var(--bg3);
    padding:     2px 8px;
    border-radius: 4px;
    color:       var(--text);
    display:     inline-block;
    margin-top:  4px;
    word-break:  break-all;
    border:      1px solid var(--border2);
}

/* ---- Script preview ------------------------------------------- */
.dsmi2-script-wrap {
    background:  #000;
    padding:     1rem;
    overflow-x:  auto;
}
.dsmi2-script {
    font-family: inherit;
    font-size:   .72rem;
    color:       #7ec8a0;
    line-height: 1.7;
    white-space: pre;
    margin:      0;
}

/* ================================================================
   DOCS PANEL
   ================================================================ */
.dsmi2-docs-layout {
    display:     grid;
    grid-template-columns: 200px 1fr;
    gap:         2rem;
    align-items: start;
}
@media (max-width: 600px) {
    .dsmi2-docs-layout { grid-template-columns: 1fr; }
    .dsmi2-docs-nav    { display: flex; flex-wrap: wrap; gap: 6px; }
}

/* Sidebar */
.dsmi2-docs-nav {
    position:   sticky;
    top:        1rem;
    display:    flex;
    flex-direction: column;
    gap:        2px;
}
.dsmi2-docs-navlink {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:  .78rem;
    color:      var(--text2) !important;
    text-decoration: none !important;
    padding:    .45rem .65rem;
    border-radius: var(--radius-sm);
    display:    flex;
    align-items: center;
    gap:        8px;
    transition: background .12s, color .12s;
    border:     1px solid transparent;
}
.dsmi2-docs-navlink:hover {
    background: var(--bg3);
    color:      var(--text) !important;
    border-color: var(--border);
}
.dsmi2-docs-navicon { font-size: .8rem; opacity: .6; }

/* Sections */
.dsmi2-doc-section {
    margin-bottom: 2.5rem;
    scroll-margin-top: 1rem;
}
.dsmi2-doc-heading {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:  1rem;
    font-weight: 600;
    color:      var(--text);
    margin:     0 0 .9rem;
    display:    flex;
    align-items: center;
    gap:        8px;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
}
.dsmi2-doc-icon { opacity: .5; font-size: .9rem; }
.dsmi2-doc-body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size:  .85rem;
    color:      var(--text2);
    line-height: 1.75;
}
.dsmi2-doc-body p  { margin: 0 0 .85rem; }
.dsmi2-doc-body strong { color: var(--text); font-weight: 600; }
.dsmi2-doc-body a  { color: var(--acc); text-decoration: underline; }
.dsmi2-doc-body code {
    font-family: inherit;
    font-size:  .78rem;
    background: var(--bg3);
    padding:    1px 7px;
    border-radius: 4px;
    color:      var(--text);
    border:     1px solid var(--border2);
}
.dsmi2-doc-body kbd {
    font-family: inherit;
    font-size:  .75rem;
    background: var(--bg3);
    padding:    1px 7px;
    border-radius: 4px;
    border:     1px solid var(--border2);
    color:      var(--text2);
}
.dsmi2-doc-body pre.dsmi2-code {
    background:  #000;
    border:      1px solid var(--border);
    border-radius: var(--radius-sm);
    padding:     1rem 1.1rem;
    overflow-x:  auto;
    font-family: "SF Mono", "Fira Code", ui-monospace, Consolas, monospace;
    font-size:   .76rem;
    color:       #7ec8a0;
    line-height: 1.7;
    margin:      .6rem 0 1rem;
    white-space: pre;
}

/* Tables */
.dsmi2-doc-table {
    width:          100%;
    border-collapse: collapse;
    font-size:      .78rem;
    margin:         .6rem 0 1rem;
}
.dsmi2-doc-table th,
.dsmi2-doc-table td {
    text-align:   left;
    padding:      .5rem .75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.dsmi2-doc-table th {
    font-size:   .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:       var(--text3);
    background:  var(--bg2);
}
.dsmi2-doc-table tr:hover td { background: var(--bg3); }

/* Definition list (troubleshooting) */
.dsmi2-dl { margin: 0; }
.dsmi2-dl dt {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    color:       var(--text);
    font-size:   .82rem;
    margin:      1rem 0 .25rem;
    padding-left: .6rem;
    border-left: 2px solid var(--acc);
}
.dsmi2-dl dt:first-child { margin-top: 0; }
.dsmi2-dl dd {
    margin: 0 0 .5rem .6rem;
    font-size: .8rem;
    color: var(--text2);
    line-height: 1.65;
}

/* ---- Responsive ----------------------------------------------- */
@media (max-width: 520px) {
    .dsmi2-panel         { padding: 1.2rem 1rem; }
    .dsmi2-model-grid    { grid-template-columns: 1fr 1fr; }
    .dsmi2-install-block { flex-direction: column; align-items: flex-start; }
    .dsmi2-btn-install   { width: 100%; justify-content: center; }
}