:root{
  --bg:#1b2024;
  --card:rgba(43,49,54,.78);
  --card-strong:rgba(54,61,67,.88);
  --border:rgba(209,216,222,.34);
  --border-strong:rgba(236,241,245,.68);
  --accent:#d7dde2;
  --accent-soft:#aab4bd;
  --text:#f2f5f7;
  --muted:#b7c0c8;
  --danger:#f87171;
  --success:#b9f0cb;
  --shadow:rgba(0,0,0,.48);
  --font-ui:"Bahnschrift","Segoe UI Variable","Segoe UI",Arial,sans-serif;
  --font-display:"Bahnschrift Condensed","Bahnschrift","Orbitron","Arial Narrow",Arial,sans-serif;
  --font-mono:"JetBrains Mono","Cascadia Mono",Consolas,monospace;
}

*{box-sizing:border-box}

body.app-shell{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--text);
  font-family:var(--font-ui);
  background:
    radial-gradient(ellipse at 46% 13%, rgba(238,244,248,.22), transparent 24%),
    radial-gradient(ellipse at 18% 78%, rgba(154,166,176,.18), transparent 28%),
    linear-gradient(135deg, #262d32 0%, #171c20 48%, #0f1417 100%);
  overflow-x:hidden;
}

body.app-shell::before,
body.app-shell::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}

body.app-shell::before{
  opacity:.58;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='260' viewBox='0 0 360 260'%3E%3Cg fill='none' stroke='%23d8dee4' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M34 18l18 10v20L34 58 16 48V28zM70 18l18 10v20L70 58 52 48V28zM106 18l18 10v20l-18 10-18-10V28zM142 18l18 10v20l-18 10-18-10V28zM178 18l18 10v20l-18 10-18-10V28zM52 49l18 10v20L52 89 34 79V59zM88 49l18 10v20L88 89 70 79V59zM124 49l18 10v20l-18 10-18-10V59zM160 49l18 10v20l-18 10-18-10V59zM196 49l18 10v20l-18 10-18-10V59zM34 80l18 10v20l-18 10-18-10V90zM70 80l18 10v20l-18 10-18-10V90zM106 80l18 10v20l-18 10-18-10V90zM142 80l18 10v20l-18 10-18-10V90z'/%3E%3Cpath d='M0 90h16M214 59h44M142 152h36M196 120h64' stroke-opacity='.14'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(224,231,236,.045) 19px, transparent 21px);
  background-repeat:no-repeat, repeat;
  background-size:300px 216px, 96px 96px;
  background-position:right -40px top -22px, center;
}

body.app-shell::after{
  opacity:.40;
  background:
    linear-gradient(90deg, transparent 0 2.4%, rgba(232,238,243,.34) 2.5%, rgba(232,238,243,.34) 64%, transparent 64.2%) left 38px top 38px/100% 1px no-repeat,
    repeating-linear-gradient(135deg, rgba(232,238,243,.12) 0 6px, transparent 6px 12px) left 42px top 56px/88px 12px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 34%, rgba(0,0,0,.22));
}

.app-header,
.app-main,
.app-footer{
  position:relative;
  z-index:1;
}

.app-header{
  position:sticky;
  top:0;
  z-index:2500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  min-height:68px;
  padding:8px 28px;
  background:linear-gradient(180deg, rgba(53,60,66,.92), rgba(27,32,36,.84));
  border-bottom:1px solid var(--border);
  box-shadow:0 12px 34px rgba(0,0,0,.24);
  backdrop-filter:blur(18px) saturate(120%);
}

.app-brand{
  display:inline-flex;
  align-items:center;
  min-width:190px;
  color:var(--accent);
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  letter-spacing:1px;
  text-decoration:none;
}

.app-brand img{
  display:block;
  width:auto;
  height:46px;
  max-width:230px;
  object-fit:contain;
  filter:brightness(1.22) contrast(1.08) drop-shadow(0 3px 10px rgba(0,0,0,.48));
}

.app-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.app-logout-form{
  margin:0;
  display:inline-flex;
}

.app-user{
  padding-right:14px;
  margin-right:4px;
  border-right:1px solid var(--border);
  text-align:right;
  font-size:11px;
  font-weight:800;
  color:#fff;
}

.app-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(72,80,87,.86), rgba(34,40,45,.86));
  color:#fff;
  text-decoration:none;
  font:700 11px/1 var(--font-ui);
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px rgba(0,0,0,.20);
}

.app-btn:hover{
  background:linear-gradient(180deg, #edf2f6, #aeb8c1);
  color:#11171a;
  border-color:var(--border-strong);
  transform:translateY(-2px);
}

.app-btn.danger{
  background:#7f1d1d;
  border-color:#f87171;
}

.app-main{
  flex:1;
  width:min(1120px, calc(100vw - 36px));
  margin:clamp(22px,4vh,40px) auto;
}

.app-card{
  background:linear-gradient(145deg, rgba(255,255,255,.08), transparent 34%), var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 42px var(--shadow);
  backdrop-filter:blur(14px) saturate(116%);
}

.app-footer{
  display:grid;
  grid-template-columns:minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding:25px 5%;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(30,36,40,.94), rgba(15,19,22,.98));
  color:#a2acb5;
  font:700 10px/1.5 var(--font-display);
}

.app-footer a{
  color:#a2acb5;
  text-decoration:none;
}

.app-footer a:hover{color:#fff}

.app-footer-links,
.app-footer-stats,
.app-footer-speed{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.app-footer-links{
  justify-content:center;
}

.app-footer-speed{
  justify-content:flex-end;
  text-align:right;
}

@media (max-width:700px){
  .app-footer{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }

  .app-footer-stats,
  .app-footer-links,
  .app-footer-speed{
    justify-content:center;
  }

  .app-header{
    padding:10px 14px;
    justify-content:center;
  }

  .app-brand{
    width:100%;
    min-width:0;
    justify-content:center;
  }

  .app-brand img{
    height:36px;
    max-width:180px;
  }

  .app-actions,
  .app-user{
    justify-content:center;
    text-align:center;
  }

  .app-user{
    width:100%;
    border-right:0;
    padding-right:0;
    margin-right:0;
  }

  .app-main{
    width:calc(100vw - 18px);
    margin:18px auto;
  }

  .app-card{
    padding:14px;
    border-radius:14px;
  }
}