:root{
    --bg:#070b16;
    --bg2:#0d1426;
    --panel:#111a30;
    --panel2:#0b1222;
    --line:#233252;
    --text:#e8eefc;
    --muted:#93a4c4;
    --accent:#7c5cff;
    --accent2:#22d3ee;
    --danger:#ff5c7a;
    --warn:#ffb454;
    --ok:#34d399;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:
      radial-gradient(900px 500px at 15% -10%, rgba(124,92,255,.22), transparent 60%),
      radial-gradient(800px 500px at 100% 0%, rgba(34,211,238,.13), transparent 55%),
      var(--bg);
    color:var(--text); font-family:var(--sans); line-height:1.55;
  }
  a{color:var(--accent2); text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px}
  .topbar{
    position:sticky; top:0; z-index:20; backdrop-filter:blur(14px);
    background:rgba(7,11,22,.78); border-bottom:1px solid var(--line);
  }
  .topbar .wrap{display:flex; align-items:center; gap:18px; height:64px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
  .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 14px var(--danger)}
  nav{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
  nav a{color:var(--muted); font-size:.92rem; font-weight:600}
  nav a:hover{color:var(--text); text-decoration:none}
  .btn{
    border:1px solid var(--line); background:linear-gradient(180deg,#17233d,#111a30);
    color:var(--text); padding:10px 15px; border-radius:10px; font:inherit; font-weight:700;
    cursor:pointer; transition:.18s ease; display:inline-flex; align-items:center; gap:8px;
  }
  .btn:hover{transform:translateY(-1px); border-color:#3b5280}
  .btn.primary{background:linear-gradient(135deg,var(--accent),#4f46e5); border-color:transparent; box-shadow:0 10px 30px rgba(124,92,255,.28)}
  .btn.ghost{background:transparent}
  .btn:disabled{opacity:.45; cursor:wait; transform:none}
  .btn.small{padding:7px 11px; font-size:.82rem}
  .hero{padding:78px 0 44px}
  .eyebrow{display:flex; align-items:center; gap:10px; color:var(--accent2); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:.75rem}
  h1{font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.02; margin:18px 0 16px; letter-spacing:-.04em}
  h1 .grad{background:linear-gradient(90deg,#fff 0%,#bda9ff 45%,#7ce7ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
  .lede{max-width:760px; color:var(--muted); font-size:1.13rem}
  .badges{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 0}
  .badge{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(17,26,48,.75); font-size:.82rem; font-weight:700; color:#c8d6f2}
  .badge.red{border-color:rgba(255,92,122,.5); color:#ffb3c1; background:rgba(255,92,122,.08)}
  .badge.green{border-color:rgba(52,211,153,.45); color:#a7f3d0; background:rgba(52,211,153,.08)}
  .badge.amber{border-color:rgba(255,180,84,.45); color:#ffd9a8; background:rgba(255,180,84,.08)}
  .notice{
    margin:30px 0 0; padding:14px 16px; border-left:3px solid var(--warn);
    background:rgba(255,180,84,.07); color:#ffe2b8; border-radius:0 10px 10px 0; font-size:.92rem;
  }
  section{padding:46px 0}
  .section-head{display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:20px}
  h2{font-size:clamp(1.55rem,3vw,2.15rem); margin:0; letter-spacing:-.03em}
  .sub{color:var(--muted); margin:7px 0 0; max-width:760px}
  .kicker{color:var(--accent2); font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px}
  .grid{display:grid; gap:16px}
  .chain{grid-template-columns:repeat(4,1fr)}
  .step{
    position:relative; background:linear-gradient(180deg,rgba(17,26,48,.95),rgba(11,18,34,.95));
    border:1px solid var(--line); border-radius:16px; padding:18px; cursor:pointer;
    transition:.22s ease; min-height:170px;
  }
  .step:hover{transform:translateY(-3px); border-color:#3d5685}
  .step.active{border-color:var(--accent); box-shadow:0 0 0 1px rgba(124,92,255,.35), 0 18px 45px rgba(124,92,255,.15)}
  .step.done{border-color:rgba(52,211,153,.45)}
  .step .num{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#1a2846; color:#c9d7f3; font-weight:900; font-size:.85rem}
  .step.active .num{background:var(--accent); color:white}
  .step.done .num{background:var(--ok); color:#052e22}
  .step h3{font-size:1rem; margin:12px 0 6px}
  .step p{margin:0; color:var(--muted); font-size:.88rem}
  .step .tag{position:absolute; top:16px; right:16px; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#7f93b6; font-weight:800}
  .step .glow{position:absolute; inset:auto 14px 14px 14px; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,rgba(124,92,255,.6),transparent); opacity:0; transition:.2s}
  .step.active .glow{opacity:1}
  .panel{background:linear-gradient(180deg,rgba(17,26,48,.96),rgba(9,15,28,.96)); border:1px solid var(--line); border-radius:18px; overflow:hidden}
  .panel-head{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:rgba(9,15,28,.7)}
  .dots{display:flex; gap:6px}
  .dots i{width:10px;height:10px;border-radius:50%;display:block;background:#33415f}
  .dots i:nth-child(1){background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
  .panel-title{font-family:var(--mono); font-size:.8rem; color:#a9b9d8; margin-left:4px}
  .panel-body{padding:18px}
  .demo-toolbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px}
  .segmented{display:flex; background:#0c1529; border:1px solid var(--line); padding:4px; border-radius:12px; gap:4px}
  .segmented button{border:0; background:transparent; color:var(--muted); font:inherit; font-weight:800; font-size:.82rem; padding:8px 12px; border-radius:8px; cursor:pointer}
  .segmented button.active{background:#1d2b4c; color:white}
  .demo-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:16px; align-items:stretch}
  .steps{display:flex; flex-direction:column; gap:10px}
  .step-row{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(9,15,28,.55); transition:.2s}
  .step-row.active{border-color:rgba(124,92,255,.65); background:rgba(124,92,255,.09)}
  .step-row.done{border-color:rgba(52,211,153,.35)}
  .step-row .icon{flex:0 0 24px; height:24px; border-radius:7px; display:grid; place-items:center; background:#17233d; color:#93a4c4; font-size:.72rem; font-weight:900}
  .step-row.active .icon{background:var(--accent); color:white}
  .step-row.done .icon{background:var(--ok); color:#052e22}
  .step-row b{display:block; font-size:.9rem}
  .step-row small{color:var(--muted); font-size:.78rem}
  .terminal{background:#050a13; border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; min-height:340px}
  .term-head{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid #16213a; background:#08101e; font-family:var(--mono); font-size:.75rem; color:#7f93b6}
  .term-head .pill{margin-left:auto; border:1px solid #233252; border-radius:999px; padding:2px 8px; color:#9fb1d4}
  pre.term{margin:0; padding:14px; font-family:var(--mono); font-size:.78rem; line-height:1.7; color:#c9d7f3; white-space:pre-wrap; word-break:break-word; flex:1}
  .term .cmd{color:#7ce7ff}
  .term .ok{color:#6ee7b7}
  .term .bad{color:#ff8fa3}
  .term .dim{color:#6f82a5}
  .term .hl{color:#ffd48a}
  .status{display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:800; color:var(--muted); margin-top:10px}
  .status .dot{width:8px;height:8px;border-radius:50%;background:#56698c}
  .status.running .dot{background:var(--warn); animation:pulse 1s infinite}
  .status.success .dot{background:var(--ok)}
  .status.blocked .dot{background:var(--ok)}
  @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
  .code-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
  .code-tabs button{border:1px solid var(--line); background:#0c1529; color:var(--muted); font:inherit; font-weight:700; font-size:.8rem; padding:8px 12px; border-radius:9px; cursor:pointer}
  .code-tabs button.active{color:white; border-color:#3d5685; background:#1a2846}
  .code-wrap{position:relative}
  .code-wrap pre{margin:0; padding:20px; overflow:auto; background:#050a13; border:1px solid var(--line); border-radius:14px; font-family:var(--mono); font-size:.8rem; line-height:1.7; color:#c9d7f3}
  .code-wrap .copy{position:absolute; top:10px; right:10px; background:#0d172a; border:1px solid #284064; color:#a9b9d8; border-radius:8px; padding:6px 9px; font:inherit; font-size:.72rem; font-weight:800; cursor:pointer}
  .table-wrap{overflow:auto; border:1px solid var(--line); border-radius:14px}
  table{border-collapse:collapse; width:100%; min-width:680px; font-size:.9rem}
  th,td{text-align:left; padding:13px 15px; border-bottom:1px solid #1a2742}
  th{background:#0d172a; color:#a9b9d8; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase}
  tr:last-child td{border-bottom:0}
  td.mono{font-family:var(--mono); font-size:.82rem}
  .ok{color:#6ee7b7; font-weight:800}
  .bad{color:#ff8fa3; font-weight:800}
  .cards{grid-template-columns:repeat(3,1fr)}
  .card{background:linear-gradient(180deg,rgba(17,26,48,.9),rgba(10,16,30,.9)); border:1px solid var(--line); border-radius:16px; padding:18px}
  .card h3{margin:0 0 8px; font-size:1rem}
  .card p{margin:0; color:var(--muted); font-size:.88rem}
  .card .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#17233d; margin-bottom:12px; font-size:1.05rem}
  .checklist{display:grid; gap:10px; margin-top:16px}
  .check{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(10,16,30,.7)}
  .check .box{flex:0 0 20px;height:20px;border-radius:6px;background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.4);display:grid;place-items:center;color:#6ee7b7;font-weight:900;font-size:.72rem;margin-top:2px}
  .check b{display:block; font-size:.9rem}
  .check small{color:var(--muted); font-size:.8rem}
  .footer{border-top:1px solid var(--line); padding:30px 0 50px; color:var(--muted); font-size:.82rem}
  .footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
  .presenter{
    position:fixed; right:18px; bottom:18px; z-index:30; display:flex; gap:8px;
  }
  .presenter .btn{box-shadow:0 12px 30px rgba(0,0,0,.35)}
  .modal{
    position:fixed; inset:0; z-index:50; background:rgba(2,6,14,.78); backdrop-filter:blur(6px);
    display:none; place-items:center; padding:20px;
  }
  .modal.open{display:grid}
  .modal .panel{max-width:760px; width:100%}
  .modal .panel-body{padding:22px}
  .modal h3{margin:0 0 8px}
  .modal p{color:var(--muted); font-size:.9rem}
  .modal code{font-family:var(--mono); background:#050a13; border:1px solid #1c2b49; padding:2px 6px; border-radius:6px; color:#c9d7f3; font-size:.82rem}
  .modal .close{margin-left:auto}
  @media (max-width: 980px){
    .chain{grid-template-columns:repeat(2,1fr)}
    .demo-grid{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr}
    nav{display:none}
  }
  @media (max-width: 560px){
    .chain{grid-template-columns:1fr}
    .hero{padding-top:48px}
    .section-head{display:block}
  }
  @media print{
    .topbar,.presenter,.demo-toolbar,.btn,.code-tabs{display:none !important}
    body{background:white;color:#111}
    .panel,.card,.step,.table-wrap{border-color:#ccc; background:white}
    pre.term{color:#111; background:white}
    a{color:#0645ad}
  }


/* --- English page additions: php.ini lab --- */
.lang{font-weight:800;color:var(--accent2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.callout{border:1px solid #2b3f63;background:rgba(34,211,238,.06);border-radius:14px;padding:16px 18px;color:#cfe3ff;font-size:.9rem}
.callout.warn{border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.06);color:#ffe2b8}
.callout.ok{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.06);color:#b8f5dc}
.mini{font-size:.78rem;color:var(--muted)}
.kbd{font-family:var(--mono);font-size:.78rem;border:1px solid #33466c;border-bottom-width:2px;border-radius:6px;padding:1px 6px;background:#0c1529;color:#c9d7f3}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.check-card{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:rgba(10,16,30,.7)}
.check-card b{display:block;font-size:.88rem;margin-bottom:3px}
.check-card small{color:var(--muted);font-size:.78rem}
.check-card.good{border-color:rgba(52,211,153,.4)}
.check-card.bad{border-color:rgba(255,92,122,.35)}
.check-card.warn{border-color:rgba(255,180,84,.35)}
@media (max-width: 980px){.split,.check-grid{grid-template-columns:1fr}}