@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
:root{
  --adm-bg:#f3f5f8; --adm-side:#0c1b31; --adm-side-2:#122844;
  --adm-ink:#152033; --adm-mute:#66758b; --adm-line:#e6ebf2;
  --adm-card:#fff; --adm-accent:#e67a12;
}
body.adm{
  font-family:"Plus Jakarta Sans","Segoe UI",sans-serif;
  background:radial-gradient(900px 280px at 100% -10%, rgba(230,122,18,.08), transparent 50%), var(--adm-bg);
  color:var(--adm-ink); display:grid; grid-template-columns:240px 1fr; min-height:100vh; margin:0;
}
.adm-nav{
  background:linear-gradient(175deg,var(--adm-side),var(--adm-side-2));
  color:#fff; padding:20px 12px 16px; display:flex; flex-direction:column; gap:2px;
  position:sticky; top:0; height:100vh;
}
.adm-brand{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:9px 11px;margin:0 4px 16px;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.adm-brand img{height:26px;width:auto}
.adm-brand span{color:#0f2748;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.adm-nav .grp{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8ea0b8;padding:16px 12px 6px}
.adm-nav a{color:#d7e2f0;padding:10px 12px;margin:0 4px;border-radius:12px;text-decoration:none;font-weight:600;font-size:13.5px;transition:background .2s,color .2s}
.adm-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.adm-nav a.on{background:#fff;color:#0f2748;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.adm-nav a.out{margin-top:auto;opacity:.75}
.adm-main{padding:32px 36px 64px;max-width:1120px}
.adm-main h1{font-size:1.75rem;margin:0 0 6px;letter-spacing:-.04em}
.adm-main h2{font-size:1.05rem;margin:28px 0 12px}
.adm-main > p{color:var(--adm-mute);margin:0 0 18px}
.adm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:8px 0 28px}
.kpi{background:var(--adm-card);border:1px solid var(--adm-line);border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(15,39,72,.05);position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--adm-accent)}
.kpi b{display:block;font-size:1.7rem;letter-spacing:-.04em}
.kpi span{font-size:12px;color:var(--adm-mute);font-weight:600}
.adm-main table{width:100%;border-collapse:separate;border-spacing:0;background:var(--adm-card);border:1px solid var(--adm-line);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(15,39,72,.04)}
.adm-main th{background:#f7f9fc;color:#5c6b80;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.adm-main th,.adm-main td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--adm-line)}
.adm-main tr:last-child td{border-bottom:0}
.adm-main tbody tr:hover td{background:#fafbfd}
.adm-main .f,.adm-main form.f{background:var(--adm-card);border:1px solid var(--adm-line);border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(15,39,72,.04)}
.adm-main input,.adm-main textarea,.adm-main select{width:100%;padding:11px 12px;border:1px solid #d5dee8;border-radius:12px;background:#fbfcfe;color:var(--adm-ink);font:inherit}
.adm-main input:focus,.adm-main textarea:focus,.adm-main select:focus{outline:none;background:#fff;border-color:var(--adm-accent);box-shadow:0 0 0 4px rgba(230,122,18,.16)}
.adm-main .btn{border-radius:999px;font-weight:700}
.adm-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.yoast{background:var(--adm-card);border:1px solid var(--adm-line);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(15,39,72,.04);position:sticky;top:16px}
.yoast .snippet{background:#f7f9fc;border:1px solid var(--adm-line);border-radius:12px;padding:10px;margin:10px 0}
.sn-t{color:#1a0dab;font-size:17px}
.sn-u{color:#006621;font-size:12px}
.sn-d{color:#4d5156;font-size:13px}
.yoast-bar{height:6px;background:#e8edf3;border-radius:99px;overflow:hidden;margin:8px 0 12px}
.yoast-bar span{display:block;height:100%;width:0;background:#ef4444;border-radius:99px}
.yoast-bar span.mid{background:#f59e0b}
.yoast-bar span.ok{background:#10b981}
.yoast-num{font-weight:800;font-size:22px;letter-spacing:-.04em}
.yoast .hint,.yoast p{font-size:12px;color:var(--adm-mute)}
.yoast p.ok{color:#047857}
.yoast p.mid{color:#b45309}
.yoast p.bad{color:#b91c1c}
.login-wrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(600px 240px at 80% 0%, rgba(230,122,18,.25), transparent 50%), linear-gradient(160deg,#0b1d36,#16345c)}
.login-card{width:min(400px,92vw);background:#fff;color:var(--adm-ink);border-radius:22px;padding:28px 26px;box-shadow:0 30px 70px rgba(0,0,0,.28)}
.login-card h1{margin:10px 0 16px;letter-spacing:-.04em}
@media(max-width:960px){
  body.adm{grid-template-columns:1fr}
  .adm-nav{position:relative;height:auto;flex-direction:row;flex-wrap:wrap}
  .adm-nav .grp,.adm-brand span{display:none}
  .adm-kpis{grid-template-columns:1fr 1fr}
  .adm-grid{grid-template-columns:1fr}
  .yoast{position:static}
}

body.adm{
  grid-template-columns:240px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  grid-template-areas: "side main";
}
.adm-nav{grid-area:side}
.adm-main{grid-area:main; display:grid; gap:18px; align-content:start}
.adm-kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.adm-main form.f, .adm-main .f{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 16px;
}
.adm-main form.f > h2,
.adm-main form.f > p,
.adm-main form.f > button,
.adm-main .f > h2,
.adm-main .f > button,
.adm-main form.f textarea,
.adm-main .f textarea,
.adm-main form.f label:has(textarea),
.adm-main form.f > input[type="hidden"]{
  grid-column:1 / -1;
}
.adm-grid{grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr)}
@media(max-width:960px){
  body.adm{grid-template-columns:1fr; grid-template-areas:"side" "main"}
}

.adm-main .btn,
.adm-main button,
.login-card .btn{
  appearance:none;
  border:0;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.01em;
  border-radius:999px;
  padding:10px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1.2;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, filter .2s, background .2s;
}
.adm-main .btn-blue,
.adm-main button[name],
.adm-main button[type="submit"],
.login-card .btn-blue{
  background:linear-gradient(180deg,#f08a28,#e67a12);
  color:#fff;
  box-shadow:0 8px 18px rgba(230,122,18,.28);
}
.adm-main .btn-ghost{
  background:#fff;
  color:#0f2748;
  border:1px solid #d5dee8;
  box-shadow:none;
}
.adm-main a.btn{text-decoration:none}
.adm-main button[name="del"]{
  background:#fff;
  color:#b91c1c;
  border:1px solid #fecaca;
  box-shadow:none;
  padding:7px 12px;
  font-size:13px;
}
.adm-main .btn:hover,
.adm-main button:hover,
.login-card .btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}
.adm-main .btn-blue:hover,
.adm-main button[type="submit"]:hover{
  box-shadow:0 12px 24px rgba(230,122,18,.36);
}
.adm-main button:disabled{opacity:.55;transform:none;cursor:not-allowed}

@keyframes admIn {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:none; }
}
@keyframes admSide {
  from { opacity:0; transform:translateX(-8px); }
  to { opacity:1; transform:none; }
}
.adm-nav{animation:admSide .45s cubic-bezier(.22,1,.36,1) both}
.adm-nav a{transition:background .22s, color .22s, transform .22s, box-shadow .22s}
.adm-nav a:hover{transform:translateX(2px)}
.adm-nav a.on{transform:none}
.adm-main{animation:admIn .5s .05s cubic-bezier(.22,1,.36,1) both}
.adm-kpis .kpi{animation:admIn .5s cubic-bezier(.22,1,.36,1) both}
.adm-kpis .kpi:nth-child(1){animation-delay:.08s}
.adm-kpis .kpi:nth-child(2){animation-delay:.14s}
.adm-kpis .kpi:nth-child(3){animation-delay:.2s}
.adm-kpis .kpi:nth-child(4){animation-delay:.26s}
.adm-main table,.adm-main .f,.yoast{animation:admIn .55s .12s cubic-bezier(.22,1,.36,1) both}
.adm-main tbody tr{transition:background .2s, transform .2s}
.adm-main tbody tr:hover{transform:translateX(2px)}
.login-card{animation:admIn .55s cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion:reduce){
  .adm-nav,.adm-main,.kpi,table,.f,.yoast,.login-card{animation:none}
  .adm-nav a,.adm-main tbody tr,.adm-main .btn{transition:none;transform:none}
}

@keyframes loginCard {
  from { opacity:0; transform:translateY(28px) scale(.96); filter:blur(8px); }
  to { opacity:1; transform:none; filter:none; }
}
@keyframes loginPop {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:none; }
}
@keyframes loginOrb {
  0%,100% { transform:translate(0,0) scale(1); opacity:.45; }
  50% { transform:translate(24px,-18px) scale(1.08); opacity:.7; }
}
.login-wrap{position:relative;overflow:hidden}
.login-orb{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none}
.login-orb-a{width:280px;height:280px;background:#e67a12;left:-60px;bottom:-40px;animation:loginOrb 8s ease-in-out infinite}
.login-orb-b{width:340px;height:340px;background:#2f6fed;right:-80px;top:-60px;animation:loginOrb 10s ease-in-out infinite reverse}
.login-card{animation:loginCard .7s cubic-bezier(.22,1,.36,1) both; position:relative; z-index:1}
.login-logo{animation:loginPop .5s .15s both}
.login-title{animation:loginPop .5s .22s both}
.login-card input{animation:loginPop .5s .3s both}
.login-card input + input{animation-delay:.38s}
.login-card .btn{animation:loginPop .5s .46s both}
@media (prefers-reduced-motion:reduce){
  .login-card,.login-logo,.login-title,.login-card input,.login-card .btn,.login-orb{animation:none}
}

html.js-motion .login-card,html.js-motion .login-logo,html.js-motion .login-title,html.js-motion .login-card input,html.js-motion .login-card .btn,html.js-motion .kpi{animation:none}
.btn-blue{background:#e67a12;border-color:#e67a12;color:#fff}
.btn-blue:hover{background:#c45e08;border-color:#c45e08;color:#fff}
.adm-nav a.active{background:#fff;color:#0f2748;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.card{border-radius:16px}
.login-mark{background:#fff;border-radius:14px;padding:10px;display:inline-flex;margin-bottom:8px;box-shadow:0 8px 20px rgba(15,39,72,.08)}
.login-card label{display:grid;gap:6px;font-weight:700;font-size:13px;color:#0f2748}
.adm-toggle{
  display:none; position:fixed; top:12px; left:12px; z-index:80;
  width:42px; height:42px; border:0; border-radius:12px;
  background:#0c1b31; color:#fff; font-size:20px; cursor:pointer;
  box-shadow:0 8px 20px rgba(12,27,49,.25);
}
.adm-main .table-responsive, .adm-main table{max-width:100%}
.adm-main{min-width:0}
@media(max-width:960px){
  body.adm{
    grid-template-columns:1fr;
    grid-template-areas:"main";
  }
  .adm-toggle{display:grid; place-items:center}
  .adm-nav{
    position:fixed; left:0; top:0; bottom:0; width:min(280px,86vw);
    height:100vh; z-index:70;
    transform:translateX(-105%);
    transition:transform .28s cubic-bezier(.22,1,.36,1);
    box-shadow:none;
  }
  body.nav-open .adm-nav{transform:none; box-shadow:16px 0 40px rgba(0,0,0,.25)}
  .adm-main{padding:64px 16px 32px; max-width:100%}
  .adm-kpis, .adm-grid{grid-template-columns:1fr}
  .adm-main form.f, .adm-main .f{grid-template-columns:1fr}
  .adm-main table{display:block; overflow-x:auto; white-space:nowrap}
  .login-card{width:min(400px,calc(100% - 24px)); margin:16px}
}
@media(max-width:600px){
  .adm-main h1{font-size:1.35rem}
  .display-6{font-size:1.6rem}
}
@media(min-width:961px){
  body.adm{grid-template-columns:240px minmax(0,1fr)}
  .adm-nav{
    position:fixed;
    left:0; top:0; bottom:0;
    width:240px;
    height:100vh;
    overflow-y:auto;
    z-index:60;
  }
  .adm-main{
    margin-left:240px;
    width:auto;
    max-width:none;
  }
}
body.adm{
  display:flex;
  flex-direction:row;
  align-items:stretch;
}
.adm-nav{
  display:flex;
  flex-direction:column;
  flex:0 0 240px;
}
.adm-nav a{display:flex; align-items:center; gap:2px}
.adm-main{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.adm-kpis, .row.g-3{display:flex; flex-wrap:wrap}
.login-wrap{display:flex; align-items:center; justify-content:center}
.login-card{display:flex; flex-direction:column}
@media(max-width:960px){
  body.adm{flex-direction:column}
  .adm-nav{flex:0 0 auto}
  .adm-main{margin-left:0}
}
.login-card .hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.login-field{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700;color:#0f2748}
.login-field input{
  border:1px solid #d5dee8;border-radius:14px;padding:13px 14px;
  background:#f7f9fc;color:#152033;font-weight:600;
  transition:border .2s, box-shadow .2s, background .2s;
}
.login-field input::placeholder{color:#8a97ab;font-weight:500}
.login-field input:focus{
  outline:none;background:#fff;border-color:#e67a12;
  box-shadow:0 0 0 4px rgba(230,122,18,.18);
}
.login-human{
  display:flex;align-items:center;gap:10px;
  background:#f4f7fb;border:1px solid #d5dee8;border-radius:14px;
  padding:12px 14px;font-weight:700;color:#0f2748;cursor:pointer;
}
.login-human input{width:18px;height:18px;accent-color:#e67a12}
.login-human:has(input:checked){border-color:#e67a12;background:#fff8f1}
.login-card{
  display:flex;flex-direction:column;gap:14px;
}
.login-field input{
  height:48px;border-radius:16px;border:1px solid #e2e8f0;
  background:linear-gradient(#fff,#f4f7fb);
  box-shadow:inset 0 1px 0 #fff, 0 8px 20px rgba(15,39,72,.04);
  font-size:15px;
}
.login-human{
  display:flex;align-items:center;gap:12px;width:100%;
  border:1px solid #e2e8f0;border-radius:16px;padding:12px 14px;
  background:linear-gradient(#fff,#f6f8fb);
  box-shadow:0 8px 20px rgba(15,39,72,.05);
  cursor:pointer;text-align:left;
}
.login-box{
  width:22px;height:22px;border-radius:6px;flex:none;
  border:2px solid #c9d4e0;background:#fff;
}
.login-count{
  margin-left:auto;min-width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:#0f2748;color:#fff;font-weight:800;font-size:13px;
}
.login-human.is-wait .login-box{border-color:#e67a12;background:#fff8f1}
.login-human.is-ok{border-color:#c6f0d6;background:#f3fbf6}
.login-human.is-ok .login-box{
  border-color:#16a34a;background:#16a34a;
  background-image:linear-gradient(#16a34a,#16a34a);
  position:relative;
}
.login-human.is-ok .login-box:after{
  content:"";position:absolute;left:6px;top:3px;width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.login-card .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}