:root{
  --bg1:#eef2ff;
  --bg2:#f0f9ff;
  --card:#ffffff;
  --primary:#6366f1;
  --accent:#06b6d4;
  --success:#22c55e;
  --text:#0f172a;
  --muted:#64748b;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:"Inter","Segoe UI",system-ui;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  color:var(--text);
}

/* HEADER */
.app-header {
    background: linear-gradient(90deg, #6366f1, #06b6d4);
    padding: 18px 28px;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between; /* logo left, title right */
    color: white;
}

.logo {
    height: 40px;
    width: 150px;
  
}

.title {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* LAYOUT */
.main{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:24px;
  padding:24px;
}

/* CARD */
.card{
  background:var(--card);
  border-radius:18px;
  padding:20px;
  box-shadow:0 18px 40px rgba(15,23,42,.15);
}

.card h3{
  margin:0 0 14px;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--primary);
}

/* INPUT */
textarea{
  width:100%;
  height:320px;
  background:#f8fafc;
  border-radius:14px;
  border:1px solid #e2e8f0;
  padding:14px;
  font-size:14px;
}

textarea:focus{
  outline:none;
  border-color:var(--primary);
}

/* BUTTONS */
.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:16px;
}

button{
  border:none;
  border-radius:14px;
  padding:12px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.btn-generate{
  background:linear-gradient(90deg,#6366f1,#818cf8);
  color:white;
}

.btn-pdf{
  background:linear-gradient(90deg,#22c55e,#4ade80);
  color:white;
}

/* PREVIEW */
.preview{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:18px;
}

.qr-box{
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border-radius:16px;
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.qr-img{
  width:120px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e2e8f0;
  border-radius:12px;
}

.qr-text{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  max-width:140px;
  word-break:break-word;
}

/* LOADER */
.loader{
  position:fixed;
  inset:0;
  background:rgba(99,102,241,.25);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.loader-box{
  width:340px;
  background:white;
  padding:24px;
  border-radius:20px;
  box-shadow:0 30px 60px rgba(15,23,42,.25);
  text-align:center;
}

.progress{
  height:8px;
  background:#e2e8f0;
  border-radius:6px;
  overflow:hidden;
  margin:14px 0;
}

.progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#6366f1,#06b6d4);
}

.loader-text{ font-size:13px; }


.leftsidebox {
    border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);

    background: var(--bg, transparent);
}

.leftsidebox:hover {
    background: linear-gradient(120deg, #6365f13f, #06b5d438);
    box-shadow: 0 0 0 1px linear-gradient(180deg, #6366f1, #06b6d4);
}



/* / */
/* ===== Footer Base (LOW HEIGHT) ===== */
.app-footer {
    background: #020617;
    color: #cbd5f5;
    padding: 10px 15px 5px;   /* ⬅ reduced height */
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* Top section */
.app-footer table {
    width: 100%;
    border-collapse: collapse;
}

.app-footer td {
    vertical-align: middle;
    padding: 6px 10px;       /* ⬅ reduced spacing */
}

/* Logo small */
.app-footer img {
    width: 110px;            /* ⬅ smaller logo */
    margin-bottom: 6px;
}

/* Description text small */
.app-footer p {
    max-width: 500px;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    color: #94a3b8;
}


/* Links */
.footer-links a {
 
    color: #38bdf8;
    font-size: 14px;
    text-decoration: none;
    margin-left:60%;
  
}

/* ===== Bottom Bar ===== */
.footer-bottom {
    margin-top: 12px;        /* ⬅ very small gap */
    padding-top: 8px;
    border-top: 1px solid rgba(148,163,184,0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Left */
.footer-left {
    font-size: 12px;
}

/* Right */
.footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-right a {
    font-size: 12px;
    color: #cbd5f5;
}

/* Version badge compact */
.footer-right span {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(56,189,248,0.15);
    color: #38bdf8;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .app-footer td {
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 6px;            /* ⬅ tight spacing */
    }
}