/* Контур-пульт: сдержанная админ-панель с характером фэнтезийного мира.
   Палитра: пергамент-акцент на глубоком тёмном, без крика. */
:root{
  --bg:#14120e;            /* почти чёрный, тёплый */
  --surface:#1d1a14;       /* плитка */
  --surface-2:#242019;     /* поднятая поверхность */
  --line:#332d22;          /* границы */
  --line-strong:#4a4133;
  --gold:#c9a24b;          /* акцент — потемневшее золото */
  --gold-soft:#a8863c;
  --text:#e8e2d4;          /* пергамент */
  --text-dim:#a49c88;
  --text-mute:#6f6857;
  --ok:#7ea36a; --ext:#6c93c0; --dev:#b8873f;
  --danger:#c0603a;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1000px; margin:0 auto; padding:2rem 1.25rem 4rem}

/* ---- Вход ---- */
.login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.25rem}
.login-card{
  width:100%; max-width:380px; background:var(--surface);
  border:0.5px solid var(--line); border-radius:var(--radius); padding:2rem 1.75rem;
}
.crest{
  width:44px; height:44px; margin:0 auto 1rem; display:block;
}
.login-card h1{
  font-size:1.15rem; font-weight:600; text-align:center; margin:0 0 0.35rem;
  letter-spacing:0.02em;
}
.login-card .sub{text-align:center; color:var(--text-mute); font-size:0.85rem; margin:0 0 1.5rem}
.field{margin-bottom:0.85rem}
.field label{display:block; font-size:0.8rem; color:var(--text-dim); margin-bottom:0.3rem}
.field input{
  width:100%; padding:0.6rem 0.7rem; background:var(--bg); color:var(--text);
  border:0.5px solid var(--line-strong); border-radius:8px; font-size:0.95rem; font-family:inherit;
}
.field input:focus{outline:2px solid var(--gold-soft); outline-offset:1px; border-color:transparent}
.btn{
  width:100%; padding:0.65rem; background:var(--gold); color:#1a1610; border:0; border-radius:8px;
  font-size:0.95rem; font-weight:600; cursor:pointer; font-family:inherit; margin-top:0.4rem;
}
.btn:hover{background:var(--gold-soft)}
.btn:disabled{opacity:0.6; cursor:default}
.err{color:var(--danger); font-size:0.85rem; text-align:center; margin-top:0.75rem; min-height:1.2em}

/* ---- Шапка пульта ---- */
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.75rem}
.topbar .brand{display:flex; align-items:center; gap:0.7rem}
.topbar h1{font-size:1.15rem; font-weight:600; margin:0; letter-spacing:0.02em}
.topbar .who{font-size:0.8rem; color:var(--text-mute)}
.logout{background:none; border:0.5px solid var(--line-strong); color:var(--text-dim);
  padding:0.4rem 0.8rem; border-radius:8px; cursor:pointer; font-size:0.82rem; font-family:inherit}
.logout:hover{border-color:var(--gold-soft); color:var(--text)}

/* ---- Сетка плиток ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:0.9rem}
.tile{
  background:var(--surface); border:0.5px solid var(--line); border-radius:var(--radius);
  padding:1.15rem 1.2rem; display:flex; flex-direction:column;
}
.tile.dev{background:var(--surface); border-style:dashed; border-color:var(--line-strong)}
.tile-head{display:flex; align-items:center; gap:0.6rem; margin-bottom:0.55rem}
.tile-icon{width:22px; height:22px; color:var(--gold); flex:none}
.tile.dev .tile-icon{color:var(--text-mute)}
.tile-name{font-weight:600; font-size:1rem}
.tile.dev .tile-name{color:var(--text-dim)}
.badge{margin-left:auto; font-size:0.68rem; padding:0.15rem 0.55rem; border-radius:20px; white-space:nowrap}
.badge.ok{background:rgba(126,163,106,0.14); color:var(--ok)}
.badge.ext{background:rgba(108,147,192,0.14); color:var(--ext)}
.badge.dev{background:rgba(184,135,63,0.14); color:var(--dev)}
.tile-note{font-size:0.85rem; color:var(--text-dim); margin:0 0 0.85rem; flex:1}
.tile-links{display:flex; flex-wrap:wrap; gap:0.4rem}
.tile-links a{
  font-size:0.82rem; padding:0.32rem 0.7rem; border-radius:8px;
  border:0.5px solid var(--line-strong); color:var(--text-dim); text-decoration:none;
}
.tile-links a:hover{border-color:var(--gold-soft); color:var(--text); background:var(--surface-2)}
.tile-hint{
  margin-top:0.7rem; font-size:0.76rem; color:var(--text-mute); font-family:ui-monospace,monospace;
  background:var(--bg); border:0.5px solid var(--line); border-radius:6px; padding:0.4rem 0.55rem;
  word-break:break-word;
}
.tile-hint .lbl{color:var(--gold-soft); font-family:inherit; display:block; margin-bottom:0.2rem; font-size:0.72rem}

@media (max-width:520px){
  .wrap{padding:1.25rem 0.9rem 3rem}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}