/* v5: Close-look theme (original implementation) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --brand:#1463ff;           /* primary blue */
  --brand-2:#5b8bff;         /* secondary blue */
  --text:#1f2a37;
  --muted:#6b7280;
  --hero-start:#e9f1ff;
  --hero-end:#ffffff;
  --radius-lg:18px;
  --radius-md:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
html[data-bs-theme="dark"]{
  --text:#e5e7eb;
  --muted:#9ca3af;
  --hero-start:#0e1117;
  --hero-end:#0b0f14;
  --shadow:0 10px 40px rgba(0,0,0,.35);
}
html,body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans Thai','Noto Sans',Arial,sans-serif;color:var(--text)}

.navbar{backdrop-filter:saturate(180%) blur(8px)}
.navbar .navbar-brand{font-weight:800; letter-spacing:.2px}
.navbar .btn{border-radius:10px}

.bg-hero{
  background:
    radial-gradient(900px 400px at 20% -120px, var(--hero-start), transparent 60%),
    radial-gradient(900px 400px at 80% -120px, var(--hero-start), transparent 60%),
    linear-gradient(180deg, var(--hero-end), var(--hero-end));
}
.hero-wrap{padding:56px 0}
.hero-title{font-weight:800;letter-spacing:.2px}
.hero-sub{max-width:760px;margin:12px auto 0;color:var(--muted)}
.card-soft{border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.input-group-text{background:#f3f6ff;border:1px solid #e2e8ff}
.form-control-lg{border-radius:12px}

.section{padding:64px 0}
.section-title{font-weight:800;margin-bottom:10px}
.section-sub{color:var(--muted)}
.icon-bullet{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg, rgba(20,99,255,.12), rgba(91,139,255,.12));
}

.stats .stat{text-align:center;border-radius:var(--radius-lg)}
.stats .stat .num{font-size:42px;font-weight:800}

.footer-links a{color:inherit;text-decoration:none}
.footer-links a:hover{text-decoration:underline}

/* Utilities */
.text-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table .btn{margin-inline:2px}


/* ===== Custom Gradient Header (no Bootstrap navbar) ===== */
.site-header{
  position: sticky; top:0; z-index: 1030;
  background: linear-gradient(90deg, #1463ff 0%, #5b8bff 50%, #7aa3ff 100%);
  color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{ color:#fff; font-weight:800; font-size:1.25rem; text-decoration:none; letter-spacing:.2px }
.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff;
}
.menu-toggle:hover{ background:rgba(255,255,255,.15) }
.menu{
  display:none; flex-direction:column; gap:10px;
  position:absolute; top:100%; left:0; right:0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  padding: 12px; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
  border-top:1px solid rgba(255,255,255,.2);
}
.menu a, .menu .theme-btn{
  color:#fff; text-decoration:none; padding:10px 12px; border-radius:10px;
  display:inline-block; border:1px solid transparent;
}
.menu a:hover{ background: rgba(255,255,255,.12) }
.btn-ghost{ border-color: rgba(255,255,255,.35) }
.btn-solid{ background:#fff; color:#1463ff !important; border-color:#fff; font-weight:600 }
.theme-btn{ background: transparent; border:1px solid rgba(255,255,255,.35) }

/* Desktop */
@media (min-width: 992px){
  .menu-toggle{ display:none }
  .menu{ position:static; display:flex !important; flex-direction:row; align-items:center; gap:10px; background:transparent; padding:0; border:none }
  .menu a, .menu .theme-btn{ padding:8px 12px }
}

/* Open state */
.site-header.open .menu{ display:block }

/* ===== Nicer Footer ===== */
.site-footer{
  background: radial-gradient(800px 400px at 0% -20%, rgba(20,99,255,.08), transparent), 
              linear-gradient(180deg, rgba(0,0,0,.02), transparent);
  padding-top: 40px;
  border-top: 1px solid rgba(0,0,0,.06);
}
:root[data-bs-theme="dark"] .site-footer,
html[data-bs-theme="dark"] .site-footer{
  background: radial-gradient(800px 400px at 0% -20%, rgba(122,163,255,.08), transparent),
              linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border-top: 1px solid rgba(255,255,255,.08);
}
.foot-grid{ display:grid; grid-template-columns: repeat(1,1fr); gap:24px; padding: 0 0 24px 0 }
@media (min-width: 768px){ .foot-grid{ grid-template-columns: repeat(4,1fr) } }
.foot-brand{ font-weight:800; font-size:1.1rem; margin-bottom:8px }
.foot-title{ font-weight:700; margin-bottom:8px }
.foot-text{ color: var(--muted) }
.foot-links{ list-style:none; padding:0; margin:0 }
.foot-links li{ margin: 6px 0 }
.foot-links a{ color: inherit; text-decoration: none }
.foot-links a:hover{ text-decoration: underline }
.foot-news{ display:flex; gap:8px; margin-top:8px }
.foot-news input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.15) }
:root[data-bs-theme="dark"] .foot-news input,
html[data-bs-theme="dark"] .foot-news input{ border-color: rgba(255,255,255,.2); background: transparent; color: inherit }
.foot-news button{ padding:10px 14px; border-radius:10px; background:#1463ff; color:#fff; border:none }
.foot-bottom{ padding: 14px 0; border-top: 1px dashed rgba(0,0,0,.08); text-align:center }
:root[data-bs-theme="dark"] .foot-bottom,
html[data-bs-theme="dark"] .foot-bottom{ border-top-color: rgba(255,255,255,.12) }


/* === Closer to the example (header + hero + cards + footer) === */
:root{
  --brand:#5A5CFF;
  --brand2:#6F2BFF;
  --pink:#FF4DA2;
  --vio:#6C5CE7;
  --deep:#3f51b5;
  --radius-xl:22px;
  --radius-lg:18px;
  --radius-md:14px;
}

/* Brand badge like LINK | SHORT */
.brand-left{color:#fff;background:transparent;font-weight:800}
.brand-right{margin-left:6px; padding:4px 8px; border-radius:8px; background:#FF4DA2; color:#fff; font-weight:800}

/* HEADER gradient + menu styles */
.site-header{
  position: sticky; top:0; z-index: 1030;
  background: linear-gradient(180deg, #4a6cff 0%, #5a5cff 60%, #5b2cff 100%);
  color: #fff;
  box-shadow: 0 4px 22px rgba(0,0,0,.12);
}
.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{ color:#fff; font-weight:800; font-size:1.25rem; text-decoration:none }
.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff;
}
.menu-toggle:hover{ background:rgba(255,255,255,.15) }
.menu{
  display:none; flex-direction:column; gap:10px;
  position:absolute; top:100%; left:0; right:0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  padding: 12px; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
  border-top:1px solid rgba(255,255,255,.2);
}
.menu a, .menu .theme-btn{
  color:#fff; text-decoration:none; padding:10px 12px; border-radius:12px;
  display:inline-block; border:1px solid transparent;
}
.menu a i{ margin-right:8px }
.menu a:hover{ background: rgba(255,255,255,.12) }
.btn-ghost{ border-color: rgba(255,255,255,.35) }
.btn-solid{ background:#fff; color:#5b2cff !important; border-color:#fff; font-weight:700 }
.btn-solid.cta{ background: linear-gradient(135deg, #ff4da2, #ff7ac4); color:#fff !important; border:none }
.btn-solid.alt{ background: linear-gradient(135deg, #00b894, #00cec9); color:#fff !important; border:none }
.theme-btn{ background: transparent; border:1px solid rgba(255,255,255,.35) }

@media (min-width: 992px){
  .menu-toggle{ display:none }
  .menu{ position:static; display:flex !important; flex-direction:row; align-items:center; gap:10px; background:transparent; padding:0; border:none }
  .menu a, .menu .theme-btn{ padding:8px 12px }
}
.site-header.open .menu{ display:block }

/* HERO card like screenshot */
.bg-hero{ background: linear-gradient(180deg,#f5f7ff 0%, #ffffff 100%) }
.hero-card{
  background: linear-gradient(180deg, #f8f5ff, #fff);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 50px rgba(93,84,247,.12);
  border: 1px solid rgba(93,84,247,.12);
  padding: 28px;
}
.hero-title{ font-weight:900; color:#3b4bd6; }
.hero-sub{ color:#6b7280 }
.input-ghost{
  background:#fff; border:1px solid #e5e7eb; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.05) inset;
}
.btn-cut{
  background: linear-gradient(135deg, #5a5cff, #7c3aed);
  color:#fff; border:none; padding: 12px 18px; border-radius: 14px; font-weight:700
}
.btn-cut i{ margin-right:8px }

/* Feature/stat cards rounded and underline accent */
.card-elevated{
  background:#fff; border:0; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.06);
  position:relative; overflow:hidden;
}
.card-elevated::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background: linear-gradient(90deg, #4a6cff, #ff4da2);
}
.stat .num{ color:#4a6cff }

/* FOOTER dark */
.site-footer.dark{
  background:#0f172a;
  color:#e5e7eb;
  padding-top: 48px;
  border-top:4px solid #4a6cff;
}
.site-footer .foot-title{ color:#e5e7eb; position:relative; padding-bottom:6px; margin-bottom:8px }
.site-footer .foot-title::after{ content:""; position:absolute; left:0; bottom:0; width:42px; height:3px; background:#4a6cff; border-radius:4px }
.site-footer .foot-text{ color:#a3aab8 }
.site-footer .foot-links a{ color:#cad2e1 }
.site-footer .foot-links a:hover{ color:#fff }
.site-footer .foot-contact{ list-style:none; padding:0; margin:0; color:#cad2e1 }
.site-footer .foot-contact li{ margin:6px 0 }
.site-footer .foot-contact i{ margin-right:8px; color:#7aa3ff }
.foot-socials a{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:10px; background:#161e35; color:#fff; margin-right:6px }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.08); padding: 14px 0; text-align:center; color:#9aa3b2 }


/* v7-clean-mobile: enforce vertical stacked mobile menu */
@media (max-width: 991.98px){
  .menu{ 
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column !important; align-items: stretch !important; gap: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    padding: 12px; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
    border-top: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(6px);
  }
  .site-header.open .menu{ display:flex !important; }
  .menu a, .menu .theme-btn{
    display: block; width: 100%; text-align: left;
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.06);
    margin: 0;
  }
  .menu a i{ margin-right: 8px }
  .menu .btn-solid.cta{ border: none }
}


/* v7-clean-mobile-pad: add safe gutters for header menu + footer on small screens */
@media (max-width: 575.98px){
  /* Header inner spacing (logo + hamburger) */
  .header-inner{ padding-left: 16px; padding-right: 16px; }

  /* Dropdown menu keep gutters from edges */
  .menu{ left: 12px; right: 12px; }

  /* Footer containers with comfy side padding */
  .site-footer .foot-grid,
  .site-footer .foot-bottom{ padding-left: 16px; padding-right: 16px; }
}
\n
/* v7-clean-mobile-pad2: stronger side gutters for logo & hamburger + safe area support */
@media (max-width: 575.98px){
  .header-inner{
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .brand{ margin-left: 2px; }
  .menu-toggle{ margin-right: 2px; }
}


/* v7-clean-mobile-pad3: no border on hamburger; 20px side gutters for logo & hamburger on mobile */
.menu-toggle{ border: none !important; background: transparent !important; box-shadow: none !important; }
.menu-toggle:hover{ background: rgba(255,255,255,.12) !important; }

@media (max-width: 575.98px){
  .header-inner{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .brand{ margin-left: 0 !important; }
  .menu-toggle{ margin-right: 0 !important; }
}


/* v7-clean-mobile-pad4: darker background for mobile dropdown menu */
@media (max-width: 991.98px){
  .menu{
    background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(30,41,82,0.92)) !important; /* deep slate/indigo */
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    border-top-color: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
  }
}

/* v11-zindex: ensure mobile dropdown menu overlays content */
@media (max-width: 991.98px){
  .menu{ z-index: 1040; }
}

/* ===== CTA Register Block ===== */
.cta-register .cta-card{
  background: linear-gradient(135deg, #5a5cff, #7c3aed);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(92,84,247,.25);
  color: #fff;
}
.cta-register .cta-list{ list-style: none; padding-left: 0 }
.cta-register .cta-list li{ margin: 6px 0 }
.cta-register .cta-list i{ width: 20px; margin-right: 8px }
.cta-register .btn{ border-radius: 12px }

/* Simple illustrative mini card */
.cta-register .illus-card{
  background: #ffffff10;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px; padding: 12px; display:inline-block; min-width: 260px;
}
.cta-register .illus-row{ display:flex; align-items:center; gap:6px; margin-bottom:10px }
.cta-register .illus-row .dot{ width:10px; height:10px; border-radius:50%; background:#ff7ac4 }
.cta-register .illus-row .bar{ height:8px; width:36px; border-radius:6px; background:#ffffff40 }
.cta-register .illus-body .illus-line{ height:12px; margin:8px 0; border-radius:6px; background:#ffffff50 }
.text-white-75{ color: rgba(255,255,255,.75) !important }
.text-white-50{ color: rgba(255,255,255,.5) !important }

/* ===== Admin CTA Block ===== */
.cta-admin .admin-card{
  background: linear-gradient(135deg, #00b894, #00cec9);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0, 206, 201, .25);
  color: #fff;
}
.cta-admin .cta-list{ list-style: none; padding-left: 0 }
.cta-admin .cta-list li{ margin: 6px 0 }
.cta-admin .cta-list i{ width: 22px; margin-right: 8px }
.cta-admin .btn{ border-radius: 12px }
.admin-stats .stat-card{
  background: #ffffff10;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
}
.admin-stats .stat-card .num{ font-size: 28px; font-weight: 800; color:#fff }
.admin-stats .stat-card .label{ color: rgba(255,255,255,.8) }


/* v21: user dashboard table column sizing */
.col-short{ min-width: 200px }
.col-url{ min-width: 280px }
.col-clicks{ width: 90px }
.col-date{ width: 180px }

/* v22: auth page card spacing */
.card-elevated form .form-control{ margin-bottom: 12px }
.card-elevated form .btn{ border-radius: 12px }

/* === Admin UI Enhancements === */
:root{ --card-radius: 1.25rem; --soft-shadow: 0 8px 24px rgba(0,0,0,.08); }
.card.card-link{ border:none; border-radius:var(--card-radius); transition:transform .15s, box-shadow .15s; }
.card.card-link:hover{ transform:translateY(-2px); box-shadow:var(--soft-shadow); }
.shadow-soft{ box-shadow: var(--soft-shadow); }
.stat-card{ border:1px solid rgba(0,0,0,.06); border-radius:var(--card-radius); padding:16px; background:#fff; }
.admin-hero{ background: radial-gradient(1200px 300px at 10% -20%, rgba(13,110,253,.12), transparent 60%), radial-gradient(800px 200px at 90% -10%, rgba(32,201,151,.12), transparent 60%); border-radius:1.25rem; padding:28px 24px; }
.ad-slot .ad-item{ margin:10px 0; text-align:center }