:root {
      --bg: #0b1020;
      --panel: #121933;
      --line: rgba(255,255,255,.10);
      --text: #eef2ff;
      --muted: #9aa6c7;
      --accent: #60a5fa;
      --accent-2: #22c55e;
      --warning: #f59e0b;
      --shadow: 0 18px 50px rgba(0,0,0,.35);
      --radius: 18px;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: Inter, Arial, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(96,165,250,.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(34,197,94,.10), transparent 26%),
        var(--bg);
      color: var(--text);
    }

    .app {
      --sidebar-width: 520px;
      --inspector-width: 420px;
      display: grid;
      grid-template-columns: minmax(360px, var(--sidebar-width)) 12px minmax(0, 1fr) 12px minmax(320px, var(--inspector-width));
      min-height: 100vh;
    }

    .sidebar {
      padding: 18px;
      border-right: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(18,25,51,.96), rgba(10,15,33,.96));
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 0;
    }

    .preview-wrap {
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 0;
      min-height: 100vh;
    }

    .inspector-wrap {
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 0;
      min-height: 100vh;
      position: sticky;
      top: 0;
      align-self: start;
      height: 100vh;
      overflow: visible;
    }

    .splitter {
      position: relative;
      cursor: col-resize;
      user-select: none;
      touch-action: none;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border-left: 1px solid rgba(255,255,255,.06);
      border-right: 1px solid rgba(255,255,255,.06);
    }

    .splitter::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4px;
      height: 72px;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: rgba(255,255,255,.18);
      box-shadow: 0 0 0 6px rgba(255,255,255,.03);
    }

    .splitter-right {
      position: relative;
      cursor: col-resize;
      user-select: none;
      touch-action: none;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border-left: 1px solid rgba(255,255,255,.06);
      border-right: 1px solid rgba(255,255,255,.06);
    }

    .splitter-right::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4px;
      height: 72px;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: rgba(255,255,255,.18);
      box-shadow: 0 0 0 6px rgba(255,255,255,.03);
    }

    .app.dragging,
    .app.dragging * {
      cursor: col-resize !important;
      user-select: none !important;
    }

    .card {
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      min-width: 0;
    }

    .topbar {
      padding: 16px 18px;
      display: block;
    }

    .title {
      margin: 0;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .subtitle {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
      max-width: none;
      width: 100%;
    }

    .badge { display:none !important; 
      white-space: nowrap;
      font-size: 12px;
      padding: 8px 10px;
      border-radius: 999px;
      color: #dbeafe;
      background: rgba(96,165,250,.14);
      border: 1px solid rgba(96,165,250,.25);
      align-self: flex-start;
    }

    .topbar-side {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin-top: 14px;
      position: relative;
      overflow: visible;
    }

    .topbar-side .mode-switch {
      align-self: flex-start;
    }



    .btn.editor-attention {
      background: #ff3b30 !important;
      color: #fff !important;
      border-color: rgba(255,59,48,.75) !important;
      box-shadow: 0 0 0 2px rgba(255,59,48,.28), 0 12px 28px rgba(255,59,48,.24) !important;
      animation: editorAttentionPulse 1.4s ease-in-out infinite;
    }

    .btn.editor-attention:hover {
      transform: translateY(-1px);
      box-shadow: 0 0 0 3px rgba(255,59,48,.30), 0 16px 36px rgba(255,59,48,.30) !important;
    }


    .editor-btn-wrapper {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .editor-open-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .editor-badge {
      position: absolute;
      top: -10px;
      right: -18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 22px;
      padding: 3px 8px;
      border-radius: 999px;
      background: #ffcc00;
      color: #111;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .01em;
      white-space: nowrap;
      box-shadow: 0 8px 20px rgba(0,0,0,.18);
      pointer-events: none;
      opacity: 0;
      transform: translateY(-2px) scale(.86);
      transition: opacity .22s ease, transform .22s ease;
      z-index: 3;
    }

    .editor-badge.show {
      opacity: 1;
      transform: translateY(0) scale(1);
      animation: editorBadgeBounce 1.15s ease-in-out infinite;
    }

    .constructor-download-zip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 1;
      background: rgba(255,255,255,.07) !important;
      border-color: rgba(255,255,255,.12) !important;
      color: #eef3ff !important;
      box-shadow: none !important;
      height: 42px;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 12px;
      white-space: nowrap;
      vertical-align: middle;
    }

    .constructor-download-zip:not([hidden]) {
      display: inline-flex;
    }

    .editor-hint {
      position: fixed;
      left: 16px;
      top: 16px;
      width: min(270px, calc(100vw - 32px));
      background: rgba(17,24,39,.98);
      color: #fff;
      padding: 10px 34px 10px 12px;
      border-radius: 12px;
      font-size: 12px;
      line-height: 1.4;
      z-index: 2147483647;
      box-shadow: 0 18px 44px rgba(0,0,0,.36);
      pointer-events: auto;
    }

    .editor-hint::before {
      content: '';
      position: absolute;
      top: var(--hint-arrow-top, 18px);
      width: 14px;
      height: 14px;
      background: inherit;
      transform: rotate(45deg);
      border-radius: 2px;
    }

    .editor-hint[data-side="right"]::before { left: -7px; }
    .editor-hint[data-side="left"]::before { right: -7px; }

    .editor-hint-close {
      position: absolute;
      top: 5px;
      right: 6px;
      width: 22px;
      height: 22px;
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      color: #fff;
      cursor: pointer;
      font-size: 16px;
      line-height: 20px;
    }

    @media (max-width: 1100px) {
      .editor-hint {
        position: fixed;
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 18px;
        width: auto;
        max-width: none;
      }
      .editor-hint::before { display:none; }
    }

    @keyframes editorAttentionPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(255,59,48,.40), 0 12px 28px rgba(255,59,48,.20);
      }
      70% {
        box-shadow: 0 0 0 10px rgba(255,59,48,0), 0 12px 28px rgba(255,59,48,.32);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(255,59,48,0), 0 12px 28px rgba(255,59,48,.20);
      }
    }

    .field, .editor-box, .hint-box, .preview-card { padding: 14px; }

    .field label,
    .editor-head strong,
    .preview-head strong,
    .hint-box strong,
    .mode-line strong {
      display: block;
      font-size: 13px;
      margin-bottom: 8px;
      color: #dbe4ff;
      letter-spacing: .01em;
    }

    .project-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
    }

    input[type="text"], select {
      width: 100%;
      height: 44px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #0a1024;
      color: var(--text);
      padding: 0 14px;
      font-size: 14px;
      outline: none;
    }

    input[type="text"]:focus,
    textarea:focus,
    select:focus {
      border-color: rgba(96,165,250,.55);
      box-shadow: 0 0 0 3px rgba(96,165,250,.15);
    }

    .muted-note {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      margin-top: 8px;
    }

    .mode-switch, .tab-switch {
      display: inline-flex;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 4px;
      gap: 4px;
      flex-wrap: wrap;
    }

    .mode-switch.no-wrap, .tab-switch.no-wrap {
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    .mode-switch button, .tab-switch button {
      height: 36px;
      min-width: 74px;
      border-radius: 10px;
      border: 0;
      padding: 0 12px;
      background: transparent;
      color: var(--muted);
      font-weight: 700;
      cursor: pointer;
    }


    .constructor-tab-btn {
      position: relative;
      overflow: visible;
      padding-right: 16px !important;
    }

    .constructor-free-badge {
      position: absolute;
      top: -10px;
      right: -8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 17px;
      padding: 2px 6px;
      border-radius: 999px;
      background: linear-gradient(135deg, #ef4444, #f97316);
      color: #fff;
      font-size: 9px;
      line-height: 1;
      font-weight: 800;
      letter-spacing: .02em;
      box-shadow: 0 6px 14px rgba(239,68,68,.28);
      pointer-events: none;
    }

    .constructor-tab-btn.active .constructor-free-badge {
      box-shadow: 0 0 0 2px rgba(239,68,68,.18), 0 8px 18px rgba(239,68,68,.34);
    }

    .mode-switch button.active, .tab-switch button.active {
      background: rgba(96,165,250,.22);
      color: #eff6ff;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }

    .editor-head,
    .preview-head,
    .action-row,
    .status-row,
    .mode-line,
    .preview-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .preview-head {
      position: sticky;
      top: 0;
      z-index: 8;
      padding-bottom: 6px;
      background: transparent;
      backdrop-filter: blur(6px);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 12px;
    }
    .preview-head > strong { justify-self: start; }
    .preview-nav {
      display: inline-flex;
      gap: 10px;
      justify-self: center;
      align-items: center;
    }
    .preview-toolbar {
      justify-self: end;
      justify-content: flex-end;
    }

    textarea {
      width: 100%;
      min-height: 410px;
      resize: vertical;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #050914;
      color: #f8fbff;
      padding: 16px;
      font-size: 14px;
      line-height: 1.55;
      font-family: Consolas, Monaco, "Courier New", monospace;
      outline: none;
      tab-size: 2;
    }

    #cssInput, #jsInput { min-height: 260px; }
    .editor-pane, .workspace { display: none; }
    .editor-pane.active, .workspace.active { display: block; }

    .toolbar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .btn {
      border: 0;
      border-radius: 12px;
      height: 42px;
      padding: 0 14px;
      color: #f8fbff;
      background: rgba(255,255,255,.06);
      border: 1px solid var(--line);
      cursor: pointer;
      font-size: 14px;
      font-weight: 700;
      transition: .18s ease;
    }

    .btn:hover { transform: translateY(-1px); }
    .btn.primary { background: linear-gradient(180deg, #3b82f6, #2563eb); border-color: transparent; }
    .btn.success { background: linear-gradient(180deg, #22c55e, #16a34a); border-color: transparent; }
    .btn.warning { background: linear-gradient(180deg, #f59e0b, #d97706); border-color: transparent; }

    .switch {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--muted);
      user-select: none;
    }

    .switch input { accent-color: var(--accent); }

    .status {
      font-size: 12px;
      color: var(--muted);
      padding: 8px 10px;
      border: 1px dashed rgba(255,255,255,.12);
      border-radius: 10px;
      background: rgba(255,255,255,.025);
    }

    .preview-card {
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
      overflow: hidden;
    }

    .preview-inspector {
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: calc(100vh - 36px);
    }

    .preview-inspector-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .preview-inspector-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
      min-height: 0;
    }

    .preview-inspector-col {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }

    .style-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .style-grid .field-inline select {
      height: 44px;
      border-radius: 12px;
      background: #0a1024;
      color: var(--text);
      border: 1px solid var(--line);
      padding: 0 12px;
      font-size: 13px;
    }

    .style-actions {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .action-groups {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .action-group {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 10px;
      background: rgba(255,255,255,.03);
    }

    .action-group[hidden] { display: none !important; }

    .action-group-title {
      font-size: 12px;
      font-weight: 700;
      color: #dbe4ff;
      margin-bottom: 8px;
    }

    .mini-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .mini-actions .btn.small {
      height: 34px;
      padding: 0 10px;
      font-size: 12px;
      border-radius: 10px;
    }


    .canvas-shell {
      margin-top: 14px;
      flex: 1;
      min-height: 540px;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 14px;
      overflow: auto;
      overscroll-behavior: auto;
      display: flex;
    }

    .viewport {
      margin: 0 auto;
      width: 100%;
      min-height: 100%;
      height: 100%;
      background: transparent;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 18px 40px rgba(0,0,0,.18);
      transition: width .22s ease;
      border: 1px solid rgba(0,0,0,.08);
      display: flex;
      flex-direction: column;
      align-self: stretch;
    }

    .viewport.desktop { width: 100%; }
    .viewport.tablet { width: 820px; max-width: 100%; }
    .viewport.mobile { width: 360px; max-width: 100%; }

    iframe {
      width: 100%;
      min-height: 78vh;
      height: 100%;
      border: 0;
      background: white;
      display: block;
      flex: 1 1 auto;
    }

    .hint-box {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .hint-box p { margin: 0; }
    .service-meta {
      margin-top: 10px;
      color: var(--muted);
      line-height: 1.6;
    }
    .service-links {
      margin-top: 12px;
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
    }
    .service-links a {
      color: #8ea0c8;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .service-links a:hover {
      color: #dbe4ff;
    }
    .service-links a:visited {
      color: #8ea0c8;
    }
    .app.preview-only {
      grid-template-columns: 0 0 1fr 0;
    }
    .app.preview-only .sidebar,
    .app.preview-only .splitter,
    .app.preview-only .inspector-wrap,
    .app.preview-only #splitterRight {
      display: none !important;
    }
    .app.preview-only .preview-wrap {
      grid-column: 1 / -1;
      min-width: 0;
    }

    .inspector-card { display:flex; flex-direction:column; gap:12px; padding:14px; }
    .inspector-grid { display:grid; gap:10px; }
    .inspector-empty { color: var(--muted); font-size:13px; line-height:1.55; }
    .inspector-meta { display:flex; flex-wrap:wrap; gap:8px; }
    .meta-pill { display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:#dbe4ff; font-size:12px; }
    .breadcrumb { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:32px; }
    .breadcrumb-item {
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:0 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:#dbe4ff;
      font-size:12px;
      cursor:pointer;
    }
    .breadcrumb-item:hover { background: rgba(96,165,250,.14); }
    .breadcrumb-sep { color: var(--muted); font-size:12px; }
    .field-inline label { display:block; font-size:12px; color:#cbd5e1; margin-bottom:6px; }
    .color-inline {
      display: grid;
      gap: 8px;
      align-items: center;
    }
    .color-inline-compact {
      grid-template-columns: 44px 52px;
      justify-content: start;
    }
    .color-inline input[type="color"] {
      width: 44px;
      height: 44px;
      padding: 4px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #0a1024;
      cursor: pointer;
    }
    .btn-ok {
      padding: 0 10px;
      min-width: 0;
      width: 52px;
      font-size: 12px;
      border-radius: 10px;
    }
    .field-inline input, .field-inline textarea, .field-inline select { width:100%; }
    .field-inline textarea { min-height:88px; resize:vertical; }
    .custom-html-apply-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
    .custom-html-apply-row[hidden] { display:none !important; }
    .field-inline.is-custom-html-field textarea { min-height:220px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; line-height:1.5; tab-size:2; white-space:pre; }
    .inspector-actions { display:flex; flex-wrap:wrap; gap:10px; }
    .btn.small { height:38px; padding:0 12px; font-size:13px; }
    .btn.danger { background: linear-gradient(180deg, #ef4444, #dc2626); border-color: transparent; }
    .field-inline input:disabled,
    .field-inline textarea:disabled {
      opacity: .65;
      cursor: not-allowed;
    }

    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 30;
      padding: 12px 14px;
      background: #0f172a;
      color: #f8fafc;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: .22s ease;
      font-size: 14px;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }


    .topbar-right {
      display:flex;
      align-items:flex-start;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .mini-switch {
      display:inline-flex;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px;
      gap: 4px;
    }

    .mini-switch button {
      height: 34px;
      border-radius: 999px;
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 0 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .mini-switch button.active {
      background: rgba(96,165,250,.16);
      color: #eff6ff;
    }

    .editor-view { display:none; }
    .editor-view.active { display:block; }
    .notes-textarea {
      width:100%;
      min-height:420px;
      resize:vertical;
      border-radius:14px;
      border:1px solid var(--line);
      background:#050914;
      color:#f8fbff;
      padding:16px;
      font-size:14px;
      line-height:1.6;
      font-family: Consolas, Monaco, "Courier New", monospace;
      outline:none;
    }

    .notes-tabs {
      display:grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:8px;
      width:100%;
      margin-bottom:12px;
      white-space:normal !important;
    }

    .notes-tabs button {
      width:100%;
      min-width:0;
      padding-inline:10px;
    }

    .note-title-card {
      margin-bottom:12px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
    }

    .note-title-card strong {
      display:block;
      margin-bottom:4px;
      font-size:14px;
      color:#eef2ff;
    }

    .note-title-card .muted-note {
      margin-top:0;
    }

    .btn.pending-save {
      background: linear-gradient(180deg, #ef4444, #dc2626);
      border-color: transparent;
      color:#fff;
    }

    .btn.danger-active {
      background: linear-gradient(180deg, #ef4444, #dc2626);
      border-color: transparent;
      color:#fff;
    }

    .field-grid-compact {
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
    }

    .seo-grid {
      display:grid;
      gap:12px;
    }

    .hint-actions {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }

    .pro-only { display: initial; }
    .beginner-mode .pro-only { display:none !important; }
    .beginner-mode .hide-in-beginner { display:none !important; }
    .mode-switch button[disabled] {
      opacity: .45;
      cursor: not-allowed;
      pointer-events: none;
    }
    .constructor-options {
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:12px;
    }
    .constructor-options .switch {
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius:12px;
      background:rgba(255,255,255,.03);
    }

    .hosting-list {
      margin:0;
      padding-left:18px;
      color:#cbd5e1;
      line-height:1.7;
    }

    .hosting-list code {
      color:#eff6ff;
      background:rgba(255,255,255,.06);
      padding:2px 6px;
      border-radius:8px;
    }


    .constructor-view { display:none; margin-top:14px; }
    .constructor-mode .constructor-view { display:block; }
    .constructor-mode .editor-main-only,
    .constructor-mode #seoSection,
    .constructor-mode .inspector-wrap {
      display:none !important;
    }
    .constructor-mode .app {
      grid-template-columns: minmax(360px, var(--sidebar-width)) 12px minmax(0, 1fr);
    }
    .constructor-toolbar {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }
    .constructor-grid {
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      margin-top:14px;
    }
    .constructor-card {
      border:1px solid var(--line);
      border-radius:16px;
      background:rgba(255,255,255,.03);
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .constructor-card strong {
      font-size:14px;
      color:#eef2ff;
    }
    .constructor-card p {
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.5;
    }
    .constructor-card .btn {
      width:100%;
    }

    .constructor-variants {
      display:flex;
      gap:8px;
      margin-top:auto;
      margin-bottom:10px;
    }
    .constructor-variant-btn {
      flex:1 1 0;
      min-height:38px;
      border-radius:12px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-weight:700;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }
    .constructor-variant-btn.active {
      background:rgba(96,165,250,.16);
      color:#eff6ff;
      border-color:rgba(96,165,250,.42);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .constructor-variant-preview {
      width:20px;
      height:12px;
      border-radius:6px;
      border:1px solid rgba(255,255,255,.16);
      background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
      position:relative;
      overflow:hidden;
      flex:0 0 20px;
    }
    .constructor-variant-preview.v1::before {
      content:'';
      position:absolute;
      left:2px; top:2px;
      width:9px; height:8px; border-radius:4px;
      background:rgba(96,165,250,.6);
    }
    .constructor-variant-preview.v1::after {
      content:'';
      position:absolute;
      right:2px; top:2px;
      width:5px; height:8px; border-radius:4px;
      background:rgba(255,255,255,.45);
    }
    .constructor-variant-preview.v2::before {
      content:'';
      position:absolute;
      left:2px; top:2px; right:2px; height:3px; border-radius:3px;
      background:rgba(255,255,255,.42);
    }
    .constructor-variant-preview.v2::after {
      content:'';
      position:absolute;
      left:2px; right:2px; bottom:2px; height:5px; border-radius:4px;
      background:rgba(96,165,250,.58);
    }
    .constructor-preview-note {
      margin-top:12px;
      color:var(--muted);
      font-size:12px;
      line-height:1.5;
    }

    .constructor-presets,
    .constructor-themes {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:12px;
    }
    .constructor-presets {
      margin-top:14px;
    }
    .preset-btn {
      min-height:40px;
      padding:0 14px;
      border-radius:12px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-weight:700;
      cursor:pointer;
      transition:.18s ease;
    }
    .preset-btn.active,
    .preset-btn:hover {
      background:rgba(96,165,250,.16);
      color:#eff6ff;
      border-color:rgba(96,165,250,.42);
    }
    .theme-swatch {
      width:38px;
      height:38px;
      border-radius:11px;
      border:1px solid rgba(255,255,255,.16);
      cursor:pointer;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
      transition:.18s ease;
      position:relative;
      overflow:hidden;
      flex:0 0 38px;
    }
    .theme-swatch.active,
    .theme-swatch:hover {
      transform:translateY(-1px);
    }
    .theme-swatch.active {
      border-color:#facc15;
      box-shadow:0 0 0 3px rgba(250,204,21,.95), 0 0 0 6px rgba(250,204,21,.22), inset 0 0 0 1px rgba(255,255,255,.22);
    }
    .theme-swatch[data-theme="white"]{background:linear-gradient(135deg,#ffffff,#e5e7eb);}
    .theme-swatch[data-theme="blue"]{background:linear-gradient(135deg,#2563eb,#dbeafe);}
    .theme-swatch[data-theme="beige"]{background:linear-gradient(135deg,#a16207,#fef3c7);}
    .theme-swatch[data-theme="graphite"]{background:linear-gradient(135deg,#111827,#475569);}
    .theme-swatch[data-theme="green"]{background:linear-gradient(135deg,#15803d,#dcfce7);}
    .theme-swatch[data-theme="wine"]{background:linear-gradient(135deg,#9f1239,#fecdd3);} 
    .constructor-custom-box{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:10px;}
    .constructor-custom-box textarea{min-height:120px;resize:vertical;}
    .constructor-custom-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
    .constructor-custom-note{margin-top:0;}

    @media (max-width: 1100px) {
      .app { grid-template-columns: 1fr; }
      .splitter, .splitter-right { display: none; }
      .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
      .inspector-wrap { padding: 12px; min-height: auto; position: static; height: auto; overflow: visible; }
      .preview-wrap { display:flex; flex-direction:column; min-height:auto; }
      .h-splitter { display:none; }
      .preview-card { min-height: auto; height:auto; }
      .preview-head { grid-template-columns: 1fr; }
      .preview-head > strong, .preview-nav, .preview-toolbar { justify-self: stretch; }
      .preview-nav { justify-content: flex-start; }
      iframe { min-height: 62vh; }
    }

    @media (max-width: 640px) {
      .sidebar, .preview-wrap { padding: 12px; }
      .topbar { padding: 14px; }
      .topbar-side { justify-content: flex-start; }
      .title { font-size: 20px; }
      textarea { min-height: 300px; }
      .preview-card { padding: 12px; }
      .canvas-shell { padding: 10px; min-height: 420px; }
      .constructor-grid { grid-template-columns:1fr; }
    }
	#runBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
  .trust-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.trust-badge{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#cbd5e1;
  font-size:13px;
  font-weight:600;
}
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 900px;
  background: #0f172a;
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 9999;
  font-size: 14px;
}

.cookie-text {
  opacity: 0.9;
}

.cookie-btn {
  background: #4f46e5;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}

.cookie-btn:hover {
  background: #4338ca;
}

/* скрытие */
.cookie-hidden {
  display: none;
}
.constructor-download-zip[hidden] { display: none !important; }

.field-attention-flash {
  outline: 2px solid #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .18) !important;
  transition: box-shadow .2s ease, outline .2s ease;
}


/* Right inspector tabs + compact meta */
.inspector-tabs {
  margin-bottom: -4px;
  padding: 4px;
  gap: 4px;
}
.inspector-tabs button {
  flex: 1 1 0;
  min-height: 34px;
  padding: 8px 10px;
  font-size: 13px;
}
.inspector-card.is-hidden {
  display: none !important;
}
.inspector-meta {
  gap: 5px !important;
  margin-bottom: 8px !important;
}
.meta-pill,
.breadcrumb button,
.breadcrumb span {
  font-size: 10px !important;
  line-height: 1.1 !important;
}
.meta-pill {
  padding: 5px 7px !important;
  border-radius: 999px !important;
  max-width: 100%;
      min-height: 20px !important;
}
.breadcrumb {
  gap: 4px !important;
  line-height: 1.1 !important;
}
.breadcrumb button {
  padding: 5px 7px !important;
  border-radius: 999px !important;
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 20px !important;
}
.breadcrumb span {
  opacity: .55;
}
.preview-inspector-head strong {
  font-size: 16px;
}
.beginner-mode .inspector-tabs [data-inspector-tab="style"] {
  display: none !important;
}
.beginner-mode [data-inspector-panel="text"] {
  display: block !important;
}


.constructor-coach {
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
}
.constructor-coach-title {
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 6px;
  color: #eef2ff;
}
.constructor-coach-text {
  font-size: 12px;
  line-height: 1.45;
  color: #aeb8ce;
}
.small-switch {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 12px;
}
.mobile-visibility-control {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 12px;
  align-items: center;
  border: 1px dashed rgba(148,163,184,.28);
  border-radius: 14px;
  padding: 11px 12px;
  margin-top: 2px;
}
.mobile-visibility-control > label { margin: 0; }
.mobile-visibility-control .muted-note { margin: 0; font-size: 12px; line-height: 1.45; }
.mobile-visibility-control .small-switch { width: 100%; justify-content: flex-start; display: flex !important}
.field-attention-flash {
  animation: fieldAttentionFlash .9s ease 0s 2;
}
@keyframes fieldAttentionFlash {
  0%,100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px rgba(248,113,113,.35); }
}

@media (max-width: 1500px) {
  .mobile-visibility-control { grid-template-columns: 1fr; }
}

/* === Premium UI polish: 2026-04 cosmetic build === */
.trust-badges{display:none!important;}
.project-file-panel{padding:12px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.075);}
.project-file-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:center;margin-top:7px;}
.project-file-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.project-file-actions .btn{min-height:36px;border-radius:12px;font-weight:800;letter-spacing:.01em;box-shadow:0 10px 22px rgba(0,0,0,.14);}
.project-file-actions .btn.success{background:linear-gradient(135deg,#48c774,#6ee28d);border-color:rgba(255,255,255,.14);color:#07140b;}
.project-file-actions .btn.warning{background:linear-gradient(135deg,#f59e0b,#f7bd4f);border-color:rgba(255,255,255,.14);color:#1a1000;}
.preview-nav{display:flex;align-items:center;gap:8px;padding:4px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.preview-arrow-btn{width:38px;height:34px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));color:#f8fbff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.16);transition:transform .18s ease,background .18s ease,border-color .18s ease,opacity .18s ease;}
.preview-arrow-btn span{font-size:28px;line-height:1;margin-top:-2px;font-weight:500;}
.preview-arrow-btn:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(147,197,253,.34);background:linear-gradient(180deg,rgba(96,165,250,.2),rgba(255,255,255,.05));}
.preview-arrow-btn:disabled{opacity:.28;cursor:default;box-shadow:none;filter:saturate(.65);}
.preview-focus-btn{min-height:34px;border-radius:12px;padding-inline:14px;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.08)!important;}
.mobile-visibility-control{grid-column:1/-1;padding:12px;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));}
.premium-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;color:#e5edff;font-size:13px;font-weight:750;user-select:none;}
.premium-toggle input{position:absolute;opacity:0;pointer-events:none;}
.premium-toggle-ui{width:42px;height:24px;border-radius:999px;position:relative;flex:0 0 42px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 2px 8px rgba(0,0,0,.22);transition:background .2s ease,border-color .2s ease;}
.premium-toggle-ui::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,#fff,#dbeafe);box-shadow:0 4px 10px rgba(0,0,0,.25);transition:transform .2s ease;}
.premium-toggle input:checked + .premium-toggle-ui{background:linear-gradient(135deg,#4361ee,#60a5fa);border-color:rgba(147,197,253,.45);}
.premium-toggle input:checked + .premium-toggle-ui::after{transform:translateX(18px);}
.constructor-grid{gap:10px!important;}
.constructor-card{position:relative;overflow:hidden;min-height:150px;padding:13px!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022))!important;border:1px solid rgba(255,255,255,.075)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;}
.constructor-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 12% 0%,rgba(96,165,250,.13),transparent 34%);opacity:.8;pointer-events:none;}
.constructor-card:hover{transform:translateY(-2px);border-color:rgba(147,197,253,.22)!important;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028))!important;box-shadow:0 14px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05);}
.constructor-card strong{order:2;position:relative;display:block;margin-top:2px;padding:9px 10px;border-radius:12px;background:linear-gradient(135deg,rgba(67,97,238,.28),rgba(96,165,250,.13));border:1px solid rgba(147,197,253,.14);font-size:13px!important;line-height:1.15;color:#f8fbff!important;text-align:left;}
.constructor-card p{order:3;position:relative;font-size:11.5px!important;line-height:1.42!important;color:rgba(205,216,237,.78)!important;}
.constructor-card .btn[data-constructor-block]{display:none!important;}
.constructor-variants{order:1;position:relative;margin:0 0 2px!important;display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important;}
.constructor-variant-btn{min-height:28px!important;border-radius:999px!important;font-size:11px!important;font-weight:850!important;letter-spacing:.01em;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important;color:rgba(226,232,240,.72)!important;}
.constructor-variant-btn:hover{border-color:rgba(147,197,253,.22)!important;color:#fff!important;background:rgba(255,255,255,.07)!important;}
.constructor-variant-btn.active{background:linear-gradient(135deg,#3147b8,#4f73f6)!important;color:#fff!important;border-color:rgba(147,197,253,.34)!important;box-shadow:0 8px 16px rgba(49,71,184,.22)!important;}
.constructor-variant-preview{display:none!important;}
.constructor-custom-box,.constructor-preview-note{border-radius:18px;}
@media (max-width:900px){.project-file-actions{grid-template-columns:1fr}.preview-nav{gap:6px}.preview-arrow-btn{width:34px}}


/* === v4 focused polish === */
.project-file-actions{grid-template-columns:1fr 1fr!important;gap:7px!important;}
.project-file-actions .btn{min-height:32px!important;padding:7px 10px!important;border-radius:11px!important;font-size:12px!important;font-weight:600!important;letter-spacing:0!important;box-shadow:none!important;white-space:nowrap!important;}
.project-file-actions .btn.success{background:linear-gradient(135deg,#7bdc8a,#a4ecad)!important;color:#081309!important;}
.project-file-actions .btn.warning{background:linear-gradient(135deg,#f2c24f,#f7d776)!important;color:#1b1302!important;}
.mobile-visibility-control{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;min-height:50px!important;padding:12px 14px!important;}
.mobile-visibility-control .muted-note{display:none!important;}
.mobile-visibility-control .premium-toggle{width:auto!important;justify-content:flex-start!important;gap:10px!important;font-size:12.5px!important;font-weight:600!important;color:rgba(226,232,240,.92)!important;}
.mobile-visibility-control .premium-toggle-label{display:inline-block!important;white-space:nowrap!important;}
.premium-toggle-ui{width:40px!important;height:22px!important;flex-basis:40px!important;}
.premium-toggle-ui::after{width:16px!important;height:16px!important;}
.premium-toggle input:checked + .premium-toggle-ui::after{transform:translateX(18px)!important;}
.constructor-card{min-height:142px!important;padding:12px!important;}
.constructor-card strong{text-align:center!important;font-weight:600!important;font-size:12.5px!important;letter-spacing:0!important;padding:9px 8px!important;background:linear-gradient(180deg,rgba(96,165,250,.18),rgba(96,165,250,.09))!important;}
.constructor-card p{text-align:left!important;font-weight:400!important;}
.constructor-variants{isolation:isolate;padding:3px!important;border-radius:999px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.07)!important;gap:0!important;}
.constructor-variants::before{content:'';position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:linear-gradient(135deg,#405bea,#6a8cff);box-shadow:0 8px 18px rgba(49,71,184,.24);transition:transform .2s ease;z-index:0;}
.constructor-variants:has(.constructor-variant-btn:nth-child(2).active)::before{transform:translateX(100%);}
.constructor-variant-btn{position:relative;z-index:1;min-height:24px!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:10.5px!important;font-weight:600!important;color:rgba(226,232,240,.66)!important;}
.constructor-variant-btn.active{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;}
.constructor-variant-btn:hover{background:transparent!important;border:0!important;color:#fff!important;}
@supports not selector(:has(*)){.constructor-variant-btn.active{background:linear-gradient(135deg,#405bea,#6a8cff)!important;border-radius:999px!important;}}


/* === v6 micro-polish: calmer constructor toggles, font select, compact actions === */
.constructor-variants{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.08))!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.035)!important;}
.constructor-variants::before{background:linear-gradient(180deg,#536cf6,#334bc9)!important;box-shadow:0 5px 12px rgba(49,71,184,.22),inset 0 1px 0 rgba(255,255,255,.22)!important;}
.constructor-variant-btn{font-weight:550!important;font-size:10px!important;color:rgba(226,232,240,.58)!important;}
.constructor-variant-btn.active{font-weight:600!important;color:#fff!important;}
.constructor-card strong{font-weight:550!important;}
#styleFontFamilyInput{min-width:0;width:100%;}
.project-file-actions .btn{font-weight:550!important;}


/* === v7 real fixes: stable color preview, gallery frames, flat constructor switch === */
.constructor-variants{
  background:#141a2c!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.32)!important;
  padding:3px!important;
}
.constructor-variants::before{
  background:linear-gradient(135deg,#4862f0,#5f7cff)!important;
  box-shadow:none!important;
}
.constructor-variant-btn{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  font-weight:500!important;
  color:rgba(226,232,240,.54)!important;
}
.constructor-variant-btn.active{
  color:#fff!important;
  font-weight:560!important;
}
.constructor-card strong{font-weight:520!important;}

/* Галерея: внешний белый контейнер + внутренняя рамка изображения, как в hero */
.preview-frame .gallery-item,
.gallery-item{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  padding:14px!important;
  border-radius:22px!important;
  background:#fff;
  border:1px solid rgba(203,213,225,.95)!important;
  box-shadow:0 10px 26px rgba(15,23,42,.055)!important;
  overflow:hidden!important;
}
.gallery-item > img{
  display:block!important;
  width:100%!important;
  min-height:220px;
  object-fit:cover!important;
  border-radius:18px!important;
  outline:1.5px dashed rgba(96,165,250,.62)!important;
  outline-offset:-10px!important;
  background:#eaf2ff!important;
}
.gallery-item-wide > img{min-height:180px;}



/* Одноколоночный остаток после удаления соседней карточки */
.hero-grid:has(> :only-child),
.grid-2:has(> :only-child),
.portfolio-grid:has(> :only-child),
.portfolio-grid-wide:has(> :only-child){
  display:block!important;
}
.hero-grid:has(> :only-child) > *,
.grid-2:has(> :only-child) > *,
.portfolio-grid:has(> :only-child) > *,
.portfolio-grid-wide:has(> :only-child) > *{
  width:100%!important;
  max-width:none!important;
}

/* Шапка v2 в графитовой теме — читаемая и без серой плашки */
.brandbar-v2 .brandbar-v2-inner{
  background:rgba(15,23,42,.82)!important;
  border-color:rgba(148,163,184,.22)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.22)!important;
}
.brandbar-v2 .brandbar-copy strong{color:#f8fafc!important;font-weight:600!important;}
.brandbar-v2 .brandbar-copy p{color:rgba(226,232,240,.82)!important;}
.brandbar-v2 .eyebrow{background:rgba(59,130,246,.18)!important;color:#bfdbfe!important;}
.brandbar-v2 .btn-main{background:linear-gradient(135deg,#38bdf8,#60a5fa)!important;color:#fff!important;}


/* === v8 fixes: gallery cards like hero, stable graphite brandbar v2 === */
body[data-site-palette="graphite"] .brandbar-v2 .brandbar-v2-inner,
body[data-site-palette="graphite"] .brandbar-v2 .brandbar-inner{
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(17,24,39,.90))!important;
  border-color:rgba(148,163,184,.22)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.24)!important;
}
body[data-site-palette="graphite"] .brandbar-v2 .brandbar-copy strong,
body[data-site-palette="graphite"] .brandbar-v2 .brandbar-copy p{color:#f8fafc!important;}
body[data-site-palette="graphite"] .brandbar-v2 .brandbar-copy p{color:rgba(226,232,240,.82)!important;}
body[data-site-palette="graphite"] .brandbar-v2 .eyebrow{background:rgba(96,165,250,.18)!important;color:#bfdbfe!important;}
body[data-site-palette="graphite"] .brandbar-v2 .btn-main{background:linear-gradient(135deg,#38bdf8,#60a5fa)!important;color:#fff!important;}
.portfolio-grid .gallery-item,
.portfolio-grid-wide .gallery-item,
.gallery-item{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  padding:14px!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:#fff;
  border:1px solid rgba(203,213,225,.95)!important;
  box-shadow:0 12px 30px rgba(15,23,42,.06)!important;
}
.gallery-item::before{display:none!important;}
.gallery-item img,
.gallery-item.gallery-item-wide img{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:3/4!important;
  object-fit:cover!important;
  border-radius:18px!important;
  outline:1.5px dashed rgba(96,165,250,.62)!important;
  outline-offset:-10px!important;
  border:0!important;
  background:#eaf2ff!important;
  box-shadow:none!important;
}
.gallery-item.gallery-item-wide img{aspect-ratio:16/10!important;}
.gallery-caption,
.gallery-item.gallery-item-wide .gallery-caption{
  position:relative!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  display:block!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  background:rgba(248,250,252,.96)!important;
  border:1px solid rgba(226,232,240,.96)!important;
  color:var(--site-text)!important;
  box-shadow:none!important;
}




/* === v13: gallery frame parity in Pro/Beginner with Constructor === */
/* The gallery card now always has the same two-level structure as hero images:
   outer white card -> inner pale image frame -> image -> caption. */
.preview-frame .portfolio-grid .gallery-item,
.preview-frame .portfolio-grid-wide .gallery-item,
.portfolio-grid .gallery-item,
.portfolio-grid-wide .gallery-item,
a.gallery-item{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  padding:14px!important;
  border-radius:24px!important;
  background:#ffffff!important;
  border:1px solid rgba(203,213,225,.98)!important;
  box-shadow:0 12px 30px rgba(15,23,42,.06)!important;
  overflow:hidden!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.preview-frame .gallery-image-wrap,
.gallery-image-wrap{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:0!important;
  aspect-ratio:3/4!important;
  border-radius:18px!important;
  background:#eaf2ff!important;
  border:1px solid rgba(191,219,254,.92)!important;
  outline:1.5px dashed rgba(96,165,250,.62)!important;
  outline-offset:-10px!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
.preview-frame .gallery-item-wide .gallery-image-wrap,
.gallery-item-wide .gallery-image-wrap{
  aspect-ratio:16/10!important;
}
.preview-frame .gallery-image,
.gallery-image,
.preview-frame .gallery-image-wrap > img,
.gallery-image-wrap > img{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  outline-offset:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.preview-frame .gallery-caption,
.gallery-caption{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  display:block!important;
  width:100%!important;
  min-height:44px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  background:rgba(248,250,252,.98)!important;
  border:1px solid rgba(226,232,240,.98)!important;
  color:var(--site-text,#0f172a)!important;
  font-size:14px!important;
  line-height:1.45!important;
  box-shadow:none!important;
}
.gallery-item:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(96,165,250,.78)!important;
  box-shadow:0 16px 36px rgba(37,99,235,.12)!important;
}
.gallery-item:hover .gallery-image-wrap{
  outline-color:rgba(37,99,235,.82)!important;
  border-color:rgba(147,197,253,.96)!important;
}
body[data-site-palette="graphite"] .gallery-item{
  background:#ffffff!important;
  border-color:rgba(226,232,240,.96)!important;
}
body[data-site-palette="graphite"] .gallery-caption{
  background:rgba(248,250,252,.98)!important;
  color:#111827!important;
}

/* === build v15 fixed: pro-mode gallery image hover outline like constructor === */
.preview-frame .gallery-item .gallery-image-wrap,
.preview-frame .gallery-item .gallery-image-wrap > img,
body:not(.constructor-mode) .gallery-item .gallery-image-wrap,
body:not(.constructor-mode) .gallery-item .gallery-image-wrap > img{
  transition:outline-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease!important;
}
.preview-frame .gallery-item .gallery-image-wrap:hover,
body:not(.constructor-mode) .gallery-item .gallery-image-wrap:hover{
  outline:1.5px dashed rgba(37,99,235,.86)!important;
  outline-offset:-10px!important;
  border-color:rgba(147,197,253,.98)!important;
}
.preview-frame .gallery-item .gallery-image-wrap:hover > img,
body:not(.constructor-mode) .gallery-item .gallery-image-wrap:hover > img{
  outline:1.5px dashed rgba(37,99,235,.86)!important;
  outline-offset:-10px!important;
}

/* === build v16: visible inner dashed hover overlay for gallery images in Pro mode === */
.gallery-image-wrap::after{
  content:""!important;
  position:absolute!important;
  inset:10px!important;
  border:1.5px dashed transparent!important;
  border-radius:14px!important;
  pointer-events:none!important;
  z-index:5!important;
  transition:border-color .16s ease, box-shadow .16s ease!important;
}
body:not(.constructor-mode) .gallery-image-wrap:hover::after,
.preview-frame .gallery-image-wrap:hover::after{
  border-color:rgba(37,99,235,.88)!important;
  box-shadow:0 0 0 1px rgba(147,197,253,.18)!important;
}
body:not(.constructor-mode) .gallery-image-wrap:hover,
.preview-frame .gallery-image-wrap:hover{
  outline-color:transparent!important;
  border-color:rgba(147,197,253,.98)!important;
}
/* v16 safety: keep gallery image wrapper as overlay host */
.gallery-image-wrap{position:relative!important;overflow:hidden!important;}

/* === build v17: gallery image hover parity + constructor image click upload === */
.gallery-image-wrap{position:relative!important;overflow:hidden!important;}
.gallery-image-wrap::after{content:""!important;position:absolute!important;inset:10px!important;border:2px dashed transparent!important;border-radius:14px!important;pointer-events:none!important;z-index:20!important;transition:border-color .14s ease,box-shadow .14s ease!important;}
.gallery-image-wrap:hover::after,
.gallery-image-wrap[data-sandbox-hover="1"]::after,
.gallery-image-wrap:has(img[data-sandbox-hover="1"])::after{border-color:rgba(37,99,235,.92)!important;box-shadow:0 0 0 1px rgba(147,197,253,.22)!important;}

body.constructor-mode .gallery-image-wrap{cursor:pointer!important;}
body.constructor-mode .gallery-item{cursor:default!important;}

/* v18: gallery image hover + custom gallery background */
.gallery-image-wrap:hover img{outline:2px dashed rgba(37,99,235,.55)!important;outline-offset:-10px;}
body.sbx-constructor-preview .gallery-image-wrap:hover img{outline:2px dashed rgba(37,99,235,.55)!important;outline-offset:-10px;}
body[data-site-palette="graphite"] .gallery-item:not([style*="background"]){background:#fff;border-color:rgba(255,255,255,.82)!important;}
body[data-site-palette="graphite"] .gallery-item[style*="background"]{border-color:rgba(255,255,255,.82)!important;}

/* build v20 fixes */
#selectedTextInput{min-height:132px!important;}
.sbx-action-hint{z-index:2147483646!important;}
.gallery-item[style*="background"]{background-clip:padding-box!important;}
.gallery-item[style*="background"],.gallery-item[style*="background-color"]{ }
.feature-icon,.step-num,.number,.num,.counter{cursor:pointer;}

/* build v22 fixes */
#selectedTextInput{min-height:180px!important;}
.action-group.field-attention-flash{outline:2px solid #f59e0b!important;box-shadow:0 0 0 5px rgba(245,158,11,.22)!important;}

/* build v23: persistent style action highlight */
.action-group.field-attention-sticky{
  outline:2px solid #f59e0b!important;
  box-shadow:0 0 0 5px rgba(245,158,11,.24)!important;
  background:linear-gradient(180deg, rgba(245,158,11,.08), rgba(255,255,255,.03))!important;
}
.action-group.field-attention-sticky .action-group-title::after{
  content:""; display:inline-block; width:7px; height:7px; margin-left:7px; border-radius:50%; background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.16); vertical-align:middle;
}


/* build v24: cleaner image action popover and persistent editor UX */
.sbx-image-action-hint{
  min-width:152px!important;
  padding:10px 12px 12px!important;
  border-radius:14px!important;
}
.sbx-image-action-hint .sbx-action-hint-text{
  padding-right:24px!important;
  margin-bottom:8px!important;
}
.sbx-image-action-hint .sbx-action-hint-actions{
  display:flex!important;
  gap:8px!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
}
.sbx-image-action-hint .sbx-action-hint-close{
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  padding:0!important;
  border-radius:999px!important;
}
#selectedTextInput{min-height:210px!important;}

/* Final polish: selected element indicator */
.selection-type-indicator{
  display:flex;align-items:center;gap:8px;margin:10px 0 12px;padding:10px 12px;border:1px solid rgba(140,165,255,.22);border-radius:14px;background:rgba(255,255,255,.035);color:#dbe5ff;font-size:13px;font-weight:650;
}
.selection-type-dot{width:8px;height:8px;border-radius:999px;background:#6f8cff;box-shadow:0 0 0 4px rgba(111,140,255,.15);}
.selection-type-indicator[data-type*="текст"] .selection-type-dot{background:#63d471;box-shadow:0 0 0 4px rgba(99,212,113,.15);}
.selection-type-indicator[data-type*="картинка"] .selection-type-dot{background:#f3c75f;box-shadow:0 0 0 4px rgba(243,199,95,.16);}
.selection-type-indicator[data-type*="блок"] .selection-type-dot{background:#8aa4ff;box-shadow:0 0 0 4px rgba(138,164,255,.16);}
/* build v33: final polish actually connected */
.selection-type-indicator{display:flex;align-items:center;gap:8px;margin:8px 0 10px;padding:9px 11px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.045);font-size:12px;color:#d6deff;}
.selection-type-dot{width:8px;height:8px;border-radius:999px;background:#8aa4ff;box-shadow:0 0 0 4px rgba(138,164,255,.14);}
.selection-type-indicator[data-type*="текст"] .selection-type-dot{background:#63d471;box-shadow:0 0 0 4px rgba(99,212,113,.15);}
.selection-type-indicator[data-type*="картинка"] .selection-type-dot{background:#f3c75f;box-shadow:0 0 0 4px rgba(243,199,95,.16);}
.selection-type-indicator[data-type*="блок"] .selection-type-dot{background:#8aa4ff;box-shadow:0 0 0 4px rgba(138,164,255,.16);}
#selectedTextInput{min-height:180px;}
/* Build 34: stronger selection indicator and image hint highlight */
.selection-type-indicator{min-height:38px;justify-content:space-between;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border-color:rgba(138,164,255,.22);box-shadow:0 10px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05);}
.selection-type-indicator::after{content:attr(data-help);max-width:52%;color:rgba(214,222,255,.72);font-size:11px;line-height:1.25;text-align:right;}
.selection-type-indicator.selection-pulse{animation:selectionPulse34 .9s ease;}
@keyframes selectionPulse34{0%{box-shadow:0 0 0 0 rgba(138,164,255,.45),0 10px 30px rgba(0,0,0,.16)}100%{box-shadow:0 0 0 12px rgba(138,164,255,0),0 10px 30px rgba(0,0,0,.16)}}
.image-style-attention{animation:imageStylePulse34 1.2s ease-in-out infinite alternate;border-color:rgba(243,199,95,.65)!important;box-shadow:0 0 0 3px rgba(243,199,95,.12),0 12px 30px rgba(0,0,0,.18)!important;}
@keyframes imageStylePulse34{from{filter:brightness(1)}to{filter:brightness(1.08)}}


/* HTMLBOX v38: stable stacked notifications */
.toast { display: none !important; }
.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 36px));
}
.toast-item {
  padding: 12px 14px;
  background: rgba(15, 23, 42, .96);
  color: #f8fafc;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .28);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .24s ease, transform .24s ease;
  font-size: 14px;
  line-height: 1.35;
  pointer-events: auto;
  cursor: default;
}
.toast-item.show { opacity: 1; transform: translateY(0); }
.toast-item.hide { opacity: 0; transform: translateY(10px); }


/* === TaskWeb Builder v2 technical optimization === */
@media (pointer: coarse), (max-width: 820px), (prefers-reduced-motion: reduce) {
  html,
  body {
    min-height: 100%;
  }

  body {
    background:
      radial-gradient(circle at 18% 0%, rgba(96,165,250,.12), transparent 220px),
      #0b1020 !important;
  }

  .sidebar,
  .inspector-wrap,
  .card,
  .preview-card,
  .editor-box,
  .hint-box,
  .modal-card,
  .cookie-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .card,
  .preview-card,
  .editor-box,
  .hint-box,
  .modal-card {
    box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
  }

  .preview-arrow-btn,
  .btn,
  .mode-switch button,
  .tab-switch button,
  .constructor-card {
    transition: none !important;
  }

  .preview-arrow-btn:hover:not(:disabled),
  .btn:hover,
  .mode-switch button:hover,
  .tab-switch button:hover {
    transform: none !important;
  }

  .editor-attention,
  .open-editor-pulse,
  .field-attention-flash {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .app {
    min-height: auto !important;
  }

  .sidebar,
  .preview-wrap,
  .inspector-wrap {
    padding: 10px !important;
  }

  .title {
    font-size: 20px !important;
    line-height: 1.12 !important;
  }

  .subtitle {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .mode-switch,
  .tab-switch {
    width: 100%;
  }

  .mode-switch button,
  .tab-switch button {
    flex: 1 1 auto;
  }

  textarea {
    min-height: 260px !important;
  }

  iframe {
    min-height: 58vh !important;
  }

  .cookie-banner {
    bottom: 12px !important;
    width: calc(100% - 24px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .cookie-btn {
    width: 100% !important;
  }
}

/* Нижние/вспомогательные блоки можно рендерить лениво там, где браузер поддерживает. */
.inspector-wrap,
.preview-wrap {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}


/* v2.1: подсветка выбранного HTML-элемента в поле кода */
textarea.code-match-highlight::selection {
  background: rgba(250, 204, 21, 0.88);
  color: #111827;
}
textarea.code-match-highlight::-moz-selection {
  background: rgba(250, 204, 21, 0.88);
  color: #111827;
}


/* v2.2: более заметное выделение найденного элемента в полном HTML-коде */
textarea.code-match-highlight:focus {
  outline: 2px solid rgba(250, 204, 21, 0.8);
  outline-offset: 2px;
}
textarea.code-match-highlight::selection {
  background: #fde047;
  color: #111827;
}
textarea.code-match-highlight::-moz-selection {
  background: #fde047;
  color: #111827;
}


/* v2.3: подсветка кода не должна ломать редактирование в превью */
textarea.code-match-highlight {
  outline: 2px solid rgba(250, 204, 21, 0.72);
  outline-offset: 2px;
}


/* v2.4: видимая подсветка HTML-фрагмента без фокуса textarea */
.code-range-highlight-line {
  background: rgba(250, 204, 21, 0.58);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.34);
  mix-blend-mode: screen;
}

.editor-hint[data-side="none"]::before {
  display: none;
}


/* v2.5: подсказка конструктора под вкладкой «Профи» */
.editor-hint {
  background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(15,23,42,.98)) !important;
  border: 1px solid rgba(147,197,253,.38);
  color: #fff !important;
  font-weight: 750;
  box-shadow: 0 20px 52px rgba(37,99,235,.30), 0 18px 44px rgba(0,0,0,.34) !important;
}
.editor-hint[data-side="top"]::before {
  display: block !important;
  left: var(--hint-arrow-left, 28px);
  top: -7px;
  right: auto;
  background: rgba(37,99,235,.98);
}
.editor-hint[data-side="none"]::before { display: none !important; }

/* v2.5: жёлтая подсветка внутри полного HTML-кода без потери фокуса превью */
#codeRangeHighlightLayer,
#codeRangeHighlightLayer * {
  box-sizing: border-box;
}
.code-range-highlight-mirror {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}
.code-range-highlight-mark {
  background: rgba(250, 204, 21, .62) !important;
  color: transparent !important;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, .40);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* v2.6: подсказка конструктора привязана к вкладке «Профи», а не к viewport */
.topbar-side .editor-hint {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  max-width: 290px;
  z-index: 80;
}
@media (max-width: 1100px) {
  .topbar-side .editor-hint {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: min(290px, calc(100vw - 48px)) !important;
  }
}


/* v2.6.1 — clean constructor action stack */
.constructor-toolbar {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.constructor-toolbar > .btn,
.constructor-toolbar .editor-btn-wrapper,
.constructor-toolbar .editor-open-wrap,
.constructor-toolbar .editor-open-wrap > .btn,
.constructor-toolbar .constructor-clear-btn,
.constructor-toolbar .constructor-download-zip {
  width: 100% !important;
  max-width: 100% !important;
}
.constructor-toolbar .editor-btn-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}
.constructor-toolbar .editor-open-wrap {
  display: block !important;
}
.constructor-toolbar .btn {
  min-height: 42px;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
}
.constructor-toolbar .constructor-clear-btn {
  background: linear-gradient(135deg,#f59e0b,#f7bd4f) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #1a1000 !important;
  box-shadow: none !important;
}
.constructor-toolbar .constructor-download-zip:not([hidden]) {
  display: inline-flex !important;
}

/* v2.6.1 — code range overlay is temporary; no visual lag during page scroll */
#codeRangeHighlightLayer {
  will-change: left, top, width, height;
}

/* build v2.6.2: inspector modal text cosmetics */
#selectedTextInput{
  min-height:64px!important;
  height:76px!important;
  max-height:92px!important;
  resize:vertical!important;
}
#legalModalPreviewGroup{
  margin-top:4px!important;
}
#legalModalPreviewInput{
  min-height:320px!important;
  height:380px!important;
  max-height:56vh!important;
  width:100%!important;
  resize:vertical!important;
  font-size:13px!important;
  line-height:1.55!important;
}
#legalModalPreviewHint{
  font-size:11px!important;
  line-height:1.45!important;
}

/* build v2.6.3: constructor section delete keeps preview scroll position */


/* === v2.6.9: text links and gallery opening controls === */
.text-link-tools{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;}
.text-link-actions{display:flex;gap:8px;flex-wrap:wrap;}
.text-link-actions .btn.small{min-height:34px;height:34px;border-radius:999px;font-size:12px;padding:0 11px;}
.text-link-actions .btn.ghost{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);color:#dbe4ff;}
.gallery-open-control{display:flex!important;flex-direction:column;gap:8px;padding:11px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);}
.gallery-open-control[hidden]{display:none!important;}
.gallery-open-control .premium-toggle{width:auto!important;justify-content:flex-start!important;gap:10px!important;font-size:12.5px!important;font-weight:600!important;color:rgba(226,232,240,.94)!important;padding:0!important;min-height:26px!important;}
.gallery-open-control .premium-toggle-label{display:inline-block!important;white-space:nowrap!important;}
.gallery-open-control .muted-note{margin:0!important;font-size:11.5px!important;line-height:1.45!important;color:#aeb8ce!important;}

/* === v2.7.2: accessibility and policy dialogs === */
body.modal-open {
  overflow: hidden;
}

.legal-modal__dialog {
  max-height: min(86vh, 840px);
  overflow: auto;
  overscroll-behavior: contain;
}

.legal-modal__dialog:focus {
  outline: none;
}

.legal-modal__dialog code {
  color: #e0e7ff;
  overflow-wrap: anywhere;
}

#cookieBannerDetails {
  margin-left: 5px;
  color: #c7d2fe;
  font-weight: 700;
  text-underline-offset: 3px;
}

#cookieBannerDetails:hover {
  color: #ffffff;
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(250, 204, 21, .92);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .legal-modal {
    padding: 12px !important;
  }

  .legal-modal__dialog {
    max-height: 92vh;
    padding: 18px !important;
  }
}

/* TaskWeb Builder v2.7.14 — redesigned quick styles panel */
.quick-style-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.quick-style-section{
  padding:13px;
  border:1px solid rgba(138,164,255,.16);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.quick-style-section-head{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:start;
  gap:10px;
  margin-bottom:12px;
}
.quick-style-section-head.compact{margin-bottom:8px;}
.quick-style-section-icon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  border:1px solid rgba(138,164,255,.19);
  background:linear-gradient(145deg,rgba(96,165,250,.18),rgba(99,102,241,.09));
  color:#dce7ff;
  font-size:12px;
  font-weight:850;
  letter-spacing:-.02em;
}
.quick-style-section-head strong{
  display:block;
  margin:1px 0 3px;
  color:#f4f7ff;
  font-size:13px;
  line-height:1.2;
}
.quick-style-section-head span{
  display:block;
  color:#8f9abb;
  font-size:11px;
  line-height:1.38;
}
.quick-style-color-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.quick-style-color-card{
  padding:11px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  background:rgba(7,12,29,.48);
}
.quick-style-color-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:9px;
}
.quick-style-color-title label{
  margin:0!important;
  color:#e8edff!important;
  font-weight:750;
  font-size:12px!important;
}
.quick-style-color-title span{
  color:#7f8ba9;
  font-size:10px;
  text-align:right;
}
.quick-style-color-row{
  display:grid;
  grid-template-columns:66px minmax(0,1fr);
  gap:9px;
  align-items:end;
}
.quick-color-picker-wrap{
  display:flex!important;
  flex-direction:column;
  gap:5px;
  margin:0!important;
  color:#8f9abb!important;
  font-size:10px!important;
  cursor:pointer;
}
.quick-color-picker{
  width:66px!important;
  height:46px!important;
  padding:4px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:12px!important;
  background:#090f22!important;
  cursor:pointer;
}
.quick-style-value-field label{
  margin:0 0 5px!important;
  color:#8f9abb!important;
  font-size:10px!important;
}
.quick-style-value-field input{
  height:46px!important;
  padding:0 11px!important;
  font-size:12px!important;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.quick-style-apply{
  width:100%;
  margin-top:9px;
  min-height:40px;
  border-radius:11px!important;
}
.quick-style-fields{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
.quick-style-field-wide{grid-column:auto;}
.quick-style-field label{
  margin-bottom:6px!important;
  color:#cfd8f3!important;
  font-weight:650;
}
.quick-style-field input,
.quick-style-field select{
  height:42px!important;
  padding:0 10px!important;
  border-radius:11px!important;
  font-size:12px!important;
  text-overflow:ellipsis;
}
.quick-style-field-hint{
  display:block;
  margin-top:6px;
  color:#7f8ba9;
  font-size:10px;
  line-height:1.35;
}
.quick-style-segments{
  display:grid;
  grid-template-columns:1.15fr repeat(3,1fr);
  gap:4px;
  padding:4px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:#090f22;
}
.quick-style-segments button{
  min-width:0;
  height:36px;
  padding:0 6px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#98a4c4;
  font-size:10px;
  font-weight:750;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.quick-style-segments button:hover{
  color:#eef3ff;
  background:rgba(255,255,255,.055);
}
.quick-style-segments button.active{
  color:#fff;
  background:linear-gradient(180deg,rgba(96,165,250,.34),rgba(79,70,229,.28));
  box-shadow:0 5px 16px rgba(37,99,235,.18),inset 0 1px 0 rgba(255,255,255,.14);
}
.quick-style-toggle-row{
  min-height:48px!important;
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:13px!important;
  background:rgba(7,12,29,.42)!important;
}
.quick-style-visibility{padding-bottom:12px;}
.preview-inspector[data-inspector-panel="style"] .action-groups{
  margin-top:2px;
}
.preview-inspector[data-inspector-panel="style"] #selectedStyleHint{
  padding:10px 11px;
  border:1px dashed rgba(138,164,255,.16);
  border-radius:12px;
  background:rgba(96,165,250,.035);
}
.preview-inspector[data-inspector-panel="style"] .style-actions .btn{
  width:100%;
}