:root{
  --bg:#0b1016;
  --panel:#111826;
  --panel-2:#0e1522;
  --text:#eaf2ff;
  --muted:#9fb0c7;
  --border:#1e2738;
  --accent:#27e0d3;           /* teal glow */
  --accent-2:#67b1ff;         /* blue glow */
  --radius:20px;
  --shadow:0 18px 60px rgba(0,0,0,.45);
}

html,body{height:100%}
body{
  background:
    radial-gradient(900px 700px at 20% -10%, rgba(39,224,211,.14), transparent 60%),
    radial-gradient(900px 700px at 85% 110%, rgba(103,177,255,.12), transparent 60%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

a{ color:#dfe7ff; text-decoration:none }
a:hover{ color:#fff }

/* ---------- Glass card ---------- */
.glass{
  background:rgba(17,24,38,.66);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  -webkit-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

/* ---------- Inputs ---------- */
.input{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  background: -webkit-gradient(linear, left top, left bottom, from(#0d1523), to(#0b1220));
  background: linear-gradient(180deg, #0d1523, #0b1220);
  padding:12px 14px 12px 42px;
  color:var(--text);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-transition:border-color .2s ease, -webkit-box-shadow .2s ease;
  transition:border-color .2s ease, -webkit-box-shadow .2s ease;
  transition:border-color .2s ease, box-shadow .2s ease;
  transition:border-color .2s ease, box-shadow .2s ease, -webkit-box-shadow .2s ease;
}
.input:focus{
  outline:none;
  border-color: rgba(39,224,211,.5);
  -webkit-box-shadow: 0 0 0 6px rgba(39,224,211,.12);
          box-shadow: 0 0 0 6px rgba(39,224,211,.12);
}
.input-icon{
  position:absolute; left:12px; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); color:#89a0bf;
}

/* ---------- Buttons ---------- */
.btn{
  border:none; border-radius:14px; padding:.85rem 1.25rem; font-weight:600;
  color:#06111a; position:relative; overflow:hidden;
  -webkit-transition: -webkit-transform .15s ease, -webkit-filter .2s ease;
  transition: -webkit-transform .15s ease, -webkit-filter .2s ease;
  transition: transform .15s ease, filter .2s ease;
  transition: transform .15s ease, filter .2s ease, -webkit-transform .15s ease, -webkit-filter .2s ease;
}
.btn:active{ -webkit-transform: translateY(1px); transform: translateY(1px) }

.btn-accent{
  color:#03181a;
  background: radial-gradient(120% 180% at 50% 0%, var(--accent), #22b7ac);
  -webkit-box-shadow: 0 10px 30px rgba(39,224,211,.30), inset 0 1px 0 rgba(255,255,255,.25);
          box-shadow: 0 10px 30px rgba(39,224,211,.30), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-accent:hover{ -webkit-filter: brightness(1.05); filter: brightness(1.05) }

.btn-ghost{
  background: transparent; color:#d7e6ff;
  border:1px solid rgba(255,255,255,.18);
}
.btn-ghost:hover{ background: rgba(255,255,255,.06) }

/* Subtle glow underline (used on active sidebar item) */
.glow{
  position:relative;
}
.glow::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:8px;
  background: radial-gradient(60% 100% at 50% 50%, rgba(39,224,211,.65), transparent 70%);
  -webkit-filter: blur(10px);
          filter: blur(10px); opacity:.85;
}

/* ---------- Login screen ---------- */
.login-wrap{
  min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden;
}
.wall{
  position:absolute; inset:0; display:grid; place-items:center; gap:30px;
  pointer-events:none; opacity:.65; -webkit-filter: blur(4px) saturate(1.1); filter: blur(4px) saturate(1.1);
}
.wall .tile{
  width:280px; height:180px; border-radius:16px; overflow:hidden; -webkit-transform:rotate(-8deg); transform:rotate(-8deg);
  -webkit-box-shadow: 0 20px 60px rgba(0,0,0,.45);
          box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.wall .row{ display:-webkit-box; display:-ms-flexbox; display:flex; gap:26px; }
.wall .row:nth-child(2){ -webkit-transform:translateX(90px) rotate(6deg); transform:translateX(90px) rotate(6deg); opacity:.9; }
.wall .row:nth-child(3){ -webkit-transform:translateX(-70px) rotate(-4deg); transform:translateX(-70px) rotate(-4deg); opacity:.8; }

/* ---------- App shell ---------- */
.app{
  display:grid; grid-template-columns: 280px 1fr; gap:24px; min-height:calc(100vh - 40px);
  padding:20px; 
}
.sidebar{
  background: -webkit-gradient(linear, left top, left bottom, from(#111828), to(#0e1524));
  background: linear-gradient(180deg, #111828, #0e1524);
  border:1px solid var(--border); border-radius:18px; -webkit-box-shadow: var(--shadow); box-shadow: var(--shadow);
  padding:18px;
}
.brand{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:.3px }
.brand .logo{
  width:32px; height:32px; border-radius:8px;
  background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--accent));
  -webkit-box-shadow: 0 8px 24px rgba(39,224,211,.35);
          box-shadow: 0 8px 24px rgba(39,224,211,.35);
}

.nav{
  list-style:none; padding:14px 8px; margin:10px 0; display:grid; gap:6px;
}
.nav a{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:12px; padding:10px 12px;
  color:#cfe0ff; border-radius:12px; border:1px solid transparent;
  -webkit-transition: background .2s ease, border-color .2s ease, color .2s ease;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.nav a:hover{ background:rgba(255,255,255,.05); border-color:#22314d }
.nav a.active{
  background: rgba(39,224,211,.14);
  border-color: rgba(39,224,211,.35);
  color:#ffffff;
  -webkit-box-shadow: 0 8px 26px rgba(39,224,211,.25);
          box-shadow: 0 8px 26px rgba(39,224,211,.25);
}
.nav a.active .icon{ color: var(--accent) }

.content{
  background: -webkit-gradient(linear, left top, left bottom, from(#0f1523), to(#0c1220));
  background: linear-gradient(180deg, #0f1523, #0c1220);
  border:1px solid var(--border); border-radius:18px; -webkit-box-shadow: var(--shadow); box-shadow: var(--shadow);
  padding:18px 18px 26px;
}

/* Top bar */
.topbar{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:14px; padding:6px 6px 16px 6px;
}
.search{
  position:relative; -webkit-box-flex:1; -ms-flex:1; flex:1;
}
.search input{
  width:100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#0e1626), to(#0b1322));
  background: linear-gradient(180deg, #0e1626, #0b1322);
  color:var(--text); border:1px solid #1c273b; border-radius:999px;
  padding:12px 44px; -webkit-transition: border-color .2s ease, -webkit-box-shadow .25s ease; transition: border-color .2s ease, -webkit-box-shadow .25s ease; transition: box-shadow .25s ease, border-color .2s ease; transition: box-shadow .25s ease, border-color .2s ease, -webkit-box-shadow .25s ease;
}
.search input:focus{
  outline:none; border-color: rgba(103,177,255,.55);
  -webkit-box-shadow: 0 0 0 6px rgba(103,177,255,.16);
          box-shadow: 0 0 0 6px rgba(103,177,255,.16);
}
.search .fa-search{ position:absolute; left:16px; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); color:#7fa0d3 }
.userchip{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:10px; padding:8px 12px; border-radius:999px;
  border:1px solid #22314d; color:#d7e7ff;
}
.userchip img{ width:28px; height:28px; border-radius:50% }

.section-title{ font-weight:700; font-size:20px; margin:6px 0 12px }

/* Project cards */
.grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:16px }
.card{
  background: #0e1626; border:1px solid #1c273b; border-radius:16px; overflow:hidden;
  -webkit-box-shadow: 0 10px 30px rgba(0,0,0,.35);
          box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.card .cover{ aspect-ratio: 16/10; -o-object-fit:cover; object-fit:cover; width:100% }
.card .meta{ padding:10px 12px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:10px; }
.tag{
  padding:.25rem .55rem; border-radius:999px; font-size:12px;
  color:#cfe6ff; border:1px solid #314563; background: #0b1528;
}
.card .actions{ display:-webkit-box; display:-ms-flexbox; display:flex; gap:8px }
.btn-mini{
  border:1px solid #2a3c5b; background: #0a1426; color:#e4f1ff; padding:.35rem .6rem; border-radius:999px; font-size:12px;
}
.btn-mini:hover{ border-color:#38527a }

/* animations */
.fade-in{ -webkit-animation:fade .28s ease both; animation:fade .28s ease both }
@-webkit-keyframes fade{ from{ opacity:0; -webkit-transform: translateY(6px); transform: translateY(6px) } to{ opacity:1; -webkit-transform:none; transform:none } }
@keyframes fade{ from{ opacity:0; -webkit-transform: translateY(6px); transform: translateY(6px) } to{ opacity:1; -webkit-transform:none; transform:none } }

/* Glow for selected style */
.style-selected {
  -webkit-box-shadow: 0 0 0 3px rgba(39,224,211,0.8), 
              0 0 18px rgba(39,224,211,0.7);
          box-shadow: 0 0 0 3px rgba(39,224,211,0.8), 
              0 0 18px rgba(39,224,211,0.7);
  border-color: rgba(39,224,211,0.9);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

/* Glow + Pulse for selected style card */
.style-selected {
  border-color: rgba(39,224,211,0.9) !important;
  -webkit-animation: stylePulse 2s ease-in-out infinite;
          animation: stylePulse 2s ease-in-out infinite;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
  transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

.style-selected .tag {
  background: rgba(39,224,211,0.15);
  border-color: rgba(39,224,211,0.6);
  color: #27e0d3;
}

/* Keyframes for pulsing glow */
@-webkit-keyframes stylePulse {
  0% {
    -webkit-box-shadow: 0 0 0 3px rgba(39,224,211,0.8),
                0 0 18px rgba(39,224,211,0.6);
            box-shadow: 0 0 0 3px rgba(39,224,211,0.8),
                0 0 18px rgba(39,224,211,0.6);
  }
  50% {
    -webkit-box-shadow: 0 0 0 5px rgba(39,224,211,0.4),
                0 0 28px rgba(39,224,211,0.9);
            box-shadow: 0 0 0 5px rgba(39,224,211,0.4),
                0 0 28px rgba(39,224,211,0.9);
  }
  100% {
    -webkit-box-shadow: 0 0 0 3px rgba(39,224,211,0.8),
                0 0 18px rgba(39,224,211,0.6);
            box-shadow: 0 0 0 3px rgba(39,224,211,0.8),
                0 0 18px rgba(39,224,211,0.6);
  }
}
@keyframes stylePulse {
  0% {
    -webkit-box-shadow: 0 0 0 3px rgba(39,224,211,0.8),
                0 0 18px rgba(39,224,211,0.6);
            box-shadow: 0 0 0 3px rgba(39,224,211,0.8),
                0 0 18px rgba(39,224,211,0.6);
  }
  50% {
    -webkit-box-shadow: 0 0 0 5px rgba(39,224,211,0.4),
                0 0 28px rgba(39,224,211,0.9);
            box-shadow: 0 0 0 5px rgba(39,224,211,0.4),
                0 0 28px rgba(39,224,211,0.9);
  }
  100% {
    -webkit-box-shadow: 0 0 0 3px rgba(39,224,211,0.8),
                0 0 18px rgba(39,224,211,0.6);
            box-shadow: 0 0 0 3px rgba(39,224,211,0.8),
                0 0 18px rgba(39,224,211,0.6);
  }
}

#promptBox {
  display: none;
}