:root{
      --brandA:#8807eb; --brandB:#0649e6; --glass:rgba(255,255,255,0.08); --text:#fff; --muted:#aaa;
      --ok:#00d17a; --warn:#ffb020; --bad:#ff4d4f;
    }
    *{box-sizing:border-box}
    body {
      font-family: 'Montserrat', sans-serif;
      margin: 0; padding: 0; height: 100vh; color: var(--text);
      display:flex; overflow:hidden; background:#111;

    }
    /* Background image */
    body::before{
      content:""; position:fixed; inset:0;
      background:url('bg.png') center/cover no-repeat; z-index:0;
      filter:brightness(0.9);
    }
    body::after{
      content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
      background: radial-gradient(60% 60% at 20% 10%, rgba(255,255,255,0.06), transparent 60%),
                  radial-gradient(80% 80% at 90% 100%, rgba(255,255,255,0.04), transparent 60%);
    }

    /* Layout */
    .app{ position:relative; z-index:2; display:flex; width:100%; height:100%; }
    .sidebar{
      width:260px; min-width:220px; background:rgba(0,0,0,0.5); border-right:1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(8px);
      display:flex; flex-direction:column; padding:16px;
    }
    .logo{
      font-size:22px; font-weight:800; line-height:1; margin-bottom:12px;
      font-family: 'Montserrat', sans-serif;

    }
    .mode-btn{
      width:100%; text-align:left; padding:12px 14px; margin:6px 0; border-radius:12px;
      background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.15); cursor:pointer; font-weight:600;
    }
    .mode-btn:hover{ border-color:rgba(255,255,255,0.3) }
    .mode-btn.active{
      background: linear-gradient(90deg, var(--brandA), var(--brandB));
      border-color:transparent; box-shadow:0 6px 20px rgba(0,0,0,0.25);
    }
    .hint{ font-size:12px; color:var(--muted); margin-top:8px; }

    .main{ flex:1; display:flex; flex-direction:column; }
    .topbar{ padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.35); backdrop-filter: blur(8px);}
    .title{ font-size:18px; font-weight:700; letter-spacing:.2px; }

    /* Views */
    .view{ display:none; height:calc(100% - 56px); }
    .view.active{ display:flex; }

    /* Chat view */
    #chat-view{ flex-direction:column; }
    #chatbox{
      flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px;
    }
    .msg{ max-width:70%; padding:12px 16px; border-radius:18px; line-height:1.6; word-wrap:break-word; animation: blurFadeIn_greeting .4s ease forwards; }
    .user{ align-self:flex-end; background:linear-gradient(to right, var(--brandA), var(--brandB)); color:#fff; }
    .bot{ align-self:flex-start; color:#fff; filter: drop-shadow(1.5px 1.5px 2px #111); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); }
    #greeting{ margin:auto; padding:10px; text-align:center; font-size:28px;
      background:-webkit-linear-gradient(right,#ff09f7,#06bdff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      filter: drop-shadow(1.5px 1.5px 2px #111);
      font-family: 'Montserrat', sans-serif;
    }
    #typing-indicator{ font-style:italic; color:var(--muted); margin:8px 20px; display:none; }
    #inputbar{
      margin:18px auto 24px; padding:12px; display:flex; width:min(900px, 90%); min-width:280px; border:1px solid rgba(255,255,255,0.25);
      border-radius:16px; background:rgba(0,0,0,0.45);
    }
    #inputbar:focus-within{ border-color:rgba(255,255,255,1)}
    #input{ flex:1; padding:12px; font-size:16px; border:none; border-radius:10px; margin-right:10px; background:#313131; color:#fff; outline:none; }
    #send{ padding:12px 18px; font-size:16px; background:linear-gradient(to right, var(--brandA), var(--brandB)); border:none; border-radius:10px; cursor:pointer; font-weight:bold; color:#fff; }
    #send:hover{ filter:brightness(1.05); }

    /* Analyzer shared */
    .panel{
      flex:1; display:flex; padding:20px; gap:20px; overflow:auto;
    }
    .card{
      flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:16px;
      min-width:280px; height:fit-content;
    }
    .card h3{ margin:0 0 10px 0 }
    .field{ display:flex; flex-direction:column; margin:10px 0; gap:6px; }
    .field input, .field select, .field textarea{
      background:#1d1d1d; color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:10px; outline:none;font-family: 'Montserrat', sans-serif;
    }
    #inputbar{
      animation: slidein .6s ease forwards;
    }
    #greeting{ animation: blurFadeIn_greeting .6s ease forwards; }
    .sidebar{
      animation: sideslidein .6s ease forwards;
    }
    .topbar{
      animation: slideintop .6s ease forwards;
    }
    .card{
      animation: slidein .6s ease forwards;
    }
    
    .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .btn{
      padding:12px 14px; border-radius:12px; font-weight:700; border:none; cursor:pointer; color:#fff;
      background:linear-gradient(90deg, var(--brandA), var(--brandB));
    }
    .btn:disabled{ opacity:.6; cursor:not-allowed; }
    .preview{ width:100%; aspect-ratio:1/1; background:#0f0f0f; border:1px dashed rgba(255,255,255,0.25); border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .preview img{ width:100%; height:100%; object-fit:cover; }
    .result{ padding-top: 1px; padding-bottom: 1px;  white-space:pre-wrap;  border:1px solid rgba(255,255,255,0.15); padding:12px; border-radius:12px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

    .badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800; font-size:13px; border:1px solid rgba(255,255,255,0.2); margin-bottom:8px;}
    .score-good{ background:rgba(0,209,122,0.18); }
    .score-mid{ background:rgba(255,176,32,0.18); }
    .score-bad{ background:rgba(255,77,79,0.18); }
    b {
  font-weight: bold;
}
.panel{
  font-family: 'Montserrat', sans-serif;
}

    @keyframes blurFadeIn_greeting{ 0%{ filter:blur(12px); opacity:0;} 100%{ filter:blur(0); opacity:1;} }

    @media (max-width: 900px){
      .sidebar{ width:84px; padding:10px; }
      .mode-btn{ font-size:12px; padding:10px; }
      .mode-btn span{ display:none; }
      .row{ grid-template-columns:1fr; }
    }
    @keyframes slidein{
      0%{ opacity:0; transform:translateY(30px); }
      100%{ opacity:1; transform:translateY(0); }
    }
    @keyframes slideintop{
      0%{ opacity:0; transform:translateY(-30px); }
      100%{ opacity:1; transform:translateY(0); }
    }
    @keyframes sideslidein{
      0%{ opacity:0; transform:translateX(-30px); }
      100%{ opacity:1; transform:translateX(0); }
    }
    .card{width: fit-content;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px;color:#fff;font-family:Montserrat,system-ui,sans-serif;}
;.card h3{margin:0 0 8px 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
label{display:flex;flex-direction:column;gap:4px;font-size:14px}
input,select{font-family: 'Montserrat', sans-serif;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#0a0a0f;color:#fff}
.row{display:flex;align-items:center;gap:8px;margin-top:8px}
button{font-family: 'Montserrat', sans-serif; padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:#111;color:#fff;cursor:pointer}
button.ghost{background:transparent}
.muted{opacity:.8;font-size:12px}
#profile-view{
  min-width: 40%;
  max-width: 45%;
  margin-left: auto;
  margin-right: auto;
  place-items: center;
}
p{
  font-family: Montserrat;
  font-size: 14px;
}