:root{
  --bg:#0b1020;
  --surface:#11182b;
  --muted:#90a0c0;
  --text:#e8eeff;
  --accent:#7c3aed;
  --accent2:#06b6d4;
  --card:#0f1528;
  --ok:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
  --radius:12px;
  --transition:all .2s ease;
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-behavior:smooth}
body{
  min-height:100%;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:radial-gradient(1200px 800px at 100% -10%,rgba(124,58,237,.2),transparent),
             radial-gradient(900px 600px at -10% 100%,rgba(6,182,212,.18),transparent),
             var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Focus styles for accessibility */
:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:2px;
}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:24px 16px}
.header{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.logo{width:40px;height:40px;flex-shrink:0}
.h1{font-size:clamp(20px,4vw,28px);font-weight:800;letter-spacing:.4px}
.badge{padding:4px 10px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.subtitle{color:var(--muted);margin:8px 0 24px;font-size:clamp(13px,2.5vw,15px)}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}

/* Cards */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  border-radius:16px;padding:16px;position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:var(--transition);
}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.45);border-color:rgba(255,255,255,.12)}
.card h3{margin:2px 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--radius);padding:10px 14px;
  font-weight:700;font-size:14px;
  border:1px solid rgba(255,255,255,.12);
  background:#121a31;color:var(--text);
  cursor:pointer;transition:var(--transition);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.4)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.cta{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff}
.btn.cta:hover{filter:brightness(1.1);box-shadow:0 8px 24px rgba(124,58,237,.35)}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:8px}

/* Toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 16px;align-items:center}

/* Tool sections */
.tool{display:none}
.tool.active{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Panels */
.panel{
  background:var(--card);border:1px solid rgba(255,255,255,.06);
  border-radius:16px;padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.panel h2{margin:0 0 4px;font-size:22px;font-weight:800}

/* Inputs */
.input,textarea,select{
  width:100%;padding:12px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:#0c1224;color:var(--text);
  font-family:inherit;font-size:14px;
  transition:border-color .2s ease;
}
.input:focus,textarea:focus,select:focus{
  border-color:var(--accent2);
  outline:none;
  box-shadow:0 0 0 3px rgba(6,182,212,.15);
}
textarea{resize:vertical}
select{cursor:pointer}
label{font-size:13px;color:var(--muted);display:block;margin:12px 0 6px;font-weight:500}

/* Two-column layout */
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:700px){
  .row{grid-template-columns:1fr}
  .container{padding:16px 12px}
  .grid{grid-template-columns:1fr}
}

/* Output panels */
.output{
  white-space:pre-wrap;word-break:break-all;
  background:#0c1224;border-radius:var(--radius);
  padding:12px;border:1px solid rgba(255,255,255,.12);
  min-height:120px;max-height:400px;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:13px;line-height:1.6;
  position:relative;
}
.output:empty::before{
  content:'Output will appear here...';
  color:rgba(144,160,192,.4);
  font-style:italic;
}

/* Copy button on outputs */
.output-wrap{position:relative}
.copy-btn{
  position:absolute;top:8px;right:8px;
  padding:4px 10px;font-size:11px;font-weight:700;
  border-radius:8px;border:1px solid rgba(255,255,255,.15);
  background:rgba(12,18,36,.9);color:var(--muted);
  cursor:pointer;transition:var(--transition);
  opacity:0;z-index:2;
}
.output-wrap:hover .copy-btn{opacity:1}
.copy-btn:hover{color:var(--text);border-color:var(--accent2)}

/* Footer */
footer{margin:32px 0 8px;color:var(--muted);font-size:13px;text-align:center}
footer a:hover{color:var(--accent2)}

/* Misc */
hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:16px 0}
.small{font-size:12px;color:var(--muted)}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#0c1224;border:1px solid rgba(255,255,255,.12);padding:2px 6px;border-radius:6px;font-size:12px}
.tag{font-size:11px;border:1px dashed rgba(255,255,255,.15);padding:2px 8px;border-radius:999px;color:var(--muted)}
.version{position:absolute;right:12px;top:12px;font-size:11px;color:#c4d1ff;background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.35);padding:2px 8px;border-radius:999px}

/* Toast */
.toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--surface);border:1px solid rgba(255,255,255,.12);
  padding:12px 18px;border-radius:var(--radius);
  font-size:14px;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  z-index:10000;
  transform:translateY(100px);opacity:0;
  transition:transform .3s ease,opacity .3s ease;
  pointer-events:none;
}
.toast.show{transform:translateY(0);opacity:1}

/* Progress */
.progress{height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* Switch */
.switch{display:inline-flex;align-items:center;gap:8px}
.switch input{accent-color:var(--accent);width:18px;height:18px}

/* Sticky nav */
nav.sticky{
  position:sticky;top:0;
  background:rgba(11,16,32,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;padding:8px;
  margin-bottom:16px;z-index:10;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.1) transparent;
}
nav.sticky::-webkit-scrollbar{height:4px}
nav.sticky::-webkit-scrollbar-track{background:transparent}
nav.sticky::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
nav.sticky .btn{background:#0d1428;flex-shrink:0}
nav.sticky .btn.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}

/* Drag-and-drop zone */
.drop-zone{
  border:2px dashed rgba(255,255,255,.15);
  border-radius:var(--radius);
  padding:32px 16px;
  text-align:center;
  color:var(--muted);
  transition:var(--transition);
  cursor:pointer;
}
.drop-zone.dragover{
  border-color:var(--accent2);
  background:rgba(6,182,212,.06);
  color:var(--text);
}
.drop-zone input[type="file"]{display:none}

/* Color input wrapper */
.color-input-wrap{display:flex;align-items:center;gap:10px}
.color-input-wrap input[type="color"]{
  width:44px;height:44px;border:none;border-radius:8px;
  cursor:pointer;background:none;padding:0;
}
.color-input-wrap input[type="text"]{flex:1}

/* Swatch */
.swatch-btn{
  width:60px;height:60px;border-radius:var(--radius);
  border:2px solid rgba(255,255,255,.12);
  cursor:pointer;transition:var(--transition);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.swatch-btn:hover{transform:scale(1.08);border-color:var(--accent2)}

/* Password strength meter */
.strength-meter{height:4px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:6px;overflow:hidden}
.strength-meter>span{display:block;height:100%;transition:width .3s ease,background .3s ease;border-radius:999px}


/* Pro feature labels */
.pro-label{font-size:12px;color:var(--accent);font-weight:600}


/* === FORCE VERTICAL TOOL SCROLL FIX === */
.tools-container,
.tools-scroll,
.tools-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.tool-card,
.tool-item {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

.tools-container * {
  white-space: normal !important;
}

body, html {
  overflow-x: hidden !important;
}

.marketplace-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.marketplace-card h3{margin:0 0 6px}
.marketplace-card p{margin:0;color:var(--muted)}
.market-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.market-actions .toolbar{margin:0}
#unlockModal .panel{position:relative}
@media (max-width: 720px){
  .market-actions{justify-content:flex-start;width:100%}
  .market-actions .toolbar{width:100%;display:flex;flex-direction:column}
  .market-actions .toolbar .btn{width:100%;justify-content:center}
}