:root{
      --bg: #0c0f14; /* near-black */
      --panel: #121621;
      --muted: #9aa4b2;
      --text: #e9edf3;
      --brand: #66e3ff; /* cyan */
      --brand-2: #7b5cff; /* violet */
      --accent: #24d18b; /* green */
      --danger: #ff5c7a; /* pinkish */
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 16px;
      --radius-lg: 24px;
      --max: 1160px;
    }
 
    a{color:var(--brand); text-decoration:none}
    a:hover{opacity:.9}
  
    
  
    li{
      list-style: none;
    }
    .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
 
    .crumbs{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px}
    .crumbs a{color:var(--muted)}

    /* Layout */
    .grid{display:grid; grid-template-columns: 280px 1fr; gap:28px}
    aside{position:sticky; top:74px; align-self:start}
    .panel{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); box-shadow:var(--shadow); margin-top: 25px;}
    .toc{padding:16px}

    .toc ul{list-style:none; margin:0; padding:0}
    .toc li{margin:6px 0}
    .toc a{display:block; padding:8px 10px; border-radius:10px; color:#cfd6e0}
    .toc a:hover{background:rgba(255,255,255,.05)}

    main.article{display:block}
    section.block{margin:26px 0; padding:20px; background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius)}
   
    section.block p{margin:0 0 12px; color:#dbe2ec}

    /* Tabs */
    .tabs{display:flex; gap:8px; margin:4px 0 14px}
    .tab{padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#dfe7f2; cursor:pointer; font-weight:600; font-size:14px}
    .tab.active{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#0b0f14}

    /* List / Item cards */
    .list{display:grid; gap:12px}
    .item{display:grid; grid-template-columns: 52px 1fr auto; align-items:center; gap:14px; padding:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); border-radius:14px}
    .badge{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:#081019; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:0 10px 24px rgba(123,92,255,.3)}
    .meta{font-size:13px; color:var(--muted)}
    .chip{display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#cfd6e0; font-size:12px}

    /* Table */
    .table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.08)}
    .table th, .table td{padding:12px 14px; text-align:left}
    .table thead th{background:rgba(255,255,255,.06); font-size:13px; color:#cfd6e0; letter-spacing:.3px; text-transform:uppercase}
    .table tbody tr{border-top:1px solid rgba(255,255,255,.06)}
    .table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}



    /* Prose */
    .prose p{color:#dbe2ec}
    .tip{display:flex; gap:10px; align-items:flex-start; background:rgba(36,209,139,.08); border:1px solid rgba(36,209,139,.25); padding:12px 14px; border-radius:12px}

    /* Footer CTA */
    .cta-box{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px; border-radius:16px; background:linear-gradient(135deg, rgba(102,227,255,.08), rgba(123,92,255,.08)); border:1px solid rgba(255,255,255,.1)}
    .cta-box input{flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--text); padding:12px 14px; border-radius:12px; outline:none}

    /* Utilities */
    .muted{color:var(--muted)}
    .space-s{height:8px}
    .space-m{height:16px}
    .space-l{height:24px}
    .label{font-size:12px; color:var(--muted); letter-spacing:.3px; text-transform:uppercase}

    /* Responsive */
    @media (max-width: 1024px){
      .hero-wrap{grid-template-columns:1fr}
      .grid{grid-template-columns:1fr}
      aside{position:relative; top:auto}
      .grid{
        display: flex;
        flex-direction: column;
      }
      .table{
        display: none;
      }
      .badge{
        /* display: none; */
      }
      .item{
        grid-template-columns: none;
      }
      #order-chrono .list{
        padding-left: 0;
      }
    }