/* Prevent overflow from long translations */
.card, #result, header .links a { overflow-wrap:anywhere; hyphens:auto; }
:root { --primary:#0288d1; --primary-2:#0277bd; --bg:linear-gradient(135deg,#e3f2fd,#ffffff); --card-bg:rgba(255,255,255,0.9); --radius:12px; --shadow:0 4px 16px rgba(0,0,0,0.1); --font:"Poppins",sans-serif; }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--bg); }
body{ font-family:var(--font); background:transparent; display:flex; flex-direction:column; align-items:center; min-height:100vh; color:#333; }
/* Center inner content blocks like Pose page wrappers */
.container{ width:100%; display:flex; flex-direction:column; align-items:center; }
header{padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,0.06); width:100%; position:relative; min-height:56px;}
header .brand{ color:#0f172a; text-decoration:none; font-weight:700; font-size:1.6rem; letter-spacing:.5px; display:inline-flex; align-items:center; height:40px; line-height:1; }
header .links a{ color:#0277bd; text-decoration:none; font-weight:500; margin-left:1rem; white-space:normal; overflow-wrap:anywhere; hyphens:auto; }
header .lang{ display:flex; align-items:center; gap:.25rem; }
header .lang button{ background:none; border:none; font-size:20px; cursor:pointer; line-height:1; margin-left:.2rem; width:auto; padding:0; }
.hamburger{ display:none; background:none; border:1px solid rgba(2,136,209,0.25); border-radius:8px; width:40px; height:40px; padding:0; font-size:20px; cursor:pointer; color:#0f172a; align-items:center; justify-content:center; }
.mobile-menu{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.45); }
.mobile-menu.open{ display:block; }
.mobile-menu .panel{ position:absolute; top:0; right:0; width:min(85%, 360px); height:100%; background:#fff; box-shadow:-4px 0 16px rgba(0,0,0,0.15); padding:1rem; display:flex; flex-direction:column; gap:1rem; }
.mobile-menu .panel .row{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu .panel nav{ display:flex; flex-direction:column; gap:.5rem; }
.mobile-menu .panel nav a{ display:block; padding:.6rem .75rem; border:1px solid #e5e7eb; border-radius:10px; color:#0277bd; text-decoration:none; text-align:center; }
.mobile-menu .close-btn{ background:none; border:none; font-size:26px; cursor:pointer; line-height:1; padding:.25rem .5rem; }
.mobile-menu .user-summary{ font-size:.95rem; color:#334155; background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:.6rem .75rem; }
h1{ margin:1.5rem 0; font-weight:600; letter-spacing:1px; text-align:center; font-size:clamp(1.4rem,4vw,2rem); }
.card h2{ text-align:center; font-size:clamp(1.1rem,3.5vw,1.5rem); }
.card{ background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); padding:2rem; max-width:420px; width:100%; margin-bottom:2rem; }
.file-input{ margin-bottom:1.5rem; }
.file-input label{ display:block; font-weight:500; margin-bottom:.5rem; }
.preview{ width:100%; height:220px; border:2px dashed #bbb; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; cursor:pointer; background:#fafafa; transition:border-color .2s; }
.preview:hover{ border-color:var(--primary); }
.preview img{ max-width:100%; max-height:100%; object-fit:contain; }
.preview input[type=file]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:1; }
.preview .remove-btn{ position:absolute; top:8px; right:8px; z-index:2; display:none; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:none; background:rgba(0,0,0,0.55); color:#fff; font-size:18px; cursor:pointer; }
.preview.has-image .remove-btn{ display:inline-flex; }
button{ width:100%; padding:.75rem; border-radius:var(--radius); border:1px solid #ccc; font-size:1rem; font-family:var(--font); margin-bottom:1rem; background:var(--primary); color:#fff; border:none; cursor:pointer; transition:background .2s, transform .1s; }
button:hover{ background:var(--primary-2); } button:active{ transform:translateY(1px); }
#overlay{ position:fixed; inset:0; background:rgba(255,255,255,0.92); display:none; align-items:center; justify-content:center; flex-direction:column; z-index:2000; padding:1rem; }
#overlay-status{ text-align:center; font-size:1.1rem; margin-bottom:1rem; }
.spinner{ width:80px; height:80px; border:8px solid rgba(2,136,209,0.2); border-top-color:var(--primary); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
#timer{ margin-top:1rem; font-size:1.1rem; font-weight:500; }
#result{ max-width:600px; width:90%; text-align:center; margin-bottom:2rem; }
#result .card{ padding:1rem; display:inline-block; }
#result img{ max-width:100%; border-radius:var(--radius); box-shadow:var(--shadow); cursor:zoom-in; }
#lightbox{ position:fixed; inset:0; background:rgba(0,0,0,0.94); display:none; align-items:center; justify-content:center; z-index:1000; padding:2rem; }
#lightbox img{ max-width:95vw; max-height:95vh; object-fit:contain; border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,0.6); }
#lightbox .close-btn{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:none; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.2); color:#fff; font-size:22px; cursor:pointer; backdrop-filter:blur(2px); }
#lightbox .close-btn:hover{ background:rgba(255,255,255,0.3); }

/* Selected color (chosen) should be clearly visible */
#bg_color { width:48px; height:48px; -webkit-appearance:none; border:2px solid #000; border-radius:50%; padding:0; background:none; }
#bg_color::-webkit-color-swatch-wrapper { padding:0; border-radius:50%; }
#bg_color::-webkit-color-swatch { border:none; border-radius:50%; }

/* Tips list spacing */
.card ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.card ul li { margin: 0.4rem 0; line-height: 1.45; }

/* Extra mobile tweaks */
@media (max-width: 400px) {
  .preview { height: 160px; }
  button { padding: 1rem; }
}

/* Mobile navbar */
@media (max-width: 640px) {
  header { gap:.5rem; }
  header .links { display:none; }
  header .lang { display:none; }
  .hamburger{ display:inline-flex; align-items:center; }
}