/* ════════════════════════════════════════════════════════════
   AIDENTITY AI — v1.1.0
   Apple-style light theme — premium, breathable, refined
   ════════════════════════════════════════════════════════════ */

:root {
  /* Light palette */
  --bg:        #fafaf7;
  --bg-warm:  #f5f3ed;
  --surface:   #ffffff;
  --ink:       #1d1d1f;       /* Apple's primary text */
  --ink-soft:  #424245;
  --ink-mute:  #86868b;       /* Apple's secondary text */
  --line:      rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  
  /* Accents */
  --accent:    #b8952e;        /* Starlead gold */
  --accent-soft: rgba(184, 149, 46, 0.12);
  --accent-hover: #d4a14b;
  
  /* CTAs */
  --cta:       #1d1d1f;       /* primary button = near-black */
  --cta-hover: #2c2c2e;
  
  /* Status */
  --danger:    #c4361f;
  
  /* Shadows (Apple feels) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-cta: 0 2px 6px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  background:var(--bg);
  color:var(--ink);
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  font-size:17px;
  line-height:1.47;
  letter-spacing:-.012em;
}

body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--bg-warm) 0%, var(--bg) 70%),
    var(--bg);
}

/* ─────────── Nav ─────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  background:rgba(250, 250, 247, 0.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}

.brand {
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:17px; letter-spacing:-.022em;
  color:var(--ink); text-decoration:none;
}
.brand-star {
  width:16px; height:16px; color:var(--accent); flex-shrink:0;
}

.counter {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; letter-spacing:-.01em;
  color:var(--ink-mute);
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:980px;
  background:var(--surface);
  font-variant-numeric:tabular-nums;
  font-weight:500;
}
.counter-dot {
  width:6px; height:6px; border-radius:50%;
  background:#34c759;     /* Apple green */
  box-shadow:0 0 0 0 rgba(52, 199, 89, 0.4);
  animation:pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow:0 0 0 0 rgba(52, 199, 89, 0.4); }
  50%     { box-shadow:0 0 0 6px rgba(52, 199, 89, 0); }
}
.counter.is-warning .counter-dot {
  background:#ff9500;     /* Apple orange */
  box-shadow:0 0 0 0 rgba(255, 149, 0, 0.4);
  animation-name:pulseDotWarn;
}
@keyframes pulseDotWarn {
  0%,100% { box-shadow:0 0 0 0 rgba(255, 149, 0, 0.4); }
  50%     { box-shadow:0 0 0 6px rgba(255, 149, 0, 0); }
}
.counter.is-warning { color:#ff9500; }

/* ─────────── Main ─────────── */
.main {
  max-width:780px; margin:0 auto;
  padding:130px 28px 80px;
  min-height:calc(100vh - 60px);
  min-height:calc(100dvh - 60px);
  display:flex; flex-direction:column; gap:44px;
}

/* ─────────── Intro ─────────── */
.intro {
  text-align:center;
  padding:8px 0 0;
}
.title {
  font-family: "New York", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Times New Roman", Georgia, serif;
  font-weight:600;
  line-height:1.05;
  font-size:clamp(40px, 6vw, 64px);
  letter-spacing:-.025em;
  color:var(--ink);
  margin-bottom:18px;
}
.title em {
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}
.subtitle {
  color:var(--ink-mute);
  font-size:19px;
  letter-spacing:-.012em;
  line-height:1.5;
  font-weight:400;
  max-width:520px;
  margin:0 auto;
}
.kbd {
  font-weight:500;
  color:var(--ink);
}

/* ─────────── Preset families row ─────────── */
.preset-section {
  display:flex; flex-direction:column; gap:10px;
}
.preset-family-label {
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:600;
  text-align:center;
  margin-bottom:2px;
}
.preset-row {
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
}
.preset {
  font:inherit;
  font-size:14px; letter-spacing:-.01em; font-weight:500;
  color:var(--ink-soft);
  background:var(--surface);
  border:1px solid var(--line);
  padding:9px 18px;
  border-radius:980px;
  cursor:pointer;
  transition:all .22s cubic-bezier(.4, 0, .2, 1);
  box-shadow:var(--shadow-sm);
}
.preset:hover {
  color:var(--ink);
  border-color:var(--line-strong);
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}
.preset.is-active {
  color:var(--surface);
  background:var(--ink);
  border-color:var(--ink);
  box-shadow:var(--shadow-md);
}

/* Hint card sotto i preset, mostra descrizione */
.preset-hint {
  text-align:center;
  font-size:13px;
  color:var(--ink-mute);
  letter-spacing:-.005em;
  margin-top:6px;
  min-height:20px;
  font-style:italic;
}

/* ─────────── Ratio row ─────────── */
.ratio-row {
  display:flex; flex-wrap:wrap; gap:6px;
  justify-content:center;
}
.ratio {
  font:inherit;
  font-size:12px; letter-spacing:-.005em; font-weight:500;
  color:var(--ink-mute);
  background:transparent;
  border:1px solid var(--line);
  padding:6px 14px;
  border-radius:980px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition:all .2s ease;
}
.ratio svg {
  width:13px; height:13px;
  opacity:.6;
}
.ratio:hover {
  color:var(--ink);
  border-color:var(--line-strong);
}
.ratio:hover svg { opacity:.9; }
.ratio.is-active {
  color:var(--ink);
  border-color:var(--ink);
  background:var(--surface);
}
.ratio.is-active svg { opacity:1; color:var(--accent); }

/* ─────────── Prompt box ─────────── */
.prompt-box {
  display:flex; gap:0;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
  box-shadow:var(--shadow-sm);
}
.prompt-box:focus-within {
  border-color:var(--ink);
  box-shadow:var(--shadow-md);
}
#promptInput {
  flex:1;
  background:transparent;
  border:0; outline:none;
  color:var(--ink);
  font:inherit; font-size:17px; line-height:1.5;
  padding:18px 22px;
  resize:none;
  font-family:inherit;
  letter-spacing:-.012em;
}
#promptInput::placeholder {
  color:var(--ink-mute);
  opacity:.7;
}

.generate-btn {
  font:inherit;
  font-size:15px; letter-spacing:-.01em; font-weight:500;
  color:#fff;
  background:var(--cta);
  border:0;
  padding:0 30px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  min-width:140px;
  transition:background .2s ease, opacity .2s ease;
}
.generate-btn:hover:not(:disabled) {
  background:var(--cta-hover);
}
.generate-btn:disabled {
  opacity:.55;
  cursor:wait;
}
.generate-btn.is-cooldown {
  background:var(--ink-mute);
  color:#fff;
  opacity:.7;
}
.gen-spinner {
  display:none;
  width:13px; height:13px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .8s linear infinite;
}
.generate-btn.is-loading .gen-spinner { display:inline-block; }
.generate-btn.is-loading .gen-label { opacity:.7; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ─────────── Result ─────────── */
.result {
  display:flex; flex-direction:column; align-items:center; gap:22px;
  min-height:1px;
}
.result-frame {
  position:relative;
  width:100%;
  max-width:640px;
  aspect-ratio:1/1;
  background:var(--surface);
  border-radius:20px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg);
  animation:revealIn .7s cubic-bezier(.16, 1, .3, 1);
}
@keyframes revealIn {
  from { opacity:0; transform:translateY(16px) scale(.985); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.result-frame img {
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.result-skeleton {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:var(--ink-mute);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:500;
}
.result-skeleton::after {
  content:''; width:48px; height:2px;
  background:var(--accent);
  border-radius:2px;
  animation:loadLine 1.4s ease-in-out infinite;
}
@keyframes loadLine {
  0%,100% { transform:scaleX(.2); opacity:.4; }
  50%     { transform:scaleX(1);  opacity:1; }
}

.result-actions {
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.action-btn {
  font:inherit;
  font-size:14px; letter-spacing:-.01em; font-weight:500;
  padding:10px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:980px;
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:var(--shadow-sm);
}
.action-btn:hover {
  border-color:var(--line-strong);
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}
.action-btn.primary {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.action-btn.primary:hover {
  background:var(--cta-hover);
  color:#fff;
}

.variant-badge {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:.04em;
  color:var(--accent);
  padding:5px 13px;
  border:1px solid var(--accent-soft);
  border-radius:980px;
  background:var(--accent-soft);
  font-weight:500;
}
.variant-badge::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--accent);
}

.result-warning {
  text-align:center;
  color:var(--ink-mute);
  font-size:12px;
  letter-spacing:-.005em;
  margin-top:2px;
}

.result-error {
  text-align:center;
  color:var(--danger);
  font-size:14px;
  padding:18px 24px;
  border:1px solid rgba(196, 54, 31, 0.2);
  border-radius:14px;
  background:rgba(196, 54, 31, 0.05);
  max-width:520px;
  margin:0 auto;
}

/* ─────────── Footer ─────────── */
.foot {
  text-align:center;
  color:var(--ink-mute);
  font-size:12px; letter-spacing:-.005em;
  padding:36px 28px 26px;
  border-top:1px solid var(--line);
  background:var(--bg);
}
.foot .dot { margin:0 10px; opacity:.5; }
.foot a {
  color:var(--ink-mute);
  text-decoration:none;
  transition:color .2s ease;
}
.foot a:hover { color:var(--ink); }

/* ─────────── Mobile ─────────── */
@media (max-width: 768px) {
  body { font-size:15px; }
  
  .nav { padding:14px 20px; }
  .brand { font-size:15px; }
  .brand-star { width:14px; height:14px; }
  .counter { font-size:11px; padding:5px 11px; }
  
  .main { padding:100px 18px 60px; gap:32px; }
  .title { font-size:clamp(30px, 8vw, 42px); }
  .subtitle { font-size:16px; }
  
  .preset { font-size:13px; padding:8px 15px; }
  .preset-family-label { font-size:10px; }
  .preset-hint { font-size:12px; }
  .ratio { font-size:11px; padding:5px 11px; }
  .ratio svg { width:11px; height:11px; }
  
  .prompt-box { flex-direction:column; border-radius:14px; }
  #promptInput { font-size:16px; padding:16px 18px; }
  .generate-btn { padding:16px; width:100%; min-height:52px; }
  
  .result-frame { max-width:100%; border-radius:16px; }
  
  .foot .dot { display:none; }
  .foot { font-size:11px; line-height:1.8; }
  .foot span { display:block; }
}

@media (max-width: 480px) {
  .counter span:not(#counterRemaining) {
    font-size:0;
  }
  #counterRemaining {
    font-size:11px;
    font-weight:600;
  }
  .counter::after {
    content:' / 170';
    font-size:11px;
    color:var(--ink-mute);
    font-weight:400;
  }
}