@import url('https://fonts.cdnfonts.com/css/space-grotesk');
@import url('https://fonts.cdnfonts.com/css/inter');

:root{
  --bg: #0A0E14;
  --bg-raised: #101623;
  --line: #1E2635;
  --text: #ECEFF4;
  --text-dim: #8B93A7;
  --accent: #39FF88;
  --accent-dim: #1F8F52;
  --accent-wash: rgba(57,255,136,0.08);
  --header-bg: rgba(10,14,20,0.9);
  --input-bg: #0D1320;
}
[data-theme="light"]{
  --bg: #F7F9FB;
  --bg-raised: #FFFFFF;
  --line: #E2E7EE;
  --text: #10151F;
  --text-dim: #5C6577;
  --accent: #0FA85C;
  --accent-dim: #0C8248;
  --accent-wash: rgba(15,168,92,0.08);
  --header-bg: rgba(247,249,251,0.9);
  --input-bg: #EEF1F5;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, sans-serif;
  line-height:1.5;
  transition: background .2s ease, color .2s ease;
  min-height:100vh;
}
::selection{ background:var(--accent); color:#06110B; }

.noise{
  position:fixed; inset:0; pointer-events:none; opacity:0.025; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  padding:14px 20px;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.header-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.logo-group{ display:flex; flex-direction:column; gap:2px; }
.logo{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:-0.02em;
  display:flex; align-items:center; gap:9px;
}
.logo-sub{
  font-size:10px; color:var(--text-dim); letter-spacing:0.04em;
  margin-left:31px; text-transform:uppercase;
}
.logo-mark{
  width:22px; height:16px; display:flex; align-items:flex-end; gap:2px;
}
.logo-mark span{
  width:3px; background:var(--accent); border-radius:1px;
  animation:pulse 1.4s ease-in-out infinite;
}
.logo-mark span:nth-child(1){height:40%; animation-delay:0s;}
.logo-mark span:nth-child(2){height:100%; animation-delay:0.15s;}
.logo-mark span:nth-child(3){height:65%; animation-delay:0.3s;}
.logo-mark span:nth-child(4){height:85%; animation-delay:0.45s;}
@keyframes pulse{
  0%,100%{transform:scaleY(0.5);} 50%{transform:scaleY(1);}
}
.tag{
  font-size:12px; color:var(--text-dim);
  border:1px solid var(--line); padding:5px 10px; border-radius:20px;
}
.settings-btn{
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  width:36px; height:36px; border-radius:8px; font-size:16px; cursor:pointer;
  transition:all .15s;
}
.settings-btn:hover{ color:var(--accent); border-color:var(--accent-dim); }

.history-btn, .feedback-btn, .theme-toggle{
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  width:36px; height:36px; border-radius:8px; font-size:15px; cursor:pointer;
  transition:all .15s; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.history-btn:hover, .feedback-btn:hover, .theme-toggle:hover{ color:var(--accent); border-color:var(--accent-dim); }

.feedback-textarea{
  width:100%; min-height:100px;
  background:var(--input-bg); border:1px solid var(--line); border-radius:8px;
  color:var(--text); font-family:'Inter', sans-serif; font-size:14px;
  padding:12px 14px; resize:vertical; line-height:1.5;
}
.feedback-textarea:focus{ outline:none; border-color:var(--accent-dim); }
.feedback-status{ font-size:12px; color:var(--accent); margin-top:10px; min-height:16px; }

.history-modal{ max-width:480px; max-height:75vh; overflow-y:auto; }
.history-item{
  background:var(--input-bg); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:all .15s;
}
.history-item:hover{ border-color:var(--accent-dim); }
.history-item-title{ font-size:14px; font-weight:600; margin-bottom:4px; }
.history-item-meta{ font-size:11px; color:var(--text-dim); }
.history-empty{ font-size:13px; color:var(--text-dim); text-align:center; padding:24px 0; }
.history-delete{
  float:right; background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:14px;
}
.history-delete:hover{ color:#ff8080; }

.inapp-banner{
  display:none; background:#3a2a0a; border-bottom:1px solid #6b4a12;
  color:#ffcb6b; font-size:13px; text-align:center; padding:12px 16px; line-height:1.5;
}
.inapp-banner.active{ display:block; }

.modal-overlay{
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(5,7,11,0.75); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.active{ display:flex; }
.modal{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:14px;
  padding:26px; max-width:400px; width:100%;
}
.modal-title{ font-family:'Space Grotesk', sans-serif; font-size:18px; font-weight:700; margin-bottom:8px; }
.modal-sub{ font-size:13px; color:var(--text-dim); margin-bottom:18px; line-height:1.5; }
.modal-label{ font-size:12px; color:var(--text-dim); display:block; margin-bottom:6px; }
.modal-input{
  width:100%; background:var(--input-bg); border:1px solid var(--line); border-radius:8px;
  color:var(--text); font-size:14px; padding:11px 14px; font-family:'Inter', sans-serif;
}
.modal-input:focus{ outline:none; border-color:var(--accent-dim); }
.modal-hint{ font-size:11px; color:var(--text-dim); margin-top:8px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

main{max-width:900px; margin:0 auto; padding:0 24px;}

.hero{
  padding:64px 0 40px;
  text-align:left;
}
.eyebrow{
  font-size:12px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--accent); font-weight:600; margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{content:''; width:6px; height:6px; background:var(--accent); border-radius:50%; display:inline-block; box-shadow:0 0 8px var(--accent);}
h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(32px, 5.5vw, 52px);
  line-height:1.05;
  letter-spacing:-0.02em;
  max-width:14ch;
  margin-bottom:18px;
}
h1 em{ font-style:normal; color:var(--accent); }
.sub{
  color:var(--text-dim); font-size:16px; max-width:52ch; margin-bottom:0;
}

.demo-section{ margin:8px 0 32px; }
.demo-label{
  font-family:'Space Grotesk', sans-serif; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); margin-bottom:14px;
}
.demo-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:640px){ .demo-grid{ grid-template-columns:1fr 1fr 1fr; } }
.demo-card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; padding:16px;
}
.demo-card-title{ font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:700; margin-bottom:8px; }
.demo-card-body{ font-size:12.5px; color:var(--text-dim); line-height:1.6; }
.demo-note{ font-size:11.5px; color:var(--text-dim); margin-top:14px; font-style:italic; }

.panel{
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px;
  margin:32px 0;
}
.panel-label{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-dim); margin-bottom:14px;
}

textarea{
  width:100%; min-height:160px;
  background:var(--input-bg); border:1px solid var(--line); border-radius:10px;
  color:var(--text); font-family:'Inter', sans-serif; font-size:14px;
  padding:16px; resize:vertical; line-height:1.6;
}
textarea:focus{ outline:none; border-color:var(--accent-dim); }
textarea::placeholder{ color:#4A5468; }

.input-mode-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.mode-tab{
  font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600;
  background:transparent; color:var(--text-dim); border:1px solid var(--line);
  padding:9px 16px; border-radius:8px; cursor:pointer; transition:all .15s;
}
.mode-tab.active{ background:var(--accent-wash); color:var(--accent); border-color:var(--accent-dim); }

.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; min-height:160px; border:1.5px dashed var(--line); border-radius:12px;
  cursor:pointer; transition:all .15s; text-align:center; padding:20px;
}
.dropzone:hover{ border-color:var(--accent-dim); background:var(--accent-wash); }
.dropzone-icon{ font-size:32px; }
.dropzone-text{ font-size:14px; color:var(--text-dim); line-height:1.6; }
.dropzone-sub{ font-size:12px; color:#4A5468; }
.dropzone.has-file{ border-color:var(--accent); border-style:solid; }

.lang-select-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.lang-label{ font-size:12px; color:var(--text-dim); }
.lang-chips{ display:flex; gap:6px; }
.lang-chip{
  font-size:12px; color:var(--text-dim); background:transparent;
  border:1px solid var(--line); padding:5px 12px; border-radius:20px; cursor:pointer;
  transition:all .15s;
}
.lang-chip.active{ background:var(--accent-wash); color:var(--accent); border-color:var(--accent-dim); }
.lang-chip:hover:not(.active){ border-color:var(--accent-dim); color:var(--text); }

.sample-row{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.chip{
  font-size:12px; color:var(--text-dim); background:transparent;
  border:1px solid var(--line); padding:6px 12px; border-radius:20px;
  cursor:pointer; transition:all .15s;
}
.chip:hover{ border-color:var(--accent-dim); color:var(--text); }

.cta-row{ display:flex; align-items:center; gap:16px; margin-top:20px; flex-wrap:wrap; }
button.primary{
  background:var(--accent); color:#06110B; border:none;
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:9px; cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 0 0 rgba(57,255,136,0);
}
button.primary:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(57,255,136,0.25); }
button.primary:disabled{ opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }
.hint{ font-size:12px; color:var(--text-dim); }

.waveform{
  display:none; align-items:flex-end; gap:3px; height:36px; margin:20px 0;
}
.waveform.active{ display:flex; }
.waveform span{
  width:4px; background:var(--accent); border-radius:2px;
  animation:wave 1s ease-in-out infinite;
}
@keyframes wave{
  0%,100%{ height:20%; opacity:0.4; } 50%{ height:100%; opacity:1; }
}

.status-text{ font-size:13px; color:var(--accent); display:none; margin-top:4px; }
.status-text.active{ display:block; }

.results{ display:none; margin-top:8px; }
.results.active{ display:block; }

.tabs{
  display:flex; gap:4px; border-bottom:1px solid var(--line);
  margin-bottom:24px; overflow-x:auto;
}
.tab{
  font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:600;
  color:var(--text-dim); background:none; border:none; cursor:pointer;
  padding:12px 16px; border-bottom:2px solid transparent; white-space:nowrap;
  transition:color .15s;
}
.tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.tab:hover:not(.active){ color:var(--text); }

.tab-content{ display:none; }
.tab-content.active{ display:block; animation:fadeIn .3s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.output-block{
  background:var(--input-bg); border:1px solid var(--line); border-radius:10px;
  padding:20px; font-size:14px; white-space:pre-wrap; line-height:1.7;
  max-height:420px; overflow-y:auto;
}
.output-block:focus{ outline:none; border-color:var(--accent-dim); background:var(--input-bg); }
.output-block h3{ font-family:'Space Grotesk', sans-serif; font-size:14px; color:var(--accent); margin:16px 0 6px; }
.output-block h3:first-child{ margin-top:0; }

.edit-hint{ font-size:11px; color:var(--text-dim); margin-bottom:8px; }

.copy-btn{
  margin-top:12px; font-size:12px; color:var(--accent);
  background:var(--accent-wash); border:1px solid var(--accent-dim);
  padding:7px 14px; border-radius:8px; cursor:pointer;
}
.copy-btn:hover{ background:rgba(57,255,136,0.15); }

.social-post{
  background:var(--input-bg); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; margin-bottom:10px; font-size:13.5px; position:relative;
}
.social-post:focus{ outline:none; border-color:var(--accent-dim); }
.social-post .num{ color:var(--accent); font-weight:700; margin-right:6px; }

footer{
  max-width:900px; margin:60px auto 40px; padding:24px; text-align:center;
  color:var(--text-dim); font-size:12px; border-top:1px solid var(--line);
}
.footer-link{
  background:none; border:none; color:var(--text-dim); font-size:12px;
  text-decoration:underline; cursor:pointer; margin-top:8px; padding:0;
}
.footer-link:hover{ color:var(--accent); }

.privacy-note{
  font-size:11.5px; color:var(--text-dim); text-align:center; margin-top:14px;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.privacy-detail p{ font-size:13px; color:var(--text-dim); line-height:1.6; margin-bottom:14px; }
.privacy-detail strong{ color:var(--text); }

.error-box{
  background:rgba(255,80,80,0.08); border:1px solid rgba(255,80,80,0.3);
  color:#ff8080; padding:14px 16px; border-radius:10px; font-size:13px; margin-top:16px; display:none;
  line-height:1.6;
}
.error-box a{ color:var(--accent); }
.error-box.active{ display:block; }