:root{
      --bg:#050607;
      --panel:#080b0c;
      --text:#d7f8d7;
      --muted:#88c088;
      --faint:#2b5a2b;
      --accent:#4cff4c;
      --warn:#ffd34c;
      --err:#ff5c5c;
      --scan:rgba(76,255,76,.08);
    }

    html,body{height:100%;}
    body{
      background: radial-gradient(1000px 600px at 60% 20%, rgba(76,255,76,.10), transparent 55%),
                  radial-gradient(900px 500px at 20% 80%, rgba(255,211,76,.06), transparent 55%),
                  linear-gradient(180deg, #040506 0%, #06080a 100%);
      color:var(--text);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      overflow:hidden;
    }

    .crt::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(to bottom, rgba(255,255,255,0.025), rgba(255,255,255,0.0) 24%, rgba(0,0,0,0.035) 50%, rgba(0,0,0,0.0) 70%),
        repeating-linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
      mix-blend-mode:overlay;
      opacity:.55;
    }
    .crt::after{
      content:"";
      position:fixed;
      inset:-2px;
      pointer-events:none;
      background: radial-gradient(closest-side, transparent 70%, rgba(0,0,0,.55) 120%);
      opacity:.65;
    }

    a{color:var(--accent); text-decoration:none;}
    a:hover{text-decoration:underline;}

    .panel{
      background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
      border:1px solid rgba(76,255,76,.18);
      box-shadow: 0 0 0 1px rgba(0,0,0,.65) inset, 0 10px 40px rgba(0,0,0,.45);
    }

    .glow{ text-shadow: 0 0 10px rgba(76,255,76,.35); }

    .ascii{ line-height: 1.05; letter-spacing: .02em; }

    .divider{
      background: linear-gradient(90deg, transparent, rgba(76,255,76,.35), transparent);
      height:1px;
    }

    .kbd{
      border:1px solid rgba(76,255,76,.25);
      background: rgba(76,255,76,.06);
      padding: 0 .35rem;
      border-radius:.35rem;
    }

    .scrollbar::-webkit-scrollbar{height:10px;width:10px;}
    .scrollbar::-webkit-scrollbar-thumb{background:rgba(76,255,76,.18); border:1px solid rgba(76,255,76,.18);}
    .scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.3);}

    .logline{white-space:pre-wrap; word-break:break-word;}
    .prompt{color:var(--muted);}
    .time{color:var(--faint);}
    .tag{color:var(--warn);}
    .error{color:var(--err);}
    .ok{color:var(--accent);}

    .blink{animation: blink 1.1s steps(2, start) infinite;}
    @keyframes blink{to{visibility:hidden;}}

    .focusRing:focus{outline:none; box-shadow:0 0 0 2px rgba(76,255,76,.22);}

    .toast{
      position: fixed;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(76,255,76,.22);
      padding: 10px 12px;
      border-radius: 10px;
      box-shadow: 0 10px 35px rgba(0,0,0,.55);
      color: var(--text);
      font-size: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
      z-index: 50;
    }
    .toast.active{opacity: 1; transform: translateX(-50%) translateY(-6px);}

    /* small responsive tweaks */
    @media (max-width: 640px){
      body{overflow:auto;}
      .appShell{min-height:100dvh;}
    }