.shell{ display:grid; grid-template-columns:230px 1fr; height:100vh; }
  aside{
    background:linear-gradient(180deg, #10151f, #0c1018);
    border-right:1px solid var(--ink-line);
    display:flex; flex-direction:column;
  }
  .logo{ padding:22px 20px; border-bottom:1px solid var(--ink-line); }
  .logo-mark{ font-family:var(--mono); font-size:16px; font-weight:700; letter-spacing:.1em; color:var(--paper); }
  .logo-mark span{ color:var(--brass); }
  .logo-sub{ font-family:var(--mono); font-size:10px; color:var(--paper-dim); margin-top:4px; letter-spacing:.14em; text-transform:uppercase; }
  nav{ padding:16px 0; flex:1; }
  .nav-section{ padding:8px 20px 6px; font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; color:var(--paper-dim); text-transform:uppercase; }
  .nav-item{
    display:flex; align-items:center; gap:10px; padding:10px 20px; cursor:pointer;
    color:var(--paper-dim); font-size:13px; transition:all .15s;
    border-left:2px solid transparent; user-select:none;
  }
  .nav-item:hover{ color:var(--paper); background:#c9a22710; }
  .nav-item.active{ color:var(--brass); border-left-color:var(--brass); background:#c9a22714; }
  .nav-item .icon{ font-size:15px; width:18px; text-align:center; }
  .sidebar-bottom{
    padding:14px 20px; border-top:1px solid var(--ink-line);
    font-family:var(--mono); font-size:10.5px; color:var(--paper-dim);
  }
  .status-dot{
    width:6px; height:6px; border-radius:50%; background:var(--ok);
    box-shadow:0 0 8px var(--ok); display:inline-block; margin-right:7px;
    animation:pulse 2s infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
  main{ position:relative; overflow:hidden; }
  iframe{ width:100%; height:100%; border:none; display:none; }
  iframe.active{ display:block; }

  /* ══════════════════════════════════════════════════════════════════════
     LOGIN-GATE — exaktes Blau-Design aus der Vorlage
     ══════════════════════════════════════════════════════════════════════ */

  #login-gate{
    --bg-color: #0b0e14;
    --card-bg: rgba(18, 24, 38, 0.7);
    --card-border: rgba(255, 255, 255, 0.08);

    /* Craftshield Blautöne */
    --cs-blue-dark: #1705b5;
    --cs-blue-light: #2e4aeb;
    --cs-blue-bright: #4f6bff;

    --discord-blurple: #5865F2;
    --discord-hover: #4752C4;
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;

    background-color: var(--bg-color);
    color: var(--text-main);
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
  }

  #login-gate *{
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
  }

  /* Dynamische Hintergrund-Lichter (Glow Effect) */
  #login-gate .bg-glow {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
  }

  #login-gate .glow-1 {
    top: -100px;
    left: -100px;
    background: var(--cs-blue-dark);
  }

  #login-gate .glow-2 {
    bottom: -100px;
    right: -100px;
    background: var(--cs-blue-light);
  }

  /* Subtiles Raster im Hintergrund */
  #login-gate .bg-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    z-index: 0;
    pointer-events: none;
  }

  /* Login Container (Glassmorphism) */
  #login-gate .login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 2.5rem 2rem;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    text-align: center;
    animation: login-fadeIn 0.6s ease-out;
    margin: 1rem;
  }

  @keyframes login-fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Shield Logo & Brand Banner mit Glow & Hover-Effekt */
  #login-gate .brand-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.2rem auto;
    background: linear-gradient(135deg, rgba(23, 5, 181, 0.5), rgba(79, 107, 255, 0.4));
    border: 1px solid rgba(79, 107, 255, 0.8);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #ffffff;
    box-shadow: 0 0 25px rgba(46, 74, 235, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.1);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  #login-gate .brand-icon svg {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
    transition: transform 0.35s ease;
  }

  #login-gate .brand-icon-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
    transition: transform 0.35s ease;
  }

  #login-gate .brand-icon:hover {
    transform: translateY(-4px) scale(1.05);
    background: linear-gradient(135deg, rgba(23, 5, 181, 0.7), rgba(79, 107, 255, 0.6));
    border-color: #ffffff;
    box-shadow: 0 0 35px rgba(79, 107, 255, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.25);
  }

  #login-gate .brand-icon:hover svg,
  #login-gate .brand-icon:hover .brand-icon-img {
    transform: scale(1.1) rotate(-5deg);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
  }

  #login-gate .brand-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 0.2rem;
  }

  #login-gate .brand-title span {
    color: var(--cs-blue-light);
  }

  #login-gate .brand-subtitle {
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2rem;
  }

  /* Content Area */
  #login-gate .login-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

  #login-gate .login-header p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.4;
  }

  /* Discord Button */
  #login-gate .btn-discord {
    width: 100%;
    padding: 0.9rem 1.2rem;
    background-color: var(--discord-blurple);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
    text-decoration: none;
  }

  #login-gate .btn-discord:hover {
    background-color: var(--discord-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.4);
  }

  #login-gate .btn-discord:active {
    transform: translateY(0);
  }

  #login-gate .btn-discord svg {
    flex-shrink: 0;
  }

  /* Server Info / Footer inside Card */
  #login-gate .login-footer {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
  }

  #login-gate .status-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    margin-right: 0;
    animation: none;
  }