@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Allura&family=Anton&family=Bebas+Neue&family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Dancing+Script:wght@400;600;700&family=EB+Garamond:wght@400;500;600;700&family=Great+Vibes&family=Lato:wght@400;700;900&family=Libre+Baskerville:wght@400;700&family=Montserrat:wght@400;600;700;900&family=Parisienne&family=Playfair+Display:wght@400;600;700;900&family=Poppins:wght@400;500;600;700;800;900&family=Raleway:wght@400;600;700;900&display=swap');

:root{
  --bs-bg:#f5f7fb;
  --bs-surface:#ffffff;
  --bs-surface-2:#fbfcff;
  --bs-text:#0f172a;
  --bs-muted:#667085;
  --bs-soft:#f1f5f9;
  --bs-line:#e6ebf2;
  --bs-primary:#6d28d9;
  --bs-primary-2:#7c3aed;
  --bs-primary-soft:#f4f0ff;
  --bs-success:#10b981;
  --bs-warning:#f59e0b;
  --bs-danger:#ef4444;
  --bs-radius-sm:12px;
  --bs-radius:18px;
  --bs-radius-lg:24px;
  --bs-radius-xl:32px;
  --bs-shadow-xs:0 4px 12px rgba(15,23,42,.045);
  --bs-shadow-sm:0 10px 26px rgba(15,23,42,.065);
  --bs-shadow-md:0 18px 48px rgba(15,23,42,.10);
  --bs-shadow-lg:0 34px 90px rgba(15,23,42,.16);
}

html,body.bertek-s3-body{
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  background:var(--bs-bg);
}
body.bertek-s3-body #wpadminbar{display:none!important}
html.wp-toolbar{padding-top:0!important}
.bertek-s3-body *{box-sizing:border-box}
#bertek-s3-root{
  min-height:100vh;
  font-family:Poppins,Inter,Arial,sans-serif;
  color:var(--bs-text);
  background:
    radial-gradient(circle at 52% 38%,rgba(124,58,237,.065),transparent 30%),
    linear-gradient(135deg,#fbfcff,#f4f7fb 58%,#eef2f7);
}

/* Layout */
.clean-app{
  height:100vh;
  display:grid;
  grid-template-columns:82px 318px minmax(680px,1fr) 356px;
  grid-template-rows:76px 1fr;
  overflow:hidden;
  background:transparent;
}

/* Topbar */
.clean-top{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:178px minmax(260px,1fr) 300px auto;
  align-items:center;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(230,235,242,.92);
  box-shadow:0 10px 34px rgba(15,23,42,.07);
  z-index:30;
}
.clean-logo{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  background:rgba(255,255,255,.72);
  border-right:1px solid var(--bs-line);
}
.clean-logo img{
  max-width:148px;
  max-height:52px;
  object-fit:contain;
}
.clean-logo strong{font-weight:900;font-size:14px}
.clean-title{min-width:0;padding:0 24px}
.clean-title small{
  display:block;
  color:var(--bs-primary);
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.clean-title strong{
  display:block;
  margin-top:7px;
  font-size:15px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.clean-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.clean-steps span{
  height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--bs-line);
  color:#98a2b3;
  font-size:12px;
  font-weight:800;
}
.clean-steps span.active{
  color:var(--bs-primary);
  background:var(--bs-primary-soft);
  border-color:#ddd6fe;
}
.clean-actions{
  display:flex;
  align-items:center;
  gap:9px;
  padding-right:18px;
}
.clean-actions button{
  height:42px;
  border:1px solid var(--bs-line);
  background:#fff;
  color:var(--bs-text);
  border-radius:14px;
  padding:0 15px;
  font-weight:850;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.clean-actions button:hover{
  transform:translateY(-1px);
  border-color:#c4b5fd;
  box-shadow:var(--bs-shadow-xs);
}
.clean-actions .clean-cta{
  border:0;
  color:#fff;
  background:linear-gradient(135deg,var(--bs-primary-2),#4f32c8);
  box-shadow:0 14px 30px rgba(91,63,214,.28);
}
.clean-actions .clean-cta:hover{
  box-shadow:0 20px 42px rgba(91,63,214,.34);
}

/* Left rail */
.clean-rail{
  grid-row:2;
  background:linear-gradient(180deg,#0b1220,#111827);
  padding:16px 9px;
  display:flex;
  flex-direction:column;
  gap:11px;
  box-shadow:inset -1px 0 rgba(255,255,255,.05);
}
.clean-tool{
  height:68px;
  border:0;
  border-radius:20px;
  background:transparent;
  color:#cbd5e1;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.clean-tool b{font-size:21px;line-height:1;font-weight:900}
.clean-tool span{font-size:10px;font-weight:800;letter-spacing:-.01em}
.clean-tool.active,
.clean-tool:hover{
  background:linear-gradient(180deg,var(--bs-primary-2),#4f32c8);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(109,40,217,.32);
}

/* Left panel */
.clean-panel{
  grid-row:2;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-right:1px solid var(--bs-line);
  overflow:auto;
  padding:24px 22px;
}
.s8-panel-page{display:none}
.s8-panel-page.active{display:block}
.clean-panel h2{
  margin:0;
  font-size:22px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.04em;
}
.clean-panel p{
  margin:7px 0 20px;
  color:var(--bs-muted);
  font-size:13px;
  line-height:1.45;
}

/* Cards and inputs */
.clean-field,
.clean-card,
.clean-font-item{
  background:var(--bs-surface);
  border:1px solid var(--bs-line);
  border-radius:var(--bs-radius-lg);
  padding:15px;
  margin-bottom:12px;
  box-shadow:var(--bs-shadow-xs);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.clean-field:hover,
.clean-card:hover,
.clean-font-item:hover{
  transform:translateY(-1px);
  border-color:#c4b5fd;
  box-shadow:var(--bs-shadow-sm);
}
.clean-field span{
  display:block;
  font-size:14px;
  font-weight:900;
}
.clean-field small{
  display:block;
  color:#7b8496;
  font-size:12px;
  margin:4px 0 10px;
}
.clean-field input,
.clean-search,
.clean-card input{
  width:100%;
  min-height:43px;
  border:1px solid var(--bs-line);
  border-radius:15px;
  padding:11px 13px;
  background:#fff;
  color:var(--bs-text);
  outline:none;
  font-weight:800;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.clean-field input:focus,
.clean-search:focus,
.clean-card input:focus{
  border-color:var(--bs-primary);
  box-shadow:0 0 0 4px rgba(109,40,217,.10);
}

/* Font list */
.clean-font-list{display:grid;gap:11px}
.clean-font-item{
  text-align:left;
  cursor:pointer;
}
.clean-font-item strong{
  display:block;
  font-size:30px;
  line-height:1.12;
  font-weight:500;
}
.clean-font-item small{
  display:block;
  color:var(--bs-muted);
  font-size:12px;
  font-weight:800;
  margin-top:7px;
}

/* Upload */
.clean-upload{
  position:relative;
  border:2px dashed #c4b5fd;
  border-radius:28px;
  padding:28px 22px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0,rgba(124,58,237,.08),transparent 38%),
    linear-gradient(180deg,#fbfaff,#fff);
  box-shadow:var(--bs-shadow-xs);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.clean-upload:hover{
  transform:translateY(-1px);
  border-color:var(--bs-primary);
  box-shadow:var(--bs-shadow-sm);
}
.clean-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.clean-upload div{
  width:64px;
  height:64px;
  border-radius:999px;
  background:#ede9fe;
  color:var(--bs-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  margin:0 auto 14px;
}
.clean-upload strong{display:block;font-size:15px;font-weight:900}
.clean-upload small{
  display:block;
  color:var(--bs-muted);
  font-size:12px;
  line-height:1.5;
  margin-top:8px;
}
.clean-status{margin-top:12px;font-weight:850}
.s8-status.ok{color:var(--bs-success)}
.s8-status.error{color:var(--bs-danger)}

/* Controls */
.clean-card>div{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.clean-card label{font-size:12px;color:#475467;font-weight:900}
.clean-card strong{font-size:12px;font-weight:900}
.clean-color{
  display:grid!important;
  grid-template-columns:52px 1fr;
  gap:10px;
  margin-bottom:0!important;
}
.clean-color input{height:42px;padding:3px}
.clean-color strong{
  border:1px solid var(--bs-line);
  border-radius:14px;
  padding:11px 12px;
}
.clean-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.clean-grid.layout{grid-template-columns:repeat(2,1fr)}
.clean-grid button{
  height:46px;
  border:1px solid var(--bs-line);
  background:#fff;
  border-radius:15px;
  color:var(--bs-text);
  font-weight:900;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.clean-grid button:hover{
  transform:translateY(-1px);
  background:var(--bs-primary-soft);
  border-color:#c4b5fd;
  box-shadow:var(--bs-shadow-xs);
}
.danger{color:var(--bs-danger)!important}

/* Workspace */
.clean-work{
  grid-row:2;
  position:relative;
  display:grid;
  grid-template-rows:1fr 58px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 58%,rgba(124,58,237,.13),transparent 25%),
    radial-gradient(circle at 50% 40%,#ffffff,#f8fafc 46%,#eef2f7 100%);
}
.clean-stage{
  overflow:auto;
  padding:48px 52px 96px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.clean-stage:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:104px;
  width:460px;
  height:82px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(15,23,42,.18),rgba(124,58,237,.10) 42%,transparent 72%);
  filter:blur(7px);
  pointer-events:none;
}
.clean-board{
  position:relative;
  z-index:2;
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.clean-board canvas{
  display:block;
  filter:drop-shadow(0 30px 38px rgba(15,23,42,.24));
}

/* Floating toolbar */
.clean-floating{
  position:absolute;
  left:50%;
  bottom:76px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  align-items:center;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(20px);
  border:1px solid rgba(230,235,242,.92);
  border-radius:22px;
  padding:9px;
  box-shadow:0 20px 56px rgba(15,23,42,.16);
  z-index:12;
}
.clean-floating select,
.clean-floating button,
.clean-floating strong,
.clean-floating input{
  height:40px;
  border:1px solid var(--bs-line);
  border-radius:14px;
  background:#fff;
  min-width:40px;
  padding:0 10px;
  font-weight:900;
}
.clean-floating select{min-width:158px}
.clean-floating input{width:44px;padding:3px}

/* Footer */
.clean-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 22px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--bs-line);
  color:var(--bs-muted);
  font-size:12px;
  font-weight:850;
}
.clean-footer div{display:flex;gap:8px;align-items:center}
.clean-footer button,
.clean-footer strong{
  height:36px;
  min-width:40px;
  border:1px solid var(--bs-line);
  background:#fff;
  border-radius:12px;
  padding:0 10px;
  font-weight:900;
}

/* Inspector */
.clean-inspector{
  grid-row:2;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-left:1px solid var(--bs-line);
  padding:24px 22px;
  overflow:auto;
}
.clean-score,
.clean-check,
.clean-ai{
  background:#fff;
  border:1px solid var(--bs-line);
  border-radius:var(--bs-radius-lg);
  padding:18px;
  margin-bottom:13px;
  box-shadow:var(--bs-shadow-xs);
}
.clean-score{
  background:
    radial-gradient(circle at 85% 15%,rgba(16,185,129,.14),transparent 32%),
    linear-gradient(135deg,#fff,#fbfffd);
}
.clean-score span{
  display:block;
  color:var(--bs-primary);
  font-size:12px;
  letter-spacing:.07em;
  font-weight:950;
  text-transform:uppercase;
}
.clean-score strong{
  display:inline-block;
  margin-top:8px;
  font-size:58px;
  line-height:.9;
  color:#16a34a;
  font-weight:950;
  letter-spacing:-.06em;
}
.clean-score small{color:#16a34a;font-weight:900}
.clean-score p{color:var(--bs-muted);font-size:13px;margin:10px 0 0}
.clean-check{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:12px;
  align-items:start;
}
.clean-check b{
  width:27px;
  height:27px;
  border-radius:999px;
  background:var(--bs-success);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}
.clean-check.warn b{background:var(--bs-warning)}
.clean-check strong{display:block;font-size:14px}
.clean-check p{
  color:var(--bs-muted);
  margin:5px 0 0;
  font-size:13px;
  line-height:1.45;
}
.clean-ai{
  border-color:#c4b5fd;
  background:
    radial-gradient(circle at 92% 8%,rgba(124,58,237,.18),transparent 32%),
    linear-gradient(135deg,#fbfaff,#fff);
}
.clean-ai strong{display:block;font-size:15px}
.clean-ai p{color:var(--bs-muted);font-size:13px;line-height:1.55}
.clean-ai button{
  border:0;
  background:linear-gradient(135deg,var(--bs-primary-2),#4f32c8);
  color:#fff;
  border-radius:14px;
  padding:11px 15px;
  font-weight:950;
  box-shadow:0 12px 26px rgba(91,63,214,.24);
}

@media(max-width:1320px){
  .clean-inspector{display:none}
  .clean-app{grid-template-columns:82px 318px 1fr}
  .clean-top{grid-template-columns:170px 1fr auto}
  .clean-steps{display:none}
}
@media(max-width:980px){
  html,body.bertek-s3-body{overflow:auto}
  .clean-app{display:block;height:auto;min-height:100vh}
  .clean-top{position:sticky;top:0;display:flex;gap:10px;padding:10px}
  .clean-logo{height:auto;min-width:110px;border-right:0}
  .clean-title small,.clean-actions button:not(.clean-cta){display:none}
  .clean-actions{margin-left:auto;padding-right:0}
  .clean-rail{flex-direction:row;overflow:auto}
  .clean-tool{min-width:72px}
  .clean-panel{border-right:0}
  .clean-work{min-height:720px}
}

.clean-score.ok strong{color:#16a34a}
.clean-score.warn strong{color:#f59e0b}
.clean-score.bad strong{color:#ef4444}
.clean-check.ok b{background:#22c55e}
.clean-check.warn b{background:#f59e0b}
.clean-check.bad b{background:#ef4444}
.clean-check.warn{border-color:#fde68a;background:#fffbeb}
.clean-check.bad{border-color:#fecaca;background:#fff5f5}

.file-mode-overlay{position:absolute;inset:24px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border:1px solid #e5e7eb;border-radius:24px;z-index:20;text-align:center;padding:30px}
.file-mode-overlay div{max-width:520px;background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:28px;box-shadow:0 18px 45px rgba(15,23,42,.14)}
.file-mode-overlay strong{display:block;font-size:22px;font-weight:950;margin-bottom:10px}
.file-mode-overlay p{color:#667085;line-height:1.6}
.order-file-list{display:grid;gap:10px;margin-top:14px}
.order-file-item{border:1px solid #e5e7eb;border-radius:16px;padding:12px;background:#fff;display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.order-file-item strong{font-size:13px}.order-file-item small{color:#667085;font-weight:800}
.order-file-item button{grid-row:1 / span 2;grid-column:2;border:0;background:#fee2e2;color:#dc2626;border-radius:10px;padding:8px 10px;font-weight:900;cursor:pointer}