/* QR Universe Studio · 2.0 Premium UI Layer */
:root {
  --bg: #f3f5f9;
  --ink: #151d35;
  --muted: #75819a;
  --line: #e6eaf2;
  --purple: #6456f7;
  --purple-hover: #503fdb;
  --soft: #eeedff;
  --white: #fff;
  --radius: 20px;
  --shadow: 0 10px 40px rgba(21,31,64,.045), 0 2px 8px rgba(26,34,68,.025);
}
body {
  background: radial-gradient(ellipse 1000px 500px at 50% 0, #eff1fc 0, transparent 80%), #f4f6fb;
  color: var(--ink);
  font-size: 14px;
}
.container { width: min(1280px, calc(100% - 56px)); }
.topbar { height: 88px; }
.brand { gap: 12px; letter-spacing: -1.35px; font-size: 23px; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(145deg,#8b79ff,#5e4cdb);
  box-shadow: 0 9px 22px #6b59ef38, inset 0 1px 0 #ffffff6e;
}
.brand small { font-size: 8px; margin-top: 7px; color: #8490a6; letter-spacing: 1.9px; }
.header-nav { gap: 34px; color: #525f78; }
.header-nav a { position: relative; }
.header-nav a:after { content: ''; position: absolute; height: 2px; left: 0; right: 100%; bottom: -7px; border-radius: 2px; background: #7868fa; transition: right .2s; }
.header-nav a:hover:after { right: 0; }
.language-select { border-color: #e3e7f1; border-radius: 12px; padding: 9px 12px; }
.free-badge { padding: 8px 13px; background: #effaf4; font-size: 11px; }
.header-cta { display: inline-flex; align-items: center; gap: 8px; background: #161e38; color: white; font-size: 12px; padding: 10px 16px; border-radius: 11px; font-weight: 750; transition: transform .2s, background .2s; }
.header-cta:hover { color: white; background: #35306f; transform: translateY(-1px); }
.hero {
  min-height: 336px; margin-top: 4px; margin-bottom: 22px;
  padding: 40px 61px 42px; overflow: hidden; border-radius: 28px;
  background: radial-gradient(ellipse 500px 380px at 83% 18%,#49418b88 0%,transparent 79%),
              radial-gradient(ellipse 450px 410px at 105% 108%,#23457e66 0%,transparent 78%),
              linear-gradient(110deg,#151d37 7%,#202044 72%,#1c2449 100%);
  box-shadow: 0 28px 45px #151b3b1b;
  color: #fff;
}
.hero:before { content: ''; position: absolute; inset: 0; opacity: .45; pointer-events: none; background-image: radial-gradient(#b7adf8 0.8px, transparent 0.8px); background-size: 27px 27px; mask-image: linear-gradient(90deg,transparent 36%,#000); }
.hero:after { content: ''; position: absolute; border: 1px solid #d4caff23; width: 540px; height: 540px; border-radius: 50%; right: -125px; top: -130px; pointer-events: none; }
.hero-copy { max-width: 720px; }
.eyebrow { color: #d4ceff; background: #ffffff14; border: 1px solid #a59cfa38; margin-bottom: 21px; letter-spacing: .3px; font-weight: 650; }
.pulse { background:#9c94ff; box-shadow: 0 0 0 3px #978cf738; }
.hero h1 { font-size: clamp(34px, 3.65vw, 54px); font-weight: 800; letter-spacing: -2px; line-height: 1.24; margin-bottom: 16px; }
.hero h1 em { background:linear-gradient(90deg,#ab9aff,#f2baff);background-clip:text; }
.hero p { color: #bec6dd; font-size: 14px; line-height: 1.85; max-width: 590px; }
.hero-points { color: #d9deee; gap: 19px; margin-top: 24px; font-size: 11.5px; }
.hero-points > span { display: flex; gap: 6px; align-items: center; }
.hero-decor-chip { position:absolute; z-index: 3; background: #fff; color:#253050; border-radius: 12px; padding: 10px 15px; font-size: 11px; font-weight:750; box-shadow:0 12px 25px #12162b5b; }
.hero-decor-chip span { color: #6d5ff0; font-size: 14px; margin-right: 6px; }
.chip-top { top: 2px; right: 10px; transform: rotate(5deg); }
.chip-bottom { bottom: 7px; left: 0; transform: rotate(-5deg); }
.hero-decoration { width: 285px; height: 245px; margin-right: 10px; }
.floating-code { width: 195px; height: 195px; right: 38px; top: 23px; border-radius: 26px; transform: rotate(10deg); box-shadow: 0 30px 70px #070c2980; }
.qr-illusion { width: 145px; height: 145px; }
.decor-orb.orb-one { width: 210px; height: 210px; top: 8px; right: 0; background: #a89cf62c; border: 1px solid #c2baff5b; }
.decor-orb.orb-two { background: #68b6f830; left: -1px; width: 116px; height: 116px; }
.workspace { margin-top: 4px; }
.workspace-topline { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:14px; }
.workspace-heading { display:flex; gap:12px; align-items:center; }
.workspace-heading .workspace-symbol { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:#eae7ff; color:#6854eb; font-size:19px; font-weight:700; }
.workspace-heading strong { display:block; font-size:15px; font-weight:800; }
.workspace-heading small { display:block; color:#8994aa; font-size:11px; }
.workspace-trust { display:flex; gap:7px; align-items:center; color:#69758c; font-size:11px; }
.workspace-trust b { display:inline-block; width:7px; height:7px; border-radius:100px; background:#2fba8c; box-shadow:0 0 0 3px #c6f3e4; }
.tabs { border-radius: 16px; width:100%; padding:6px; background:#fff; box-shadow:0 5px 15px #151c3420; gap:4px; border:1px solid #e7eaf4; }
.tab { border-bottom:0; border-radius:11px; padding:13px 22px; gap:10px; color:#75819a; font-size:12px; transition: background .15s,color .15s; }
.tab.active { background: #eeedff; color: #5b4ce0; box-shadow:inset 0 0 0 1px #dcd7ff; }
.tab:hover:not(.active) { background:#f7f8fc; }
.tab-icon {font-size:19px;}
.tool-panel { padding-top:19px; border:0; }
.app-grid { grid-template-columns: minmax(0, 1.19fr) minmax(360px,.81fr); gap: 20px; }
.editor-col { gap: 17px; }
.panel-card { padding: 26px; border-color: #e5e9f2; box-shadow: var(--shadow); }
.section-heading { margin-bottom: 19px; }
.section-heading h2 { font-size: 18px; margin-top:6px; }
.mini-label { color: #9188c6; letter-spacing: 1.35px; font-weight: 750; font-size: 10px; }
.count-pill { background:#f0edff; padding:7px 14px; }
.category-grid { gap: 9px; }
.category-button { border-color: #e9edf4; border-radius:13px; min-height:81px; font-weight: 700; font-size:11px; background:linear-gradient(#fff,#fdfdff); }
.category-button:hover { border-color:#aea5f9; box-shadow:0 5px 13px #8476f41a; transform:translateY(-1px); }
.category-button.active { border-color:#9b8bff; background:linear-gradient(155deg,#f0eaff,#f8f7ff); box-shadow:0 0 0 1px #b5acff inset; }
.category-button .cat-icon { font-size:23px; }
.search-box { background:#f8f9fd; border-color:#e9edf4; padding: 2px 14px; }
.search-box:focus-within { border-color:#9c91ff; box-shadow:0 0 0 3px #aaa3ff24; }
.search-box input { font-size:13px; }
.field input,.field select,.field textarea { border-color:#e3e7f0; background:#fbfcff; min-height:43px; font-size:13px; border-radius:11px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#a89dfa; outline:none; box-shadow:0 0 0 3px #e8e4ff; }
.field { font-size:12px; color:#4c5873; }
.color-input { background:#fbfcff; border-radius:11px; }
.logo-box { background:linear-gradient(120deg,#fafaff,#f8f9ff); border-color:#cfcafa; border-radius:13px; padding:16px; }
.logo-box strong { font-size:12.5px; }
.logo-box p { color:#7e89a0; max-width:350px; }
.logo-safety { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:10.5px; color:#71839a; }
.logo-safety-icon { color:#13966a; }
.upload-button { border-color:#d8d3ff; background:#efedff; color:#5e50da; border-radius:10px; padding:10px 14px; }
.upload-button:hover { background:#e4e0ff; }
.privacy-line { color:#6b8c80; }
.preview-col { top:15px; }
.preview-card { padding:26px; border:1px solid #e1e5ee; }
.preview-surface { min-height:339px; margin-top:20px; border-radius:18px; background:radial-gradient(circle at 50% 48%,#fff 0%,#f5f5ff 49%,#eff1fb 100%); position:relative; overflow:hidden; }
.preview-surface:before { content:''; position:absolute; inset:12px; border:1px dashed #dedffa; border-radius:12px; pointer-events:none; }
.preview-surface:after { content:'LIVE PREVIEW'; position:absolute; bottom:15px; right:20px; font-size:9px; color:#a7acc3; letter-spacing:1.5px; font-weight:750; }
.qr-preview { width: min(100%,250px); box-shadow:0 15px 36px #373c7840; padding:5px; }
.preview-info { margin:18px 0 22px; }
.download-btn { border-radius:11px; font-size:12px; min-height:43px; }
.download-btn.primary,.big-primary { background:linear-gradient(100deg,#6e5cf9,#6046db); border-color:#6453ef; box-shadow:0 7px 14px #6858e724; }
.download-btn.primary:hover,.big-primary:hover { background:linear-gradient(100deg,#5d4de0,#4c37bc); }
.action-button { border-radius:11px; }
.preview-footnote { font-size:10.5px; }
.status-pill { border:1px solid #cdefe2; }
.status-dot { box-shadow:0 0 0 3px #cbf5e4; }
.feature-card,.faq-list details { box-shadow:0 7px 20px #242d5011; }
.feature-card { border-radius:17px; padding:29px 24px; }
.feature-card:hover { transform:translateY(-2px); transition:transform .2s; }
.below-heading h2 { font-size:31px; }
.faq-list details { padding:17px 21px; border-radius:14px; }
.footer { margin-top:10px; }
@media(max-width:1050px) {
  .hero { padding:33px 39px; }
  .hero-decoration { width:245px; }
  .floating-code { right:8px; }
  .chip-top { right:-13px; }
  .app-grid { grid-template-columns:minmax(0,1.08fr) minmax(310px,.86fr); }
  .panel-card { padding:21px; }
}
@media(max-width:790px) {
  .container { width:min(100% - 28px,680px); }
  .topbar { height:76px; }
  .header-cta { display:none; }
  .hero { border-radius:22px; padding:32px 26px; margin-top:7px; margin-bottom:20px; }
  .hero h1 { font-size:37px; }
  .hero-decoration { display:none; }
  .hero-points { margin-top:18px; }
  .workspace-topline { margin-bottom:13px; }
  .workspace-trust { display:none; }
  .tabs { overflow:auto; width:100%; }
  .tab { flex:0 0 auto; font-size:11px; padding:11px 12px; }
  .app-grid,.secondary-grid { grid-template-columns:1fr; }
  .preview-col { position:static; }
  .category-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .preview-surface { min-height:308px; }
}
@media(max-width:440px) {
  .container { width:calc(100% - 20px); }
  .topbar { height:69px; }
  .hero { padding:28px 21px; border-radius:19px; }
  .hero h1 { font-size:31px; }
  .hero p { font-size:12.2px; }
  .hero-points { gap:9px 14px; }
  .workspace-heading strong { font-size:13px; }
  .workspace-heading small { font-size:10px; }
  .tabs { border-radius:14px; }
  .panel-card { padding:19px; }
  .category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .preview-card { padding:20px; }
  .logo-box { flex-wrap:wrap; }
}
@media print { .hero:before,.hero:after,.preview-surface:before,.preview-surface:after,.workspace-topline { display:none!important; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after {transition-duration:.01ms!important; animation-duration:.01ms!important;scroll-behavior:auto!important;} }