/* ═══════════════════════════════════════════════════
   IMAGEKA - main.css
   Tokens · reset · header · footer · modals
   Toasts (top-center) · lightbox · dark mode
═══════════════════════════════════════════════════ */
:root {
  --bg:        #f4f6f9;
  --panel:     #ffffff;
  --panel-r:   #f9fafb;
  --border:    #e2e5ea;
  --border-2:  #eef0f3;
  --tx:        #1a1d23;
  --tx2:       #52586a;
  --tx3:       #9ea8bb;
  --blue:      #1a73e8;
  --blue-d:    #1557b0;
  --blue-bg:   #e8f0fe;
  --blue-mid:  #c5d9f7;
  --green:     #1a7a4a;
  --green-bg:  #e6f4ed;
  --green-bd:  #a8d9be;
  --red:       #c0281e;
  --red-bg:    #fdecea;
  --red-bd:    #f5bfbb;
  --shadow:    0 1px 4px rgba(60,64,67,.12),0 2px 10px rgba(60,64,67,.08);
  --shadow-lg: 0 4px 16px rgba(60,64,67,.14),0 12px 40px rgba(60,64,67,.1);
  --r:         8px;
  --r-sm:      6px;
  --r-lg:      12px;
  --tr:        .15s ease;
  --hh:        56px;
  --th:        44px;
  --max:       1440px;
}
[data-dark="1"] {
  --bg:        #0d1117;
  --panel:     #161b22;
  --panel-r:   #0d1117;
  --border:    rgba(255,255,255,.08);
  --border-2:  rgba(255,255,255,.05);
  --tx:        #e6edf3;
  --tx2:       #8b949e;
  --tx3:       #484f58;
  --blue:      #58a6ff;
  --blue-d:    #79bbff;
  --blue-bg:   rgba(88,166,255,.1);
  --blue-mid:  rgba(88,166,255,.2);
  --green:     #3fb950;
  --green-bg:  rgba(63,185,80,.1);
  --green-bd:  rgba(63,185,80,.25);
  --red:       #f85149;
  --red-bg:    rgba(248,81,73,.1);
  --red-bd:    rgba(248,81,73,.25);
  --shadow:    0 1px 4px rgba(0,0,0,.5);
  --shadow-lg: 0 4px 20px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.5;background:var(--bg);color:var(--tx);min-height:100%;
  -webkit-font-smoothing:antialiased;transition:background var(--tr),color var(--tr)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer;border:none;background:none;outline:none}
input,textarea,select{font-family:inherit}
img{display:block;max-width:100%}

/* ── HEADER ───────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:600;height:var(--hh);
  background:var(--panel);border-bottom:1px solid var(--border);
  transition:background var(--tr),border-color var(--tr)}
.header-inner{max-width:var(--max);margin:0 auto;padding:0 20px;
  height:100%;display:flex;align-items:center;gap:4px}
.site-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  flex-shrink:0;margin-right:10px}
.site-logo:hover{text-decoration:none}
.logo-mark{width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,#1a73e8,#06b6d4);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 8px rgba(26,115,232,.3)}
.logo-mark svg{width:18px;height:18px}
.logo-name{font-size:1.05rem;font-weight:800;color:var(--tx);letter-spacing:-.02em}
.site-nav{display:flex;align-items:center}
.nav-link{font-size:.81rem;font-weight:500;color:var(--tx2);
  padding:5px 10px;border-radius:var(--r-sm);white-space:nowrap;
  transition:color var(--tr),background var(--tr)}
.nav-link:hover{color:var(--tx);background:var(--bg);text-decoration:none}
.nav-link.active{color:var(--blue)}
.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.btn-icon-round{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  /* Visible in BOTH modes: solid filled circle */
  background:#f0f2f5;
  border:1.5px solid #d0d5dd;
  color:#52586a;
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.btn-icon-round:hover{background:#e4e7ec;color:#1a1d23}
.btn-icon-round svg{width:17px;height:17px;display:block}
/* Dark mode - bright enough ring so icon is unmistakeable */
[data-dark="1"] .btn-icon-round{
  background:#2d3748;
  border-color:#64748b;
  color:#e2e8f0;
}
[data-dark="1"] .btn-icon-round:hover{
  background:#3a4a60;
  border-color:#94a3b8;
  color:#f8fafc;
}
/* Icon swap - use !important to override any inline styles */
.i-moon{display:block!important}.i-sun{display:none!important}
[data-dark="1"] .i-moon{display:none!important}
[data-dark="1"] .i-sun{display:block!important}
.mobile-menu-btn{display:none}
.mobile-nav{display:none;flex-direction:column;
  background:var(--panel);border-bottom:1px solid var(--border);
  position:sticky;top:var(--hh);z-index:590}
.mobile-nav.open{display:flex}
.mob-nav-link{padding:12px 20px;font-size:.88rem;font-weight:500;
  color:var(--tx2);border-bottom:1px solid var(--border-2);
  transition:color var(--tr),background var(--tr)}
.mob-nav-link:hover{color:var(--blue);background:var(--blue-bg);text-decoration:none}

/* ── GLOBAL BUTTONS ───────────────────────────────── */
.btn-outline{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--panel);color:var(--tx2);font-size:.82rem;font-weight:500;
  white-space:nowrap;transition:all var(--tr);cursor:pointer}
.btn-outline:hover{border-color:var(--tx3);color:var(--tx);background:var(--bg);text-decoration:none}
.btn-outline svg{width:14px;height:14px;flex-shrink:0}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 20px;background:var(--blue);border:1px solid var(--blue);border-radius:var(--r-sm);
  font-size:.9rem;font-weight:600;color:#fff;white-space:nowrap;cursor:pointer;transition:all var(--tr)}
.btn-primary:hover{background:var(--blue-d);box-shadow:0 2px 10px rgba(26,115,232,.35);color:#fff;text-decoration:none}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-primary svg{width:15px;height:15px;flex-shrink:0}
.btn-full{width:100%}

/* ── TOASTS - top center ──────────────────────────── */
#toastContainer{position:fixed;top:calc(var(--hh) + 12px);left:50%;
  transform:translateX(-50%);z-index:1000;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  pointer-events:none;width:max-content;max-width:min(380px,calc(100vw - 32px))}
.toast{padding:9px 20px;border-radius:100px;border:1px solid transparent;
  font-size:.83rem;font-weight:600;box-shadow:var(--shadow);
  pointer-events:auto;animation:toastIn .2s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:none}}
.toast.success{background:var(--green-bg);color:var(--green);border-color:var(--green-bd)}
.toast.error  {background:var(--red-bg);  color:var(--red);  border-color:var(--red-bd)}
.toast.info   {background:var(--blue-bg); color:var(--blue); border-color:var(--blue-mid)}

/* ── LIGHTBOX ─────────────────────────────────────── */
.lightbox{display:none;position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.92);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lightbox-content{position:relative;max-width:860px;width:100%;
  display:flex;flex-direction:column;gap:14px}
.lightbox-close{position:absolute;top:-38px;right:0;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;display:flex;align-items:center;justify-content:center;transition:background var(--tr)}
.lightbox-close:hover{background:rgba(255,255,255,.24)}
.lightbox-close svg{width:15px;height:15px}
#lbImage{width:100%;border-radius:var(--r-lg);max-height:74vh;object-fit:contain}
.lightbox-footer{display:flex;align-items:center;gap:14px}
.lightbox-prompt{flex:1;font-size:.8rem;color:rgba(255,255,255,.55);font-style:italic;line-height:1.5}
.btn-download{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;
  background:var(--blue);border-radius:var(--r-sm);color:#fff;
  font-size:.82rem;font-weight:600;white-space:nowrap;transition:background var(--tr)}
.btn-download:hover{background:var(--blue-d)}
.btn-download svg{width:13px;height:13px}

/* ── MODALS ───────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:800;
  background:rgba(0,0,0,.44);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:modalIn .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.modal-header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border-2)}
.modal-header h3{font-size:.95rem;font-weight:700;color:var(--tx)}
.modal-close-btn{width:28px;height:28px;border-radius:var(--r-sm);
  background:var(--bg);border:1px solid var(--border);color:var(--tx2);
  display:flex;align-items:center;justify-content:center;transition:all var(--tr)}
.modal-close-btn:hover{color:var(--tx);background:var(--border)}
.modal-close-btn svg{width:13px;height:13px}
.modal-body{padding:20px}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:.73rem;font-weight:600;color:var(--tx2);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.form-field input,.form-field textarea{width:100%;padding:9px 11px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--tx);font-size:.88rem;outline:none;transition:border-color var(--tr)}
.form-field textarea{resize:vertical;min-height:88px;line-height:1.5}
.form-field input:focus,.form-field textarea:focus{border-color:var(--blue)}
.tut-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.tut-num{width:26px;height:26px;background:var(--blue);border-radius:50%;color:#fff;
  font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tut-step strong{display:block;font-size:.86rem;color:var(--tx);margin-bottom:2px}
.tut-step p{font-size:.81rem;color:var(--tx2);line-height:1.6}
.tut-tips{margin-top:18px;padding:12px;background:var(--blue-bg);
  border-radius:var(--r-sm);border:1px solid var(--blue-mid)}
.tut-tips strong{display:block;font-size:.81rem;color:var(--blue);margin-bottom:7px}
.tut-tips ul{padding-left:16px}
.tut-tips li{font-size:.8rem;color:var(--tx2);margin-bottom:4px;line-height:1.55}

/* ── FOOTER ───────────────────────────────────────── */
.site-footer{background:var(--panel);border-top:1px solid var(--border);
  transition:background var(--tr),border-color var(--tr)}
.footer-inner{max-width:var(--max);margin:0 auto;padding:0 20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;
  padding:48px 0 40px;border-bottom:1px solid var(--border-2)}
.footer-logo{margin-bottom:12px}
.footer-tagline{font-size:.81rem;color:var(--tx2);line-height:1.7;max-width:290px;margin-bottom:16px}
.footer-socials{display:flex;gap:8px}
.social-link{width:32px;height:32px;border:1px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--tx2);transition:all var(--tr)}
.social-link:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg);text-decoration:none}
.social-link svg{width:13px;height:13px}
.footer-col-title{font-size:.7rem;font-weight:700;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-links a{font-size:.81rem;color:var(--tx2);transition:color var(--tr)}
.footer-links a:hover{color:var(--blue);text-decoration:none}
.footer-seo-text{padding:18px 0;border-top:1px solid var(--border-2)}
.footer-seo-text p{font-size:.76rem;color:var(--tx3);line-height:1.7;max-width:860px}
.footer-seo-text strong{color:var(--tx2)}
.footer-seo-text a{color:var(--tx3);text-decoration:underline;text-decoration-color:var(--border)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;font-size:.76rem;color:var(--tx3);flex-wrap:wrap;gap:8px}
.footer-bottom-links{display:flex;gap:12px}
.footer-bottom-links a{color:var(--tx3);transition:color var(--tr)}
.footer-bottom-links a:hover{color:var(--blue);text-decoration:none}

/* ── FLOATING CONTACT BUTTON ──────────────────────── */
.contact-fab{
  position:fixed;bottom:24px;right:24px;z-index:700;
  display:flex;align-items:center;gap:8px;
  background:var(--blue);color:#fff;border:none;border-radius:100px;
  padding:11px 18px;font-size:.83rem;font-weight:600;
  box-shadow:0 4px 16px rgba(26,115,232,.4);
  cursor:pointer;white-space:nowrap;
  transition:all var(--tr);
  -webkit-tap-highlight-color:transparent;
}
.contact-fab:hover{background:var(--blue-d);box-shadow:0 6px 20px rgba(26,115,232,.5);
  transform:translateY(-1px)}
.contact-fab:active{transform:none}
.contact-fab svg{width:15px;height:15px;flex-shrink:0}
/* Hide label on very small screens */
@media(max-width:400px){
  .contact-fab .fab-label{display:none}
  .contact-fab{padding:12px}
}

/* ── SKIP LINK ─────────────────────────────────────── */
.skip-link{position:absolute;top:-40px;left:16px;background:var(--blue);color:#fff;
  padding:7px 12px;border-radius:0 0 5px 5px;font-size:.82rem;font-weight:600;z-index:9999;transition:top .15s}
.skip-link:focus{top:0}

/* ── RESPONSIVE ───────────────────────────────────── */
@media(max-width:1024px){
  .site-nav{display:none}
  .mobile-menu-btn{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .footer-brand{grid-column:1/-1}
  .lightbox-footer{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .header-inner{padding:0 14px}
  .footer-grid{grid-template-columns:1fr}
  .footer-inner{padding:0 14px}
  .contact-fab{bottom:16px;right:16px}
}