/* ========================================
   WatermarkStudio - Style
   ======================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root {
  --bg:         #09090b;
  --bg-raised:  #111113;
  --bg-card:    #18181b;
  --border:     #27272a;
  --border-hi:  #3f3f46;
  --text:       #e4e4e7;
  --text-dim:   #71717a;
  --text-xdim:  #52525b;
  --white:      #fafafa;
  --r:          8px;
  --r-lg:       12px;
  --sans:       'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:       'Space Mono', 'SF Mono', monospace;
  --ease:       cubic-bezier(.4,0,.2,1);
}

html{font-size:16px;scroll-behavior:smooth;}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;
}
a{color:var(--text-dim);text-decoration:none;transition:color .2s var(--ease);}
a:hover{color:var(--text);}
::selection{background:rgba(255,255,255,.12);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-weight:600;font-size:.8125rem;
  padding:9px 20px;border-radius:var(--r);
  border:1px solid transparent;cursor:pointer;transition:all .2s var(--ease);
  white-space:nowrap;line-height:1.4;
}
.btn-primary{background:var(--white);color:var(--bg);border-color:var(--white);}
.btn-primary:hover{opacity:.88;}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border);}
.btn-outline:hover{border-color:var(--border-hi);}
.btn-ghost{background:transparent;color:var(--text-dim);border:none;padding:6px 10px;}
.btn-ghost:hover{color:var(--text);}
.btn-sm{padding:6px 14px;font-size:.75rem;}
.btn-lg{padding:13px 30px;font-size:.875rem;}
.btn-block{width:100%;justify-content:center;}

/* Header */
.header{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--border);
  background:rgba(9,9,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.header-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;height:54px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:700;font-size:.9375rem;letter-spacing:-.01em;}
.nav{display:flex;align-items:center;gap:20px;}
.nav-link{font-size:.8125rem;font-weight:500;}
.lang-toggle{font-family:var(--mono)!important;font-size:.6875rem!important;letter-spacing:.06em;padding:4px 10px!important;border:1px solid var(--border)!important;border-radius:4px!important;}
.lang-toggle:hover{border-color:var(--border-hi)!important;}

/* Landing */
.landing{max-width:1100px;margin:0 auto;padding:0 24px;}
.hero{text-align:center;padding:96px 0 72px;}
.hero-badge{
  display:inline-block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;
  color:var(--text-dim);border:1px solid var(--border);
  padding:5px 16px;border-radius:100px;margin-bottom:28px;text-transform:uppercase;
}
.hero h1{font-size:clamp(2rem,5.5vw,3.75rem);font-weight:700;line-height:1.1;margin-bottom:20px;letter-spacing:-.025em;}
.hero-accent{
  background:linear-gradient(135deg,#d4d4d8 0%,#52525b 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{font-size:1.0625rem;color:var(--text-dim);max-width:440px;margin:0 auto 36px;line-height:1.65;white-space:pre-line;}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hero-note{font-size:.75rem;color:var(--text-xdim);margin-top:20px;font-family:var(--mono);}

/* Features */
.features-section{padding:24px 0 72px;}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.feature-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:28px 24px;transition:border-color .25s var(--ease);
}
.feature-card:hover{border-color:var(--border-hi);}
.feature-icon{margin-bottom:14px;color:var(--text-dim);}
.feature-card h3{font-size:1rem;margin-bottom:6px;font-weight:600;}
.feature-card p{font-size:.875rem;color:var(--text-dim);line-height:1.55;}

/* Trust Banner */
.trust-banner{padding:0 0 80px;}
.trust-inner{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px 28px;
}
.trust-inner svg{flex-shrink:0;color:var(--text-xdim);margin-top:2px;}
.trust-inner strong{display:block;margin-bottom:4px;font-size:.9375rem;}
.trust-inner p{font-size:.875rem;color:var(--text-dim);line-height:1.55;}

/* App */
.app-section{min-height:calc(100vh - 54px);}
.app-container{max-width:1400px;margin:0 auto;padding:0 24px;}
.toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--border);gap:12px;
}
.usage-badge{
  font-family:var(--mono);font-size:.6875rem;
  color:var(--text-dim);background:var(--bg-card);
  padding:4px 12px;border-radius:100px;border:1px solid var(--border);letter-spacing:.02em;
}
.app-layout{display:grid;grid-template-columns:300px 1fr;gap:0;min-height:calc(100vh - 110px);}

/* Panel */
.panel{
  padding:20px 20px 20px 0;border-right:1px solid var(--border);
  overflow-y:auto;max-height:calc(100vh - 110px);
}
.panel-title{font-size:.875rem;font-weight:600;margin-bottom:18px;letter-spacing:-.01em;}
.field{margin-bottom:18px;}
.field-label{display:block;font-size:.75rem;color:var(--text-dim);margin-bottom:5px;font-weight:500;letter-spacing:.02em;}
.input{
  width:100%;padding:7px 10px;font-size:.8125rem;
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);font-family:var(--sans);transition:border-color .2s;
}
.input:focus{outline:none;border-color:var(--border-hi);}
.input-xs{width:80px;}
.tabs{display:flex;gap:4px;}
.tab{
  flex:1;padding:7px;font-size:.75rem;text-align:center;
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text-dim);
  cursor:pointer;font-family:var(--sans);font-weight:500;transition:all .2s;
}
.tab.active{background:var(--white);color:var(--bg);border-color:var(--white);}
.slider-row{display:flex;align-items:center;gap:10px;}
.slider{flex:1;accent-color:var(--white);height:4px;}
.slider-val{font-family:var(--mono);font-size:.6875rem;color:var(--text-dim);min-width:44px;text-align:right;}
.color-row{display:flex;align-items:center;gap:8px;}
.color-picker{
  width:32px;height:32px;border:1px solid var(--border);border-radius:var(--r);
  background:none;cursor:pointer;padding:1px;
}
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.pos-btn{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:4px;color:var(--text-xdim);cursor:pointer;
  font-size:.5625rem;font-family:var(--mono);font-weight:700;
  transition:all .15s var(--ease);letter-spacing:.04em;
}
.pos-btn.active{background:var(--white);color:var(--bg);border-color:var(--white);}
.pos-btn:hover:not(.active){border-color:var(--border-hi);}
.divider{height:1px;background:var(--border);margin:20px 0;}
.upload-zone{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:20px;border:1.5px dashed var(--border);border-radius:var(--r);
  cursor:pointer;color:var(--text-dim);font-size:.75rem;transition:border-color .2s;
}
.upload-zone:hover{border-color:var(--border-hi);}
#logo-preview{max-width:100%;max-height:64px;margin-bottom:6px;border-radius:4px;}

/* Main Area */
.main{padding:20px 0 20px 20px;}
.drop-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:56px 24px;
  border:1.5px dashed var(--border);border-radius:var(--r-lg);
  color:var(--text-dim);text-align:center;transition:all .2s var(--ease);min-height:280px;
}
.drop-zone.dragover{border-color:var(--text);background:rgba(255,255,255,.015);}
.drop-zone h3{font-size:1rem;color:var(--text);font-weight:600;}
.drop-zone p{font-size:.8125rem;}
.drop-hint{font-size:.6875rem;color:var(--text-xdim);margin-top:8px;font-family:var(--mono);}

/* Thumbs */
.thumbs-wrap{margin-top:16px;}
.thumbs-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.mono-sm{font-family:var(--mono);font-size:.75rem;color:var(--text-dim);}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;}
.thumb{
  position:relative;aspect-ratio:1;border-radius:var(--r);
  overflow:hidden;border:1.5px solid var(--border);cursor:pointer;transition:border-color .15s;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb.active{border-color:var(--white);border-width:2px;}
.thumb-x{
  position:absolute;top:3px;right:3px;
  width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,.7);color:#fff;border:none;
  cursor:pointer;font-size:.625rem;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;
}
.thumb:hover .thumb-x{opacity:1;}
.thumb-name{
  position:absolute;bottom:0;left:0;right:0;
  padding:3px 5px;font-size:.5625rem;
  background:rgba(0,0,0,.65);color:#ddd;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);
}

/* Preview */
.preview-wrap{margin-top:20px;}
.preview-frame{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:14px;
  display:flex;align-items:center;justify-content:center;
  min-height:260px;overflow:hidden;
}
.preview-frame canvas{max-width:100%;max-height:480px;border-radius:4px;}

/* Process */
.process-wrap{margin-top:20px;}
.progress{
  width:100%;height:3px;background:var(--bg-card);
  border-radius:2px;margin-top:14px;overflow:hidden;
}
.progress-fill{height:100%;background:var(--white);width:0%;transition:width .3s var(--ease);border-radius:2px;}
.progress-text{font-family:var(--mono);font-size:.75rem;color:var(--text-dim);margin-top:8px;text-align:center;}

/* Footer */
.footer{border-top:1px solid var(--border);padding:20px 0;margin-top:72px;}
.footer-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:.75rem;color:var(--text-xdim);
}
.footer-inner nav{display:flex;gap:20px;}

/* Responsive */
@media(max-width:820px){
  .app-layout{grid-template-columns:1fr;}
  .panel{border-right:none;border-bottom:1px solid var(--border);padding:16px 0;max-height:none;overflow:visible;}
  .main{padding:16px 0;}
}
@media(max-width:640px){
  .features-grid{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;gap:8px;text-align:center;}
  .hide-mobile{display:none;}
}
/* ========== AUTH ========== */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);}
.modal-content{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:32px;width:100%;max-width:400px;margin:16px;}
.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);line-height:1;padding:4px 8px;}
.modal-close:hover{color:var(--fg);}
.modal-title{font-family:var(--font-mono);font-size:18px;margin:0 0 4px;}
.modal-desc{font-size:13px;color:var(--muted);margin:0 0 20px;}
.auth-msg{margin-top:16px;padding:12px;border-radius:8px;font-size:14px;line-height:1.5;}
.auth-msg-ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;}
.auth-msg-err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}
.auth-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:12px 24px;border-radius:8px;font-size:14px;z-index:1001;transition:opacity 0.3s;background:var(--fg);color:var(--bg);box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.auth-user-info{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.auth-user-email{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}