:root{--catsy-grad-start:#ff6788;--catsy-grad-end:#ff4d6d;--catsy-surface:#1a1a1e;--catsy-border:#2a2a2f;--catsy-text:#e7e7ea;--catsy-accent:#ff6788}
.welcome-studio{padding:1.25rem}
.welcome-studio .studio-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:1rem;align-items:stretch;min-height:520px;height:calc(100vh - 140px)}
.welcome-studio .editor-panel,.welcome-studio .preview-panel{background:#141419;border:1px solid var(--catsy-border);border-radius:12px}
.welcome-studio .editor-panel{grid-area:auto}
.welcome-studio .preview-panel{grid-area:auto}

@media (max-width: 1024px){
  .welcome-studio{padding:1rem}
  .welcome-studio .studio-grid{grid-template-columns:1fr; height:auto; min-height:auto}
  .welcome-studio .editor-panel,.welcome-studio .preview-panel{min-height:auto}
}

@media (max-width: 768px){
  .welcome-studio{padding:.25rem}
  .welcome-studio .studio-grid{gap:.5rem}
  /* Wrap tabs/toggles */
  #welcomeTabs.action-response-tabs{flex-wrap:wrap}
  #welcomeTabs .action-tab{flex:1 1 calc(50% - .5rem)}
  .toggle-row{flex-wrap:wrap;gap:.5rem}
  /* Full-bleed editor */
  .welcome-studio .editor-content{padding:.5rem 0}
  .layout-editor-wrapper{margin-left:0;margin-right:0}
  #wel-w-layoutEditor, #wel-l-layoutEditor{width:100%;max-width:100%}
  /* Hide layout editor tips on mobile */
  .layout-editor-wrapper .info-box{display:none}
  /* Reduce corner radii and side gutters */
  .welcome-studio .editor-panel,
  .welcome-studio .preview-panel{border-radius:6px}
  .layout-editor{border-radius:6px}
  .layout-toolbar, .layout-props, .layout-layers{border-radius:6px}
  /* tighter gaps */
  .welcome-studio .studio-grid{gap:.5rem}
  /* reduce builder outer padding only on welcome page */
  #welcomeBuilderPage.builder-page{padding:.25rem}
  /* header padding tighter */
  .welcome-studio .editor-panel .panel-header,
  .welcome-studio .preview-panel .panel-header{padding:.75rem .75rem}
}

@media (max-width: 480px){
  #welcomeBuilderPage.builder-page{padding:0}
  .welcome-studio{padding:0}
  .welcome-studio .editor-content{padding:.5rem .25rem}
  .layout-editor-wrapper{margin-left:-.25rem;margin-right:-.25rem}
  .welcome-studio .editor-panel,
  .welcome-studio .preview-panel{border-radius:4px}
  .layout-editor{border-radius:4px}
  .layout-toolbar, .layout-props, .layout-layers{border-radius:4px}
}

.welcome-studio .editor-panel{min-height:520px;display:flex;flex-direction:column;overflow:hidden}
.welcome-studio .editor-panel .panel-header,.welcome-studio .preview-panel .panel-header{padding:1rem 1.25rem;border-bottom:1px solid var(--catsy-border)}
.welcome-studio .editor-content{flex:1 1 auto;overflow:auto}
.welcome-studio .form-group{margin-bottom:1rem}
.welcome-studio .toggle-row{display:flex;gap:1rem}
.welcome-studio .toggle-item{display:flex;align-items:center;gap:.5rem}
.welcome-studio .preview-toolbar{display:flex;gap:.75rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--catsy-border)}
.preview-toolbar .btn{flex:1;padding:.75rem 1.5rem;border-radius:6px;font-weight:600;font-size:.9rem;transition:all .2s ease}
.preview-toolbar .btn-secondary{background:#313338;color:#b5bac1;border:none}
.preview-toolbar .btn-secondary:hover{background:#383a40;transform:translateY(0)}
.preview-toolbar .btn-secondary.active{background:#ff6788;color:#000}
#welcomePreview{padding:1rem 1.25rem}
.catsy-card{position:relative;background:linear-gradient(145deg,var(--catsy-grad-start),var(--catsy-grad-end));border-radius:14px;padding:1.25rem;overflow:hidden;color:#000}
.catsy-card .card-inner{position:relative;background:rgba(255,255,255,0.08);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.15);border-radius:12px;padding:1rem}
.catsy-card .title{font-weight:800;font-size:1.25rem;margin-bottom:.25rem}
.catsy-card .subtitle{opacity:.9}
.catsy-card .avatar{width:64px;height:64px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 4px rgba(255,255,255,0.25)}
.catsy-card .header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.catsy-sparkles::before,.catsy-sparkles::after{content:"";position:absolute;inset:0;background:radial-gradient(12px 12px at 10% 20%,rgba(255,255,255,.22),transparent 40%),radial-gradient(10px 10px at 85% 25%,rgba(255,255,255,.18),transparent 45%),radial-gradient(8px 8px at 30% 80%,rgba(255,255,255,.16),transparent 50%)}
.catsy-sparkles::after{filter:blur(6px);opacity:.6}
.theme-minimal .catsy-card{background:#1b1b20;color:var(--catsy-text)}
.theme-dark .catsy-card{background:#0f0f12;color:#e0e0e0}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border:1px solid rgba(255,255,255,.5);border-radius:8px;background:transparent;color:#fff;cursor:pointer}
.btn-outline:hover{background:rgba(255,255,255,.08)}

/* Layout editor (low-fidelity) */
.layout-editor-wrapper{margin-top:.5rem}
.layout-editor{position:relative;background:#0f0f12;border:1px dashed #3a3a3f;border-radius:8px;user-select:none;--handle-color:#ff6788}
.layout-editor{-webkit-tap-highlight-color:transparent}
.layout-editor .le-item{touch-action:none}
.layout-editor .le-text .le-text-inner[contenteditable="true"]{touch-action:manipulation}
.layout-editor.grid{background-color:#0f0f12;background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 24px),repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 24px)}
.layout-editor .le-item{position:absolute;outline:1px dashed rgba(255,255,255,.3);border:0;border-radius:6px;color:#e7e7ea;cursor:move;box-sizing:border-box}
.layout-editor .le-item.selected{outline:2px dashed #ff6788;box-shadow:0 0 0 2px rgba(255,103,136,.25);z-index:10}
.layout-editor .le-text .le-text-inner{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;font-weight:700;letter-spacing:.2px;color:#e7e7ea;white-space:pre-wrap;word-break:break-word;overflow:hidden;text-align:left;padding:4px;line-height:1.2;user-select:text;cursor:text}
.layout-editor .le-avatar .le-avatar-inner{width:100%;height:100%;border:2px dashed rgba(255,255,255,.6);border-radius:50%}
.layout-editor .le-sticker .le-sticker-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;user-select:none}
.layout-editor .le-sticker img{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:high-quality}
.layout-editor .le-item .le-resize{position:absolute;right:-22px;bottom:-22px;width:22px;height:22px;cursor:se-resize;opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;background:transparent;border:0;transition:background-color .15s ease, transform .15s ease, opacity .15s ease}
.layout-editor .le-item.selected .le-resize{opacity:1;pointer-events:auto}
.layout-editor .le-item .le-resize:hover{background: var(--handle-color); border-radius:4px; transform: scale(1.4)}
.layout-editor .le-item .le-resize:hover i{color:#000; transform: scale(1)}
.layout-editor .le-item{transform-origin:center center}
.layout-editor .le-item .le-rotate{position:absolute;left:-22px;top:-22px;width:22px;height:22px;cursor:grab;opacity:0;pointer-events:auto;display:flex;align-items:center;justify-content:center;background:transparent;border:0;transition:background-color .15s ease, transform .15s ease, opacity .15s ease}
.layout-editor .le-item.selected .le-rotate{opacity:1;pointer-events:auto}
.layout-editor .le-item .le-rotate:hover{background: var(--handle-color); border-radius:4px; transform: scale(1.4)}
.layout-editor .le-item .le-rotate:hover i{color:#000; transform: scale(1)}
.layout-editor .le-item .le-rotate:active{cursor:grabbing}
.layout-editor .le-item .le-move{position:absolute;top:-22px;right:-22px;width:22px;height:22px;cursor:move;opacity:0;pointer-events:auto;display:flex;align-items:center;justify-content:center;background:transparent;border:0;transition:background-color .15s ease, transform .15s ease, opacity .15s ease}
.layout-editor .le-item.selected .le-move{opacity:1;pointer-events:auto}
.layout-editor .le-item .le-move:hover{background: var(--handle-color); border-radius:4px; transform: scale(1.4)}
.layout-editor .le-item .le-move:hover i{color:#000; transform: scale(1)}
.layout-toolbar .btn{padding:.5rem .75rem}

/* Mobile action bar (hidden on desktop) */
.layout-mobile-actions{display:none}
.icon-btn-square{width:56px;height:56px;border-radius:14px;background:#1f1f23;border:1px solid #2a2a2f;color:#ff6788;display:inline-flex;align-items:center;justify-content:center;font-size:22px;transition:background .2s ease, transform .15s ease}
.icon-btn-square:hover{background:#242429;transform:translateY(-1px)}
.icon-btn-square:active{transform:translateY(0)}

/* (Removed custom quick action modal styles; reusing existing .btn-new and modal styles) */

/* Desktop toolbar buttons: mobile-like look with text */
@media (min-width: 769px){
  .layout-toolbar{gap:.5rem}
  .layout-toolbar .btn{
    background:#1f1f23;
    border:1px solid #2a2a2f;
    color:#ff6788;
    border-radius:12px;
    padding:.65rem 1rem;
    font-weight:600;
    transition:background .2s ease, transform .15s ease, border-color .2s ease;
  }
  .layout-toolbar .btn i{color:#ff6788; margin-right:.4rem}
  .layout-toolbar .btn:hover{background:#242429; transform:translateY(-1px)}
  .layout-toolbar .btn:active{transform:translateY(0)}
}

/* Icon look: pink by default, adaptive optional */
.layout-editor .le-item .le-rotate i,
.layout-editor .le-item .le-move i,
.layout-editor .le-item .le-resize i{
    color: var(--handle-color);
    font-size: 16px;
    line-height: 1;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle; /* override FA default */
    pointer-events: none;
    transition: color .15s ease, transform .15s ease;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .layout-editor .le-item .le-rotate,
  .layout-editor .le-item .le-move,
  .layout-editor .le-item .le-resize{width:28px;height:28px}
  .layout-editor .le-item .le-rotate{left:-28px;top:-28px}
  .layout-editor .le-item .le-move{top:-28px;right:-28px}
  .layout-editor .le-item .le-resize{right:-28px;bottom:-28px}
  .layout-editor .le-item .le-rotate i,
  .layout-editor .le-item .le-move i,
  .layout-editor .le-item .le-resize i{font-size:18px}

  /* Welcome/Leave UI: toolbar wraps and buttons grow */
  .layout-toolbar{flex-wrap:wrap}
  .layout-toolbar .btn{flex:1 1 calc(50% - .5rem); min-width:140px}
  /* Replace toolbar with compact action bar */
  .layout-mobile-actions{display:flex;gap:.5rem;margin-top:.5rem;justify-content:center}
  .layout-toolbar{display:none !important}

  /* Props stack rows */
  .layout-props .form-row{flex-wrap:wrap}
  .layout-props .form-field{flex:1 1 100%}
  .layout-props{padding:.75rem}
  .layout-layers{font-size:.95rem}
}

@media (max-width: 420px) {
  .layout-toolbar .btn{flex:1 1 100%}
}

/* Adaptive mode: invert-ish using blend for any background */
.layout-editor.handles-adaptive .le-item .le-rotate i,
.layout-editor.handles-adaptive .le-item .le-move i,
.layout-editor.handles-adaptive .le-item .le-resize i{
    color: #ffffff;
    mix-blend-mode: difference;
    filter: none;
}
.layout-props .form-row{display:flex;gap:.75rem}
.layout-props .form-field{flex:1}
.layout-editor .guide-v{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,103,136,.75);pointer-events:none;display:none;z-index:5}
.layout-editor .guide-h{position:absolute;left:0;right:0;height:1px;background:rgba(255,103,136,.75);pointer-events:none;display:none;z-index:5}

/* Layers list */
.layout-layers{margin-top:.5rem;border:1px solid #2a2c35;border-radius:8px;overflow:hidden}
.layout-layers .layer-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border-bottom:1px solid #2a2c35;cursor:pointer;background:#121217}
.layout-layers .layer-row:hover{background:#171823}
.layout-layers .layer-row.active{background:#1e1f2a}
.layout-layers .layer-row:last-child{border-bottom:0}
.layout-layers .layer-left{display:flex;align-items:center;gap:.5rem}
.layout-layers .layer-actions{margin-left:auto;display:flex;gap:.25rem}
.layout-layers .icon{width:16px;height:16px;display:inline-block}

/* Toolbar and Props styled like embed sections */
.layout-toolbar{display:flex;gap:.5rem;margin-top:.5rem;background:#1a1a1e;border:1px solid #2a2c35;border-radius:8px;padding:.5rem}
.layout-props{margin-top:.5rem;background:#1a1a1e;border:1px solid #2a2c35;border-radius:8px;padding:1rem}