:root{
    --bg:#0d1712;
    --panel:#152218;
    --panel-2:#1b2c1f;
    --border:#2d4433;
    --text:#e9f3ea;
    --muted:#87a692;
    --accent:#8bc53f;
    --accent-dim:#3f6b26;
    --warn:#e0a458;
    --warn-dim:#7a5a30;
    --danger:#d97757;
    --mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Liberation Mono", monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse 1200px 700px at 15% -10%, rgba(139,197,63,0.10), transparent 60%),
      radial-gradient(ellipse 900px 600px at 100% 10%, rgba(63,107,38,0.14), transparent 55%),
      var(--bg);
    color:var(--text); font-family:var(--sans);
    min-height:100vh;
  }
  header{
    padding:22px 28px 18px; border-bottom:1px solid var(--border);
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
    background:linear-gradient(180deg, rgba(139,197,63,0.06), transparent);
  }
  header h1{
    font-size:19px; letter-spacing:0.08em; text-transform:uppercase; margin:0;
    font-weight:800; color:var(--text);
  }
  header h1 span{color:var(--accent);}
  header .sub{color:var(--muted); font-size:13px;}
  .page-nav{
    display:flex; gap:2px; padding:0 28px; background:var(--panel); border-bottom:1px solid var(--border);
  }
  .page-nav-btn{
    background:none; border:none; border-bottom:2px solid transparent; color:var(--muted);
    font-family:var(--sans); font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase;
    padding:12px 16px; cursor:pointer;
  }
  .page-nav-btn:hover{color:var(--text);}
  .page-nav-btn.active{color:var(--accent); border-bottom-color:var(--accent); font-weight:700;}
  .tier-badge{
    font-family:var(--mono); font-size:11px; padding:2px 9px; border-radius:10px; font-weight:700;
    display:inline-block; min-width:18px; text-align:center;
  }
  .tier-1{background:rgba(139,197,63,0.15); color:#a8d968; border:1px solid rgba(139,197,63,0.4);}
  .tier-2{background:rgba(224,164,88,0.15); color:var(--warn); border:1px solid var(--warn-dim);}
  .tier-3{background:rgba(217,119,87,0.15); color:var(--danger); border:1px solid rgba(217,119,87,0.4);}
  .tier-4{background:rgba(160,120,220,0.15); color:#b89ce8; border:1px solid rgba(160,120,220,0.4);}
  .tier-5{background:rgba(90,160,220,0.15); color:#8ec4ea; border:1px solid rgba(90,160,220,0.4);}
  .power-badge{
    font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; display:inline-block;
  }
  .power-fuel{background:rgba(217,119,87,0.15); color:var(--danger); border:1px solid rgba(217,119,87,0.4);}
  .power-mech{background:rgba(224,164,88,0.15); color:var(--warn); border:1px solid var(--warn-dim);}
  .power-elec{background:rgba(90,160,220,0.15); color:#8ec4ea; border:1px solid rgba(90,160,220,0.4);}

  .wiki-result{
    display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer; border-radius:4px;
    font-size:13px;
  }
  .wiki-result:hover{background:var(--panel-2);}
  .wiki-cat{
    font-size:10px; padding:1px 7px; border-radius:8px; background:var(--panel-2); color:var(--muted);
    border:1px solid var(--border); white-space:nowrap;
  }
  .wiki-link{
    color:var(--accent); cursor:pointer; text-decoration:underline; text-decoration-style:dotted;
  }
  .wiki-link:hover{color:var(--text);}
  .wiki-section{margin-bottom:18px;}
  .wiki-section h3{
    font-size:11.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); font-weight:600;
    margin:0 0 8px; border-bottom:1px solid var(--border); padding-bottom:6px;
  }
  .wiki-title{font-size:20px; font-weight:800; margin:0 0 4px;}
  .wiki-meta-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center;}
  .layout{
    display:grid; grid-template-columns:300px 1fr; gap:0; min-height:calc(100vh - 66px);
  }
  @media (max-width: 880px){ .layout{grid-template-columns:1fr;} }

  .sidebar{
    border-right:1px solid var(--border); padding:20px; background:var(--panel);
    display:flex; flex-direction:column; gap:16px; max-height:calc(100vh - 66px); overflow:auto;
  }
  .section-label{
    font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted);
    display:flex; align-items:center; gap:8px; margin-bottom:2px;
  }
  .section-label::before{content:""; width:6px; height:6px; background:var(--accent); display:inline-block;}

  .btnrow{display:flex; gap:8px;}
  button{
    font-family:var(--sans); font-size:12.5px; background:var(--panel-2); color:var(--text);
    border:1px solid var(--border); padding:6px 10px; border-radius:3px; cursor:pointer;
  }
  button:hover{border-color:var(--accent); color:var(--accent);}
  button.primary{background:var(--accent-dim); border-color:var(--accent); color:#f2ffe0;}
  button.primary:hover{background:var(--accent);}
  input[type=text], input[type=number], select{
    font-family:var(--sans); font-size:13px; background:var(--bg); color:var(--text);
    border:1px solid var(--border); padding:7px 9px; border-radius:3px; width:100%;
  }
  input:focus, select:focus{outline:none; border-color:var(--accent);}

  .station-search{margin-bottom:2px;}
  .station-list{
    display:flex; flex-direction:column; gap:1px; max-height:340px; overflow:auto;
    border:1px solid var(--border); border-radius:4px; background:var(--bg);
  }
  .station-row{
    display:flex; align-items:center; gap:8px; padding:6px 9px; font-size:12.5px;
    border-bottom:1px solid var(--border); cursor:pointer;
  }
  .station-row:last-child{border-bottom:none;}
  .station-row:hover{background:var(--panel-2);}
  .station-row input{width:auto;}
  .upgrade-select{
    font-size:10.5px; padding:2px 5px; max-width:130px; background:var(--bg);
    color:var(--accent); border:1px solid var(--accent-dim); border-radius:3px;
  }
  .station-count{color:var(--muted); font-family:var(--mono); font-size:11px;}

  main{padding:24px 28px; overflow:auto;}
  .card{
    background:var(--panel); border:1px solid var(--border); border-radius:6px;
    padding:18px 20px; margin-bottom:20px;
  }
  .card h2{
    font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 14px;
    color:var(--muted); font-weight:600;
    display:flex; align-items:center; justify-content:space-between;
  }
  .corner-tag{
    font-family:var(--mono); font-size:10.5px; color:var(--accent); border:1px solid var(--accent-dim);
    padding:2px 6px; border-radius:3px;
  }

  .add-row{display:flex; gap:8px; margin-bottom:12px;}
  .add-row input[type=text]{flex:1;}
  .add-row input[type=number]{width:100px;}

  table{width:100%; border-collapse:collapse; font-size:13px;}
  th{
    text-align:left; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--muted); font-weight:600; padding:6px 10px; border-bottom:1px solid var(--border);
  }
  td{padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  .num{font-family:var(--mono); text-align:right; tabular-nums:1;}
  .tag{
    font-size:10.5px; padding:2px 7px; border-radius:10px; font-family:var(--mono);
    display:inline-block;
  }
  .tag-raw{background:rgba(139,197,63,0.14); color:var(--accent); border:1px solid var(--accent-dim);}
  .tag-crafted{background:rgba(137,150,163,0.1); color:var(--muted); border:1px solid var(--border);}
  .tag-blocked{background:rgba(224,164,88,0.13); color:var(--warn); border:1px solid var(--warn-dim);}
  .tag-covered{background:rgba(139,197,63,0.24); color:#f2ffe0; border:1px solid var(--accent);}
  .remove-btn{background:none; border:none; color:var(--muted); cursor:pointer; font-size:15px; padding:0 6px;}
  .remove-btn:hover{color:var(--danger);}
  .empty{color:var(--muted); font-size:13px; padding:8px 2px;}
  .helptext{color:var(--muted); font-size:12px; line-height:1.5; margin-top:8px;}
  .tabs{display:flex; gap:4px; margin-bottom:14px;}
  .tab{
    padding:7px 13px; font-size:12.5px; border:1px solid var(--border); border-bottom:none;
    border-radius:4px 4px 0 0; cursor:pointer; color:var(--muted); background:var(--panel-2);
  }
  .tab.active{color:var(--text); background:var(--bg); border-color:var(--accent-dim);}
  .tabpanel{display:none;}
  .tabpanel.active{display:block;}
  select.recipe-override{font-size:11.5px; padding:3px 6px;}
  .footer-note{color:var(--muted); font-size:11.5px; margin-top:26px; line-height:1.6; border-top:1px solid var(--border); padding-top:14px;}
  ::-webkit-scrollbar{width:9px; height:9px;}
  ::-webkit-scrollbar-thumb{background:var(--border); border-radius:5px;}
  ::-webkit-scrollbar-track{background:transparent;}

  .tree-root{border:1px solid var(--border); border-radius:5px; margin-bottom:14px; overflow:hidden;}
  .tree-node{}
  .tree-line{
    display:flex; align-items:center; gap:8px; padding:6px 10px; font-size:13px;
    border-bottom:1px solid var(--border); background:var(--bg);
  }
  .tree-root > .tree-node > .tree-line{background:var(--panel-2); font-weight:600;}
  .tree-children{margin-left:22px; border-left:1px dashed var(--border);}
  .tree-toggle{
    width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--muted); font-size:10px; flex-shrink:0; user-select:none;
  }
  .tree-toggle.leaf{visibility:hidden;}
  .tree-name{flex:1;}
  .tree-qty{font-family:var(--mono); color:var(--text); min-width:70px; text-align:right;}
  .tree-meta{color:var(--muted); font-size:11.5px; font-family:var(--mono);}
  .tree-children.collapsed{display:none;}
  .tree-line-match{background:rgba(139,197,63,0.16); border-left:2px solid var(--accent); margin-left:-2px;}
  .tree-line-match .tree-name{color:var(--accent); font-weight:700;}