
:root{
  --bg:#081018;
  --panel:#0e1b27;
  --panel2:#132536;
  --text:#e8edf2;
  --muted:#93a5b5;
  --accent:#c69a3c;
  --line:#263b4e;
  --danger:#bf5b59;
  --success:#5ca879;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
body{min-height:100vh;background:
radial-gradient(circle at 15% 10%,rgba(198,154,60,.10),transparent 28rem),
linear-gradient(145deg,#071019,#0b1520 55%,#071019)}
a{color:#d7b364;text-decoration:none}
a:hover{text-decoration:underline}
.shell{width:min(1120px,92vw);margin:auto}
header{display:flex;align-items:center;justify-content:space-between;padding:28px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:14px;align-items:center}
.mark{width:44px;height:44px;border:1px solid var(--accent);transform:rotate(45deg);display:grid;place-items:center}
.mark span{transform:rotate(-45deg);font-weight:800;color:var(--accent)}
.brand h1{font-size:17px;letter-spacing:.19em;margin:0}
.brand small{display:block;color:var(--muted);margin-top:5px;letter-spacing:.08em}
.status{font-size:12px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
main{padding:72px 0 90px}
.hero{max-width:760px}
.kicker{color:var(--accent);text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:700}
h2{font-size:clamp(36px,6vw,72px);line-height:1.02;margin:18px 0 22px;letter-spacing:-.035em}
.lead{font-size:18px;line-height:1.75;color:#b9c6d2;max-width:680px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:42px}
.card{background:linear-gradient(180deg,rgba(19,37,54,.92),rgba(12,25,37,.92));border:1px solid var(--line);border-radius:14px;padding:25px;box-shadow:0 18px 55px rgba(0,0,0,.25)}
.card h3{margin:0 0 11px;font-size:17px}
.card p{margin:0;color:var(--muted);line-height:1.6}
.meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:35px;color:var(--muted);font-size:13px}
.rule{height:1px;background:var(--line);margin:42px 0}
footer{padding:26px 0 45px;color:#6f8292;font-size:12px;border-top:1px solid var(--line)}
.button{display:inline-block;padding:11px 16px;background:var(--accent);color:#111;border-radius:8px;font-weight:800;border:0;cursor:pointer}
.button.secondary{background:transparent;border:1px solid var(--line);color:var(--text)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;margin-top:28px}
table{border-collapse:collapse;width:100%;min-width:700px;background:rgba(14,27,39,.82)}
th,td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
th{color:#dfbc6b;text-transform:uppercase;letter-spacing:.1em;font-size:11px}
td{color:#c6d1da}
.tag{display:inline-block;padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px}
.login-wrap{max-width:440px;margin:30px auto 0}
label{display:block;color:#b9c6d2;font-size:13px;margin:18px 0 7px}
input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:8px;background:#09131d;color:var(--text);outline:none}
input:focus{border-color:var(--accent)}
.alert{display:none;margin-top:18px;padding:13px 14px;border:1px solid rgba(191,91,89,.6);background:rgba(191,91,89,.08);border-radius:8px;color:#e0a5a3;font-size:13px}
.node{margin-top:28px;text-align:center;color:#667b8c;font-size:11px;letter-spacing:.15em}
.file-list{margin-top:28px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.file{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 18px;border-bottom:1px solid var(--line);background:rgba(14,27,39,.75)}
.file:last-child{border-bottom:0}
.file strong{display:block;font-size:14px}
.file small{color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:30px}
.project{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(14,27,39,.82)}
.project img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.project .copy{padding:18px}
.project h3{margin:0 0 8px}
.project p{margin:0;color:var(--muted);line-height:1.55}
.back{display:inline-block;margin-bottom:22px;color:var(--muted)}
.notice{border-left:3px solid var(--accent);padding:12px 16px;background:rgba(198,154,60,.07);color:#c7d0d8;margin:26px 0}
@media (max-width:600px){
  header{align-items:flex-start;gap:16px;flex-wrap:wrap}
  .brand{min-width:0}
  .brand h1{overflow-wrap:anywhere}
  main{padding-top:52px}
}
