:root{
    --bg:#091112;
    --panel:#17120fdd;
    --panel-strong:#1f1712ee;
    --line:#8b6b38;
    --line-soft:#5a4524;
    --gold:#f2cf7f;
    --gold-2:#a67c34;
    --text:#f8f0dc;
    --muted:#ccb890;
    --green:#6fd15f;
    --yellow:#efb451;
    --red:#ea6464;
    --blue:#6cb8ff;
    --purple:#b987ff;
    --shadow:0 20px 60px rgba(0,0,0,.45);
    --radius:20px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family: Georgia, "Times New Roman", serif;
    color:var(--text);
    background:#0a0f10;
    min-height:100vh;
    position:relative;
}
.page-bg{
    position:fixed; inset:0;
    background:
        linear-gradient(rgba(6,8,9,.48), rgba(6,8,9,.76)),
        url('img/background.jpg') center/cover no-repeat;
    z-index:0;
}
.page-overlay{
    position:fixed; inset:0; z-index:1;
    background:
        radial-gradient(circle at top center, rgba(255,208,120,.13), transparent 34%),
        radial-gradient(circle at bottom left, rgba(0,115,255,.08), transparent 28%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.32));
}
.minecraft-pattern{
    position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.15;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.55));
}
.container{width:min(1380px, calc(100% - 30px)); margin:0 auto; position:relative; z-index:4}
.hero-shell{padding:24px 0 14px}
.hero-grid{display:grid; grid-template-columns:1.45fr .95fr; gap:18px; align-items:stretch}
.main-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; padding-bottom:30px}
.left-column,.right-column{display:grid; gap:18px}
.ornate-panel{
    background:
      linear-gradient(180deg, rgba(33,25,18,.94), rgba(19,14,11,.95)),
      rgba(20,14,10,.94);
    border:2px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,219,155,.08);
    position:relative;
    overflow:hidden;
}
.ornate-panel::before{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(90deg, transparent, rgba(255,214,129,.05), transparent),
      radial-gradient(circle at top left, rgba(255,214,129,.06), transparent 22%);
    pointer-events:none;
}
.hero-panel{padding:26px}
.hero-topline,.section-kicker{
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:.75rem;
    font-weight:700;
}
.logo-row{display:flex; gap:22px; align-items:center; margin-top:14px}
.server-logo{width:210px; max-width:38%; filter:drop-shadow(0 12px 20px rgba(0,0,0,.5))}
.hero-copy h1,.history-panel h2,.editor-panel h2,.incident-panel h2{margin:0 0 10px; font-size:2.4rem; line-height:1}
.hero-copy p,.stable-panel p,.incident-message,.editor-panel p{margin:0; color:var(--muted); line-height:1.7}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}

.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:46px; padding:0 16px; border-radius:14px;
    border:1px solid var(--line); text-decoration:none; color:var(--text);
    background:linear-gradient(180deg, rgba(83,58,29,.78), rgba(45,31,16,.95));
    cursor:pointer; font:inherit; transition:transform .18s ease, filter .18s ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.08)}
.btn.primary{
    color:#24170a;
    background:linear-gradient(180deg, #f7d995, #c99845);
    border-color:#f2cf7f;
    font-weight:700;
}
.btn.danger{
    background:linear-gradient(180deg, rgba(122,35,35,.9), rgba(82,20,20,.95));
    border-color:#b95050;
}
.btn.full{width:100%}

.status-overview{padding:24px}
.overall-status-row{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px}
.overall-status-text{font-size:1.8rem; font-weight:700}
.status-pip{
    width:18px; height:18px; border-radius:50%;
    background:var(--green); box-shadow:0 0 0 6px rgba(111,209,95,.18), 0 0 24px rgba(111,209,95,.4);
}
.last-update{color:var(--muted); margin-top:6px; font-size:.95rem}
.divider{height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); margin:18px 0}
.server-stat-header{font-size:1.2rem; margin-bottom:14px}
.server-stat-list{display:grid; gap:10px}
.mini-stat{
    display:grid; gap:4px; padding:12px 14px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(242,207,127,.12);
    border-radius:14px;
}
.mini-stat span{color:var(--muted); font-size:.88rem}
.mini-stat strong{font-size:1rem; word-break:break-word}

.incident-panel,.stable-panel,.history-panel,.editor-panel{padding:24px}
.hidden{display:none !important}
.stable-panel h2{margin:.4rem 0 .6rem; font-size:2rem}
.panel-title-row,.panel-row{
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.status-pill{
    padding:9px 12px; border-radius:999px; font-size:.82rem; font-weight:700; letter-spacing:.06em;
    border:3px solid transparent; text-transform:uppercase;
}
.status-operational{background:rgba(111,209,95,.15); color:var(--green); border-color:rgba(111,209,95,.28)}
.status-degraded{background:rgba(239,180,81,.15); color:var(--yellow); border-color:rgba(239,180,81,.28)}
.status-partial_outage,.status-major_outage{background:rgba(234,100,100,.15); color:var(--red); border-color:rgba(234,100,100,.28)}
.status-maintenance{background:rgba(185,135,255,.15); color:var(--purple); border-color:rgba(185,135,255,.28)}
.status-resolved{background:rgba(108,184,255,.15); color:var(--blue); border-color:rgba(108,184,255,.28)}

.incident-banner{
    margin:16px 0 0; padding:10px 14px; border-radius:14px;
    background:linear-gradient(180deg, rgba(92,71,30,.7), rgba(61,44,18,.95));
    border:1px solid rgba(242,207,127,.2); color:var(--gold); font-weight:700;
}
.meta-grid,.services-grid,.history-list,.updates-list{display:grid; gap:12px}
.meta-grid{grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:18px}
.meta-box,.service-card,.history-card,.update-card,.field-box,.subitem{
    padding:14px; border-radius:16px; background:rgba(255,255,255,.03);
    border:1px solid rgba(242,207,127,.12);
}
.meta-box span,.subitem small,.field span{display:block; color:var(--muted); font-size:.84rem; margin-bottom:8px}
.updates-title{font-size:1.15rem; margin:20px 0 12px}
.update-card strong,.history-card strong{display:block; margin-bottom:8px}
.update-card .time,.history-card .time{color:var(--muted); font-size:.88rem; margin-bottom:8px}
.service-card-header{
    display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px;
}
.service-card h3{margin:0 0 6px; font-size:1.5rem}
.service-card p,.history-card p,.subitem p{margin:0; color:var(--muted); line-height:1.65}
.service-subitems{display:grid; gap:10px; margin-top:14px}
.subitem{display:flex; justify-content:space-between; gap:10px}
.subitem-main{max-width:70%}

.history-card-title{
    display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:12px; flex-wrap:wrap;
}
.history-card .solution{
    margin-top:12px; padding-top:12px; border-top:1px solid rgba(242,207,127,.1);
}
.history-card .solution strong{margin-bottom:6px}

.toast{
    position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(18px);
    opacity:0; transition:.22s ease; pointer-events:none; z-index:30;
    min-width:240px; text-align:center; padding:12px 16px;
    border-radius:14px; border:1px solid var(--line);
    background:rgba(17,12,9,.96); color:var(--text);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

.login-wrap{min-height:100vh; display:grid; place-items:center; position:relative; z-index:4}
.login-panel{width:min(520px, calc(100% - 30px)); padding:28px; text-align:center}
.login-logo{width:170px; margin:0 auto 14px; display:block}

.admin-page .container,.admin-page .login-wrap{z-index:4; position:relative}
.admin-shell{padding:24px 0 30px}
.admin-topbar{padding:24px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start}
.admin-brand{display:flex; gap:18px; align-items:center}
.admin-brand img{width:120px}
.admin-brand h1{margin:6px 0 8px; font-size:2.2rem}
.admin-brand p{margin:0; color:var(--muted)}
.admin-actions{display:flex; gap:12px; flex-wrap:wrap}

.admin-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-top:18px}
.admin-main{display:grid; gap:18px}
.sticky-panel{position:sticky; top:18px; padding:24px}
.form-grid{display:grid; gap:12px}
.form-grid.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.field{display:block}
.field input,.field textarea,.field select{
    width:100%; margin-top:8px; padding:12px 13px; border-radius:14px;
    border:1px solid rgba(242,207,127,.15); background:rgba(10,8,7,.64); color:var(--text); font:inherit;
}
.field textarea{resize:vertical; min-height:120px}
.toggle-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 14px; border-radius:16px; margin-bottom:14px;
    background:rgba(255,255,255,.03); border:1px solid rgba(242,207,127,.12);
}
.toggle-row input{width:20px; height:20px}
.component-editor,.update-editor-item,.history-editor-item{
    margin-top:12px; padding:14px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(242,207,127,.12);
}
.component-editor h3{margin:0 0 8px}
.component-editor small{color:var(--muted)}
.inline-three{display:grid; gap:10px; grid-template-columns:1fr 220px 1fr}
.flash{
    margin-top:16px; padding:14px 16px; border-radius:14px; border:1px solid rgba(242,207,127,.16); position:relative; z-index:5;
}
.flash.success{background:rgba(111,209,95,.12); border-color:rgba(111,209,95,.22)}
.flash.error{background:rgba(234,100,100,.12); border-color:rgba(234,100,100,.22)}
.hint-box{
    margin-top:14px; padding:14px; border-radius:14px;
    background:rgba(108,184,255,.09); border:1px solid rgba(108,184,255,.18); color:var(--muted);
}
code{font-family:Consolas, monospace; font-size:.94em; color:var(--gold)}

@media (max-width: 1180px){
    .hero-grid,.main-grid,.admin-grid{grid-template-columns:1fr}
    .sticky-panel{position:static}
}
@media (max-width: 860px){
    .logo-row{flex-direction:column; align-items:flex-start}
    .server-logo{max-width:220px; width:50%}
    .meta-grid,.form-grid.two,.inline-three{grid-template-columns:1fr}
}
@media (max-width: 560px){
    .container{width:min(100% - 20px, 1380px)}
    .hero-copy h1,.history-panel h2,.editor-panel h2,.incident-panel h2{font-size:1.9rem}
    .btn{width:100%}
    .hero-actions,.admin-actions{flex-direction:column}
}