/* ═══════════════════════════════════════════════════════════════════════════════
   UDMARKETING — UNIFIED DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root{
  /* ─── COLORS ─────────────────────────────────────────────────────────────── */
  --yellow:#FFD000;
  --yellow-dark:#E6BB00;
  --yellow-light:#FFF3A3;
  
  --black:#0A0A0A;
  --black2:#111111;
  --black3:#1A1A1A;
  
  --grey:#404040;
  --grey2:#6B6B6B;
  --grey3:#9A9A9A;
  --grey4:#C8C8C8;
  
  --off:#F5F5F0;
  --white:#FFFFFF;
  --border:#E8E8E8;
  --border-dark:rgba(255,255,255,0.1);
  
  --success:#1A7F4B;
  --warn:#C47F1A;
  --danger:#C0392B;
  
  /* ─── SPACING & SIZING ───────────────────────────────────────────────────── */
  --radius:12px;
  --radius-lg:20px;
  --nav-height:72px;
  --announcement-height:36px;
}

html{scroll-behavior:smooth;}

body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--white);
  color:var(--black);
  overflow-x:hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
   ═══════════════════════════════════════════════════════════════════════════════ */

.announcement-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:300;
  height:var(--announcement-height);
  background:var(--yellow);
  color:var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */

nav{
  position:fixed;
  top:var(--announcement-height);
  left:0;
  right:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 56px;
  height:var(--nav-height);
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
}

nav.scrolled{
  box-shadow:0 2px 20px rgba(0,0,0,0.08);
}

.nav-logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.logo-mark{
  width:36px;
  height:36px;
  background:var(--yellow);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
  color:var(--black);
}

.logo-text{
  font-size:17px;
  font-weight:800;
  color:var(--black);
  letter-spacing:-0.5px;
}

.logo-text span{
  color:var(--grey2);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:32px;
}

.nav-links a{
  font-size:14px;
  font-weight:500;
  color:var(--grey);
  text-decoration:none;
  transition:color .15s;
}

.nav-links a:hover{
  color:var(--black);
}

.nav-back{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  font-weight:600;
  color:var(--grey2);
  text-decoration:none;
  transition:color .15s;
}

.nav-back:hover{
  color:var(--black);
}

.nav-back::before{
  content:'←';
  font-size:16px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MAIN CONTENT OFFSET (for announcement bar + nav)
   ═══════════════════════════════════════════════════════════════════════════════ */

body > section:first-of-type,
body > main,
.tool-header{
  margin-top:calc(var(--announcement-height) + var(--nav-height));
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOOL HEADER
   ═══════════════════════════════════════════════════════════════════════════════ */

.tool-header{
  padding:100px 56px 44px;
  background:var(--black);
  position:relative;
  overflow:hidden;
  margin-top:calc(var(--announcement-height) + var(--nav-height)) !important;
}

.tool-header::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,208,0,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,208,0,0.04) 1px,transparent 1px);
  background-size:48px 48px;
}

.tool-header-glow{
  position:absolute;
  top:-80px;
  right:-80px;
  width:400px;
  height:400px;
  background:radial-gradient(circle,rgba(255,208,0,0.1) 0%,transparent 65%);
  pointer-events:none;
}

.breadcrumb{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,0.3);
  margin-bottom:16px;
  letter-spacing:0.3px;
  position:relative;
  z-index:2;
}

.breadcrumb a{
  color:rgba(255,255,255,0.3);
  text-decoration:none;
  transition:color .15s;
}

.breadcrumb a:hover{
  color:var(--yellow);
}

.breadcrumb span{
  margin:0 8px;
  opacity:0.4;
}

.tool-header-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  position:relative;
  z-index:2;
}

h1{
  font-size:clamp(36px,5vw,60px);
  font-weight:800;
  letter-spacing:-2px;
  line-height:1;
  color:var(--white);
}

.tool-badge{
  background:var(--yellow);
  color:var(--black);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  padding:6px 12px;
  border-radius:6px;
  text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOOL CONTAINER
   ═══════════════════════════════════════════════════════════════════════════════ */

.tool-container{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:40px;
  padding:48px 56px;
  background:var(--white);
  max-width:1400px;
  margin:0 auto;
}

@media(max-width:1024px){
  .tool-container{
    grid-template-columns:1fr;
    padding:40px 32px;
  }
}

/* ─── TOOL MAIN ───────────────────────────────────────────────────────────── */

.tool-main{
  display:flex;
  flex-direction:column;
  gap:32px;
}

.tool-panel{
  background:var(--off);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:24px;
}

.field:last-child{
  margin-bottom:0;
}

.field-label{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--grey);
}

.field input,
.field textarea,
.field select{
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  color:var(--black);
  background:var(--white);
  transition:border-color .15s;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(255,208,0,0.1);
}

.field textarea{
  resize:vertical;
  min-height:120px;
  font-size:15px;
  line-height:1.6;
}

.divider{
  height:1px;
  background:var(--border);
  margin:24px 0;
}

.results{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:16px;
}

.res-box{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  text-align:center;
}

.res-val{
  font-size:24px;
  font-weight:800;
  color:var(--black);
  margin-bottom:4px;
  word-break:break-word;
}

.res-lbl{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--grey2);
}

.formula{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-top:16px;
}

.formula-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--grey2);
  margin-bottom:8px;
}

.formula-text{
  font-size:14px;
  color:var(--grey);
  line-height:1.6;
}

.checks{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:24px;
}

.check-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:13px;
}

.check-key{
  font-weight:500;
  color:var(--grey);
}

.check-val{
  font-weight:600;
  color:var(--grey2);
}

.check-val.s-ok{
  color:var(--success);
}

.check-val.s-warn{
  color:var(--warn);
}

.check-val.s-bad{
  color:var(--danger);
}

.char-ct{
  font-weight:600;
  font-size:12px;
}

.char-ct.ok{
  color:var(--success);
}

.char-ct.warn{
  color:var(--warn);
}

.char-ct.bad{
  color:var(--danger);
}

.chk{
  font-size:13px;
  font-weight:500;
  color:var(--grey2);
  padding:8px 0;
}

.chk::before{
  content:'⏳ ';
}

.chk.ok::before{
  content:'✓ ';
  color:var(--success);
}

.chk.warn::before{
  content:'⚠ ';
  color:var(--warn);
}

.chk.bad::before{
  content:'✗ ';
  color:var(--danger);
}

.density-section{
  margin-top:24px;
}

#dList{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

.d-row{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
}

.d-word{
  font-weight:600;
  color:var(--black);
  min-width:80px;
}

.d-bar{
  flex:1;
  height:6px;
  background:var(--border);
  border-radius:3px;
  overflow:hidden;
}

.d-fill{
  height:100%;
  background:var(--yellow);
}

.d-ct{
  font-weight:600;
  color:var(--grey2);
  min-width:30px;
  text-align:right;
}

.code-box{
  background:var(--black);
  color:var(--white);
  padding:16px;
  border-radius:var(--radius);
  font-family:'Courier New',monospace;
  font-size:13px;
  line-height:1.6;
  overflow-x:auto;
  white-space:pre-wrap;
  word-break:break-all;
}

.preview-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--grey2);
  margin-top:24px;
  margin-bottom:12px;
}

.g-preview{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:16px;
}

.g-url{
  font-size:12px;
  color:var(--yellow-dark);
  margin-bottom:4px;
}

.g-title{
  font-size:16px;
  font-weight:600;
  color:var(--black);
  margin-bottom:4px;
  line-height:1.3;
}

.g-desc{
  font-size:13px;
  color:var(--grey2);
  line-height:1.5;
}

.scale-track{
  height:6px;
  background:var(--border);
  border-radius:3px;
  position:relative;
  margin:24px 0;
}

.scale-ptr{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  background:var(--yellow);
  border-radius:50%;
  border:2px solid var(--white);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

.scale-labels{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--grey2);
  font-weight:600;
}

.tips-list{
  margin-top:24px;
}

#tips{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

.tip-item{
  background:var(--white);
  border-left:3px solid var(--yellow);
  padding:12px 16px;
  border-radius:var(--radius);
  font-size:13px;
  color:var(--grey);
  line-height:1.6;
}

.tip-item.warn{
  border-left-color:var(--warn);
}

.tip-item.ok{
  border-left-color:var(--success);
}

.score-ring{
  width:100%;
  aspect-ratio:1;
  border:3px solid var(--yellow);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}

.score-big{
  font-size:48px;
  font-weight:800;
  color:var(--yellow);
}

.score-desc{
  font-size:13px;
  font-weight:600;
  color:var(--grey2);
  margin-top:12px;
  text-align:center;
}

/* ─── TOOL SIDEBAR ────────────────────────────────────────────────────────── */

.tool-sidebar{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.stat-box{
  background:var(--off);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  text-align:center;
}

.stat-box .num{
  font-size:24px;
  font-weight:800;
  color:var(--black);
  margin-bottom:4px;
}

.stat-box .lbl{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--grey2);
}

.sidebar-tip{
  background:var(--yellow-light);
  border:1px solid var(--yellow);
  border-radius:var(--radius);
  padding:16px;
}

.tip-title{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--black);
  margin-bottom:8px;
}

.tip-text{
  font-size:13px;
  color:var(--black);
  line-height:1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.btn{
  padding:12px 24px;
  border:none;
  border-radius:var(--radius);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.btn-primary{
  background:var(--yellow);
  color:var(--black);
}

.btn-primary:hover{
  background:var(--yellow-dark);
}

.btn-secondary{
  background:var(--off);
  color:var(--black);
  border:1px solid var(--border);
}

.btn-secondary:hover{
  background:var(--white);
  border-color:var(--grey);
}

.btn-ghost{
  background:transparent;
  color:var(--grey);
  border:1px solid var(--border);
}

.btn-ghost:hover{
  color:var(--black);
  border-color:var(--black);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INFO SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.info-section{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px;
  padding:48px 56px;
  background:var(--off);
}

@media(max-width:768px){
  .info-section{
    padding:40px 32px;
  }
}

.info-block h2{
  font-size:20px;
  font-weight:800;
  letter-spacing:-0.5px;
  margin-bottom:12px;
  color:var(--black);
}

.info-block p{
  font-size:14px;
  color:var(--grey);
  line-height:1.8;
  margin-bottom:16px;
}

.info-block p:last-child{
  margin-bottom:0;
}

.faq-item{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

.faq-q{
  font-size:14px;
  font-weight:700;
  color:var(--black);
  margin-bottom:8px;
}

.faq-a{
  font-size:13px;
  color:var(--grey);
  line-height:1.7;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════════ */

footer{
  background:var(--black);
  color:var(--white);
  padding:48px 56px 24px;
}

.footer-inner{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:40px;
  margin-bottom:32px;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
}

.footer-logo-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.footer-logo-mark{
  width:32px;
  height:32px;
  background:var(--yellow);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:800;
  color:var(--black);
}

.footer-logo-text{
  font-size:15px;
  font-weight:800;
  color:var(--white);
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-links a{
  font-size:13px;
  color:rgba(255,255,255,0.6);
  text-decoration:none;
  transition:color .15s;
}

.footer-links a:hover{
  color:var(--yellow);
}

.footer-copy{
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,0.4);
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TABS & TOGGLES
   ═══════════════════════════════════════════════════════════════════════════════ */

.tabs{
  display:flex;
  gap:12px;
  margin-bottom:24px;
  border-bottom:1px solid var(--border);
}

.tab{
  padding:12px 16px;
  border:none;
  background:transparent;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--grey);
  cursor:pointer;
  transition:all .2s;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}

.tab:hover{
  color:var(--black);
}

.tab.active{
  color:var(--black);
  border-bottom-color:var(--yellow);
}

.tag-pill{
  display:inline-block;
  background:var(--off);
  border:1px solid var(--border);
  color:var(--grey);
  padding:8px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all .2s;
}

.tag-pill:hover{
  border-color:var(--yellow);
  color:var(--yellow);
}

.tag-pill.on{
  background:var(--yellow);
  color:var(--black);
  border-color:var(--yellow);
}

#grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}

.act-row{
  display:flex;
  gap:12px;
  margin-top:24px;
}

.act-row .btn-primary{
  flex:1;
}

.act-bar{
  background:var(--off);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 16px;
  font-size:13px;
  color:var(--grey2);
  word-break:break-all;
  margin-bottom:16px;
}

.act-bar.active{
  background:var(--yellow-light);
  border-color:var(--yellow);
  color:var(--black);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════════ */

@media(max-width:768px){
  nav{
    padding:0 24px;
  }
  
  .tool-header{
    padding:80px 24px 32px;
  }
  
  .tool-container{
    padding:32px 24px;
    gap:32px;
  }
  
  footer{
    padding:32px 24px 16px;
  }
  
  .tool-header-row{
    flex-direction:column;
    align-items:flex-start;
  }
  
  h1{
    font-size:32px;
  }
}

@media(max-width:480px){
  :root{
    --announcement-height:32px;
    --nav-height:64px;
  }
  
  nav{
    padding:0 16px;
  }
  
  .announcement-bar{
    font-size:11px;
  }
  
  .tool-header{
    padding:60px 16px 24px;
  }
  
  .tool-container{
    padding:24px 16px;
    gap:24px;
  }
  
  .results{
    grid-template-columns:1fr;
  }
  
  footer{
    padding:24px 16px 12px;
  }
}