.legacy{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;font-size:15px;}
.legacy header{
      padding:32px 28px 20px;
      display:flex;
      gap:20px;
      align-items:center;
      border-bottom:1px solid var(--border);
      background:var(--surface);
    }
.legacy .brand{
      display:flex;
      flex-direction:column;
    }
.legacy .brand h1{
      margin:0;
      font-size:24px;
      letter-spacing:0.3px;
      color:var(--text);
    }
.legacy .brand p{
      margin:6px 0 0;
      color:var(--muted);
      font-size:14px;
    }
.legacy .container{display:grid;grid-template-columns:340px 1fr;gap:28px;}
.legacy nav.sidebar{
      background: var(--surface);
      padding: 20px;
      border-radius: 14px;
      height: calc(100vh - 200px);
      overflow: auto;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }
.legacy .toc{
      list-style:none;
      padding:0;
      margin:12px 0;
    }
.legacy .toc li{
      margin:8px 0;
    }
.legacy .toc a{
      color:var(--text);
      text-decoration:none;
      font-size:15px;
      font-weight:500;
      display:block;
      padding:10px 12px;
      border-radius:8px;
      transition:all 0.2s;
    }
.legacy .toc a:hover{
      background:var(--accent-lt);
      color:var(--accent);
    }
.legacy .toc a.active{
      background:var(--accent-lt);
      color:var(--accent);
      font-weight:600;
      border-left:3px solid var(--accent);
    }
.legacy .legacy-main{
      padding:24px;
      border-radius:14px;
      background:var(--surface);
      border:1px solid var(--border);
      min-height:60vh;
    }
.legacy button.copy{
      background:var(--surface);
      border:1px solid var(--border);
      padding:8px 12px;
      border-radius:8px;
      color:var(--muted);
      cursor:pointer;
      font-size:13px;
      transition:all 0.2s;
    }
.legacy button.copy:hover{
      background:var(--accent-lt);
      color:var(--text);
    }
.legacy button.copy:active{
      transform:translateY(1px);
    }
.legacy .modal-overlay{
      display:none;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0, 0, 0, 0.5);
      backdrop-filter:blur(4px);
      z-index:1000;
      align-items:center;
      justify-content:center;
      padding:20px;
    }
.legacy .modal-overlay.active{
      display:flex;
    }
.legacy .modal-content{
      background:var(--surface);
      border-radius:16px;
      border:1px solid var(--border);
      box-shadow:var(--shadow-lg);
      max-width:900px;
      width:100%;
      max-height:90vh;
      overflow-y:auto;
      position:relative;
    }
.legacy .modal-header{
      padding:24px 28px;
      border-bottom:1px solid var(--border);
      position:sticky;
      top:0;
      background:var(--surface);
      z-index:10;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
.legacy .modal-header h2{
      margin:0;
      font-size:22px;
      color:var(--text);
    }
.legacy .modal-header p{
      margin:6px 0 0;
      color:var(--muted);
      font-size:14px;
    }
.legacy .modal-close{
      background:var(--surface);
      border:1px solid var(--border);
      color:var(--text);
      font-size:24px;
      width:40px;
      height:40px;
      border-radius:8px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:all 0.2s;
    }
.legacy .modal-close:hover{
      background:var(--accent-lt);
      border-color:var(--border);
    }
.legacy .modal-body{
      padding:28px;
    }
.legacy .modal-table{
      width:100%;
      border-collapse:collapse;
      margin-top:14px;
    }
.legacy .modal-table th, .legacy .modal-table td{
      padding:12px 14px;
      text-align:left;
      border-bottom:1px solid var(--border);
    }
.legacy .modal-table th{
      font-size:13px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:0.06em;
      font-weight:600;
    }
.legacy .modal-table td.code{
      font-family: var(--mono);
      background: var(--bg);
      border-radius: 6px;
      font-size: 14px;
    }
.legacy .modal-table .hl-startup{ color:#15803d; }
.legacy .modal-table .hl-active{ color:#92400e; }
.legacy .modal-table .hl-recovery{ color:#b91c1c; }
.legacy .modal-table .hl-plus{ color:var(--accent); }
.legacy .modal-table .hl-minus{ color:#b91c1c; }
.legacy .combo-card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:10px;
      padding:16px;
      transition:all 0.2s;
      cursor:pointer;
    }
.legacy .combo-card:hover{
      background:var(--accent-lt);
      border-color:var(--accent);
      transform:translateY(-2px);
    }
.legacy .combo-card .combo-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:10px;
    }
.legacy .combo-card .combo-title{
      font-size:15px;
      font-weight:600;
      color:var(--text);
      font-family:var(--mono);
    }
.legacy .combo-card .difficulty-badge{
      padding:4px 10px;
      border-radius:999px;
      font-size:11px;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:0.5px;
    }
.legacy .combo-card .difficulty-badge.basico{
      background:#dcfce7;
      color:#15803d;
      border:1px solid #bbf7d0;
    }
.legacy .combo-card .difficulty-badge.intermediario{
      background:#fef9c3;
      color:#92400e;
      border:1px solid #fef08a;
    }
.legacy .combo-card .difficulty-badge.avancado{
      background:#fee2e2;
      color:#b91c1c;
      border:1px solid #fecaca;
    }
.legacy .combo-card .combo-notation{
      font-family:var(--mono);
      font-size:13px;
      color:var(--accent);
      margin-bottom:8px;
      background:var(--accent-lt);
      padding:8px;
      border-radius:6px;
      border:1px solid var(--border);
    }
.legacy .combo-card .combo-info{
      display:flex;
      gap:16px;
      margin-top:10px;
      font-size:12px;
    }
.legacy .combo-card .combo-info-item{
      display:flex;
      align-items:center;
      gap:4px;
      color:var(--muted);
    }
.legacy .combo-card .combo-info-item strong{
      color:var(--text);
    }
.legacy .combo-card .combo-notes{
      margin-top:10px;
      padding-top:10px;
      border-top:1px solid var(--border);
      font-size:13px;
      color:var(--muted);
      line-height:1.5;
    }
.legacy .content-section{
      display:none;
    }
.legacy .content-section.active{
      display:block;
    }
.legacy .feature-card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:12px;
      padding:28px;
      transition:all 0.3s;
      cursor:pointer;
    }
.legacy .feature-card:hover{
      background:var(--accent-lt);
      border-color:var(--accent);
      transform:translateY(-4px);
      box-shadow:var(--shadow-md);
    }
.legacy select{
      background:var(--surface) !important;
      color:var(--text) !important;
      border:1px solid var(--border) !important;
      padding:10px !important;
      border-radius:8px !important;
      font-size:14px !important;
    }
.legacy select option{
      background:var(--surface) !important;
      color:var(--text) !important;
      padding:8px !important;
    }
.legacy select:focus{
      outline:none;
      border-color:var(--accent) !important;
      box-shadow:0 0 0 2px var(--accent-lt);
    }
@media (max-width: 880px){.legacy .container{grid-template-columns:1fr;}.legacy .sidebar{
        height: auto;
      }.legacy .modal-content{
        max-height:95vh;
        margin:10px;
      }.legacy .modal-body{
        padding:20px;
      }}
/* extra: sf6 */
.legacy .modal-table .hl-startup { color: var(--c-startup); }
.legacy .modal-table .hl-active { color: var(--c-active); }
.legacy .modal-table .hl-recovery, .legacy .modal-table .hl-minus { color: var(--c-recovery); }