/* Teen Toons — Candy/Cartoon Bootstrap Vanilla Theme */

:root{
  --tt-bg1:#fff7ff;
  --tt-bg2:#f3fbff;

  --tt-ink:#0b1020;
  --tt-muted:#56607a;
  --tt-line:#0d1b33;

  --tt-blue:#29b6ff;
  --tt-deep:#1e3cff;

  --tt-yellow:#ffe14d;
  --tt-orange:#ff8b3d;
  --tt-pink:#ff4fd8;
  --tt-lime:#44ff92;
  --tt-red:#ff3b55;

  --tt-card:#ffffff;
  --tt-shadow: 0 18px 45px rgba(18, 33, 74, .20);
  --tt-shadow2: 0 10px 25px rgba(18, 33, 74, .14);
}

body.tt-body{
  color: var(--tt-ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,79,216,.18), transparent 60%),
    radial-gradient(1200px 600px at 90% -10%, rgba(41,182,255,.20), transparent 60%),
    radial-gradient(1000px 600px at 50% 110%, rgba(68,255,146,.15), transparent 60%),
    linear-gradient(180deg, var(--tt-bg1), var(--tt-bg2));
  min-height: 100vh;
}

/* Topbar */
.tt-topbar{
  position: sticky;
  top:0;
  z-index: 50;
  background:
    radial-gradient(800px 260px at 20% 0%, rgba(255,225,77,.35), transparent 60%),
    radial-gradient(800px 260px at 80% 0%, rgba(255,79,216,.26), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.84));
  backdrop-filter: blur(10px);
  border-bottom: 3px solid rgba(13,27,51,.12);
}

.tt-drip{
  height: 14px;
  background:
    radial-gradient(18px 18px at 20px 6px, rgba(255,79,216,.75), transparent 62%),
    radial-gradient(20px 20px at 70px 5px, rgba(41,182,255,.75), transparent 62%),
    radial-gradient(20px 20px at 130px 6px, rgba(255,225,77,.85), transparent 62%),
    radial-gradient(22px 22px at 200px 5px, rgba(68,255,146,.75), transparent 62%),
    linear-gradient(90deg, rgba(255,79,216,.25), rgba(41,182,255,.25), rgba(255,225,77,.25), rgba(68,255,146,.25));
  opacity: .9;
}

/* Logo badge */
.tt-logo-badge{
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius: 18px;
  font-weight: 950;
  letter-spacing: .5px;
  color: #071023;
  background:
    linear-gradient(180deg, #fff, rgba(255,255,255,.6)),
    linear-gradient(135deg, rgba(255,225,77,.95), rgba(41,182,255,.85));
  border: 3px solid rgba(13,27,51,.22);
  box-shadow: var(--tt-shadow2);
}

.tt-title{
  font-weight: 950;
  letter-spacing: .3px;
  font-size: 22px;
  line-height: 1.05;
  color: #0b1020;
  text-shadow: 0 2px 0 rgba(255,255,255,.8);
}
.tt-subtitle{
  font-size: 12.5px;
  color: var(--tt-muted);
}

/* Tabs (existing .tab class from app.js) */
.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.tab{
  border: 3px solid rgba(13,27,51,.18);
  background: rgba(255,255,255,.7);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 8px 18px rgba(18,33,74,.10);
  transition: transform .08s ease, background .15s ease;
  user-select: none;
}
.tab:hover{ transform: translateY(-1px); }
.tab.active{
  background: linear-gradient(135deg, rgba(41,182,255,.28), rgba(255,79,216,.18));
  border-color: rgba(13,27,51,.26);
}

/* Views */
.view.hidden{ display:none; }

/* Teen Toons cards */
.tt-card{
  background: rgba(255,255,255,.88);
  border: 3px solid rgba(13,27,51,.12);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--tt-shadow);
}
.tt-card-title{ font-weight: 950; font-size: 16px; }
.tt-card-subtitle{ color: var(--tt-muted); font-size: 12.5px; margin-top: 4px; }

/* Variants */
.tt-card-danger{
  background:
    radial-gradient(520px 250px at 20% 0%, rgba(255,59,85,.18), transparent 62%),
    rgba(255,255,255,.9);
}
.tt-card-warn{
  background:
    radial-gradient(520px 250px at 20% 0%, rgba(255,225,77,.22), transparent 62%),
    rgba(255,255,255,.9);
}
.tt-card-info{
  background:
    radial-gradient(520px 250px at 20% 0%, rgba(41,182,255,.20), transparent 62%),
    rgba(255,255,255,.9);
}

/* Buttons */
.btn.tt-btn{
  border-radius: 14px !important;
  border: 3px solid rgba(13,27,51,.18) !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 20px rgba(18,33,74,.12);
}
.btn.tt-btn-primary{
  background: linear-gradient(135deg, rgba(41,182,255,.95), rgba(30,60,255,.85)) !important;
  color: #fff !important;
}
.btn.tt-btn-ghost{
  background: rgba(255,255,255,.82) !important;
  color: var(--tt-ink) !important;
}
.btn.tt-btn-danger{
  background: linear-gradient(135deg, rgba(255,59,85,.95), rgba(255,139,61,.85)) !important;
  color:#fff !important;
}

/* Badges / status */
.tt-badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  border: 3px solid rgba(13,27,51,.12);
}
.tt-badge-danger{ background: rgba(255,59,85,.18); }
.tt-badge-warn{ background: rgba(255,225,77,.25); }
.tt-badge-ok{ background: rgba(68,255,146,.22); }
.tt-badge-blue{ background: rgba(41,182,255,.18); }

.tt-small-muted{ color: var(--tt-muted); font-size: 12px; }

/* Forms */
.form-control, .form-select{
  border-radius: 14px !important;
  border: 3px solid rgba(13,27,51,.12) !important;
  background: rgba(255,255,255,.82) !important;
  font-weight: 800;
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(41,182,255,.18) !important;
}

/* Table */
.table.tt-table thead th{
  font-weight: 950;
  color: var(--tt-ink);
  border-bottom: 3px solid rgba(13,27,51,.12) !important;
}
.table.tt-table td{
  border-bottom: 2px dashed rgba(13,27,51,.10) !important;
  vertical-align: middle;
}

/* Scan reader box */
#reader{
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid rgba(13,27,51,.12);
  background: rgba(255,255,255,.7);
}

/* Footer */
.tt-footer{ color: var(--tt-muted); font-size: 12px; padding-bottom: 14px; }

/* Make the existing "row" class in old markup not conflict (Bootstrap also uses .row) */
/* We keep Bootstrap semantics; any old .row inside header is now Bootstrap row anyway. */