/* =========================================================================
 *  FUJN ADS - page styles (advertise pages + banner slot)
 *  Modern, light, matches the Fujn green + purple/orange accents.
 * ========================================================================= */
:root{
  --fujn-green-1:#11998e;
  --fujn-green-2:#38ef7d;
  --fujn-ink:#0f2a24;
  --fujn-muted:#5b6b72;
  --fujn-line:#e7edee;
  --fujn-purple:#6a3df5;
  --fujn-orange:#ff9900;
  --fujn-card:#ffffff;
  --fujn-bg:#f3f7f6;
}
*{box-sizing:border-box}
.fujn-ads-page{
  margin:0;background:var(--fujn-bg);color:var(--fujn-ink);
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
.fujn-ads-page h1,.fujn-ads-page h2,.fujn-ads-page h3,
.fujn-ads-page button,.fujn-ads-page input,.fujn-ads-page select,.fujn-ads-page textarea{
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
.fujn-ads-page a{color:var(--fujn-green-1);text-decoration:none}
.fujn-wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---- top bar ---- */
.fujn-ads-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid var(--fujn-line);
  background:#fff;
}
.fujn-ads-top .brand{display:flex;align-items:center;gap:10px}
.fujn-ads-top .brand-logo{height:30px;width:auto;display:block}
@media (max-width:520px){.fujn-ads-top .brand-logo{height:26px}}
.fujn-ads-top nav a{color:var(--fujn-muted);font-weight:600;margin-left:22px;font-size:14px}
.fujn-ads-top nav a:hover{color:var(--fujn-ink)}

/* ---- hero ---- */
.fujn-hero{
  background:linear-gradient(120deg,#0e8f85,#12b58a 45%,#38ef7d);
  color:#fff;padding:56px 0 64px;position:relative;overflow:hidden;
}
.fujn-hero:after{content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 85% -10%,rgba(255,255,255,.25),transparent 60%);
  pointer-events:none}
.fujn-hero h1{margin:0 0 12px;font-size:clamp(30px,5vw,48px);font-weight:800;letter-spacing:-.5px}
.fujn-hero p{margin:0;max-width:620px;font-size:clamp(15px,2.4vw,18px);opacity:.95}
.fujn-hero .pill{display:inline-block;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);color:#fff;padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:600;margin-bottom:18px;backdrop-filter:blur(4px)}
.fujn-hero-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* ---- buttons ---- */
.fujn-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;
  padding:13px 26px;border-radius:10px;font-weight:700;font-size:15px;
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;
}
.fujn-btn:hover{transform:translateY(-2px)}
.fujn-btn--primary{
  background-image:linear-gradient(120deg,var(--fujn-orange),#ffd26a,var(--fujn-orange));
  background-size:200% 100%;color:#3a2400 !important;
  box-shadow:0 8px 22px rgba(255,153,0,.35)}
.fujn-btn--primary:hover{background-position:100% 0}
.fujn-btn--ghost{background:rgba(255,255,255,.14);color:#fff !important;border:1px solid rgba(255,255,255,.5)}
.fujn-btn--purple{
  background-image:linear-gradient(90deg,#6a3df5,#5b4bff,#3bb7ff,#b34bff);
  background-size:300% 100%;color:#fff !important;box-shadow:0 8px 22px rgba(106,61,245,.3)}
.fujn-btn--purple:hover{background-position:100% 0}
.fujn-btn--block{width:100%;justify-content:center}

/* ---- layout cards ---- */
.fujn-section{padding:46px 0}
.fujn-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:26px;align-items:start}
.fujn-card{
  background:var(--fujn-card);border:1px solid var(--fujn-line);border-radius:16px;
  padding:26px;box-shadow:0 10px 30px rgba(16,42,36,.05)}
.fujn-card h2{margin:0 0 6px;font-size:22px;font-weight:800}
.fujn-card .sub{color:var(--fujn-muted);margin:0 0 22px;font-size:15px}

/* ---- form ---- */
.fujn-field{margin-bottom:18px}
.fujn-field label{display:block;font-weight:700;font-size:14px;margin-bottom:7px}
.fujn-field .hint{font-weight:400;color:var(--fujn-muted);font-size:12.5px}
.fujn-input,.fujn-select,.fujn-textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--fujn-line);border-radius:10px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--fujn-ink);transition:border-color .15s,box-shadow .15s}
.fujn-input:focus,.fujn-select:focus,.fujn-textarea:focus{
  outline:none;border-color:var(--fujn-green-1);box-shadow:0 0 0 3px rgba(17,153,142,.15)}
.fujn-textarea{min-height:92px;resize:vertical}
.fujn-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fujn-hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}

/* live preview */
.fujn-preview{
  margin-top:8px;border:1.5px dashed var(--fujn-line);border-radius:10px;padding:16px;
  text-align:center;background:#fafcfc;min-height:82px;display:flex;align-items:center;justify-content:center}
.fujn-preview img{max-width:100%;height:auto;border-radius:4px}
.fujn-preview .ph{color:#9aa8ad;font-size:13px}

/* ---- side info list ---- */
.fujn-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.fujn-steps li{position:relative;padding:0 0 18px 44px;counter-increment:s}
.fujn-steps li:before{
  content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(120deg,var(--fujn-green-1),var(--fujn-green-2));color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.fujn-steps li b{display:block;font-size:15px}
.fujn-steps li span{color:var(--fujn-muted);font-size:13.5px}
.fujn-price{display:flex;align-items:baseline;gap:8px;margin:4px 0 2px}
.fujn-price .n{font-size:40px;font-weight:800;color:var(--fujn-ink)}
.fujn-price .u{color:var(--fujn-muted);font-weight:600}
.fujn-badge{display:inline-block;background:#eafff5;color:#0c7a5f;border:1px solid #b9f0d8;
  padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}

/* ---- notice / alerts ---- */
.fujn-note{padding:14px 16px;border-radius:10px;font-size:14px;margin-bottom:18px}
.fujn-note--ok{background:#eafff5;border:1px solid #b9f0d8;color:#0c6b52}
.fujn-note--err{background:#fff1f0;border:1px solid #ffccc7;color:#a8261b}
.fujn-note--info{background:#eef6ff;border:1px solid #cfe4ff;color:#1c5aa8}

/* ---- stats + admin tables ---- */
.fujn-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.fujn-kpi{background:#fff;border:1px solid var(--fujn-line);border-radius:14px;padding:18px}
.fujn-kpi .k{color:var(--fujn-muted);font-size:13px;font-weight:600}
.fujn-kpi .v{font-size:30px;font-weight:800;margin-top:4px}
.fujn-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--fujn-line);border-radius:12px;overflow:hidden}
.fujn-table th,.fujn-table td{padding:11px 14px;text-align:left;font-size:14px;border-bottom:1px solid var(--fujn-line)}
.fujn-table th{background:#f7fafb;font-weight:700;color:#41525a;text-transform:uppercase;font-size:12px;letter-spacing:.4px}
.fujn-table tr:last-child td{border-bottom:none}
.fujn-table .flag{font-size:17px;margin-right:6px}
.fujn-status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;text-transform:capitalize}
.st-pending{background:#fff6e6;color:#a56a00}
.st-awaiting_payment{background:#eef6ff;color:#1c5aa8}
.st-paid{background:#eef9ff;color:#0a7ea4}
.st-active{background:#eafff5;color:#0c7a5f}
.st-house{background:#fff4df;color:#9a6400}
.st-paused{background:#f0f0f0;color:#666}
.st-expired,.st-rejected{background:#fff1f0;color:#a8261b}
.fujn-foot{padding:34px 0;text-align:center;color:var(--fujn-muted);font-size:13px}

/* ---- responsive ---- */
@media (max-width:820px){
  .fujn-grid{grid-template-columns:1fr}
  .fujn-ads-top nav{display:none}
}
@media (max-width:520px){
  .fujn-row{grid-template-columns:1fr}
  .fujn-hero{padding:40px 0 46px}
  .fujn-card{padding:20px}
}