:root{
      --page:#edf2f7;
      --panel:#ffffff;
      --text:#172033;
      --muted:#667085;
      --line:#d9e2ec;
      --soft:#f8fafc;
      --primary:#2563eb;
      --primary-dark:#1d4ed8;
      --danger:#dc2626;
      --success:#15803d;
      --radius:15px;
    }

    *{box-sizing:border-box}

    html,body{
      margin:0;
      min-height:100%;
      font-family:Inter,Arial,sans-serif;
      background:var(--page);
      color:var(--text);
    }

    button,input,select,textarea{
      font:inherit;
    }

    button{
      cursor:pointer;
    }

    .app{
      min-height:100vh;
      display:grid;
      grid-template-columns:350px minmax(0,1fr);
    }

    .sidebar{
      background:var(--panel);
      border-right:1px solid var(--line);
      padding:22px;
      overflow:auto;
      max-height:100vh;
    }

    .brand{
      margin-bottom:20px;
    }

    .brand h1{
      margin:0 0 7px;
      font-size:20px;
      letter-spacing:-.02em;
    }

    .brand p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.55;
    }

    .group{
      border-top:1px solid var(--line);
      padding:18px 0;
    }

    .group:first-of-type{
      border-top:0;
      padding-top:0;
    }

    .group-title-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }

    .group-title{
      color:#475467;
      font-size:12px;
      font-weight:800;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .count{
      min-width:24px;
      height:24px;
      padding:0 7px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:#eff6ff;
      color:#1d4ed8;
      font-size:11px;
      font-weight:800;
    }

    label{
      display:block;
      margin:10px 0 6px;
      color:#344054;
      font-size:13px;
      font-weight:700;
    }

    input,select,textarea{
      width:100%;
      min-height:42px;
      padding:10px 11px;
      border:1px solid var(--line);
      border-radius:10px;
      background:#fff;
      color:var(--text);
      outline:none;
    }

    input:focus,select:focus,textarea:focus{
      border-color:#8ab4ff;
      box-shadow:0 0 0 3px rgba(37,99,235,.10);
    }

    input[type="color"]{
      padding:4px;
    }

    input[type="file"]{
      padding:8px;
      background:var(--soft);
    }

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

    .row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }

    .button-row{
      display:flex;
      gap:9px;
      margin-top:11px;
    }

    .btn{
      width:100%;
      min-height:42px;
      border:1px solid var(--line);
      border-radius:10px;
      padding:9px 12px;
      background:#fff;
      color:var(--text);
      font-weight:800;
      transition:transform .18s ease, background .18s ease, border-color .18s ease;
    }

    .btn:hover{
      transform:translateY(-1px);
    }

    .btn.primary{
      background:var(--primary);
      border-color:var(--primary);
      color:#fff;
    }

    .btn.primary:hover{
      background:var(--primary-dark);
    }

    .btn.soft{
      background:var(--soft);
    }

    .btn.compact{
      width:auto;
      min-height:34px;
      padding:6px 10px;
      border-radius:8px;
      font-size:12px;
    }

    .btn.danger{
      color:var(--danger);
      border-color:#fecaca;
    }

    .alignment-label{
      margin-top:14px;
    }

    .alignment-control{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:7px;
    }

    .align-btn{
      min-height:38px;
      border:1px solid var(--line);
      border-radius:9px;
      background:var(--soft);
      color:#475467;
      display:grid;
      place-items:center;
      transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
    }

    .align-btn:hover:not(:disabled){
      transform:translateY(-1px);
      border-color:#93b4ec;
      color:var(--primary);
    }

    .align-btn.active,
    .align-btn[aria-pressed="true"]{
      background:#eff6ff;
      border-color:#60a5fa;
      color:#1d4ed8;
      box-shadow:0 0 0 3px rgba(37,99,235,.08);
    }

    .align-btn svg{
      width:19px;
      height:19px;
      fill:none;
      stroke:currentColor;
      stroke-width:1.8;
      stroke-linecap:round;
    }

    .align-btn:disabled{
      cursor:not-allowed;
      opacity:.48;
      transform:none;
    }

    .btn:disabled{
      cursor:not-allowed;
      opacity:.55;
      transform:none;
    }

    .detected-list{
      display:grid;
      gap:10px;
    }

    .detected-empty{
      padding:15px;
      border:1px dashed #cbd5e1;
      border-radius:11px;
      color:var(--muted);
      background:var(--soft);
      font-size:12px;
      line-height:1.5;
      text-align:center;
    }

    .text-field{
      padding:11px;
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
      transition:.18s ease;
    }

    .text-field.active{
      border-color:#60a5fa;
      box-shadow:0 0 0 3px rgba(37,99,235,.09);
    }

    .text-field-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:7px;
    }

    .text-field-label{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:12px;
      font-weight:800;
      color:#475467;
    }

    .text-field-type{
      flex:none;
      padding:3px 7px;
      border-radius:999px;
      background:#f1f5f9;
      color:#64748b;
      font-size:10px;
      font-weight:800;
      text-transform:uppercase;
    }


    .text-field-input{
      display:block;
      min-height:66px;
      line-height:1.35;
      resize:none;
      overflow-y:auto;
      white-space:pre-wrap;
    }

    .text-field-hint{
      margin-top:6px;
      color:var(--muted);
      font-size:10px;
      line-height:1.35;
    }

    .workspace{
      min-width:0;
      display:flex;
      flex-direction:column;
      min-height:100vh;
    }

    .topbar{
      min-height:68px;
      padding:13px 20px;
      background:#fff;
      border-bottom:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      position:sticky;
      top:0;
      z-index:10;
    }

    .title{
      font-weight:850;
      letter-spacing:-.01em;
    }

    .status{
      margin-top:4px;
      color:var(--muted);
      font-size:12px;
    }

    .status.success{
      color:var(--success);
    }

    .status.error{
      color:var(--danger);
    }

    .top-actions{
      display:flex;
      gap:9px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .top-actions .btn{
      width:auto;
      min-width:115px;
    }

    .preview-area{
      flex:1;
      min-height:0;
      padding:28px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:auto;
    }

    .artboard-frame{
      width:min(1000px,100%);
      min-height:300px;
      background-color:#fff;
      background-image:linear-gradient(45deg,#eef2f7 25%,transparent 25%),linear-gradient(-45deg,#eef2f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f7 75%),linear-gradient(-45deg,transparent 75%,#eef2f7 75%);
      background-size:22px 22px;
      background-position:0 0,0 11px,11px -11px,-11px 0;
      border:1px solid #d6dee8;
      border-radius:18px;
      box-shadow:0 20px 55px rgba(15,23,42,.12);
      overflow:hidden;
      display:grid;
      place-items:center;
      position:relative;
    }

    .svg-host{
      width:100%;
      display:grid;
      place-items:center;
      background:transparent;
      touch-action:none;
      position:relative;
    }

    .svg-host > svg{
      width:100%;
      height:auto;
      max-height:calc(100vh - 130px);
      display:block;
    }

    .placeholder{
      min-height:460px;
      width:100%;
      padding:30px;
      display:grid;
      place-items:center;
      text-align:center;
      background:
        linear-gradient(45deg,#f8fafc 25%,transparent 25%),
        linear-gradient(-45deg,#f8fafc 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#f8fafc 75%),
        linear-gradient(-45deg,transparent 75%,#f8fafc 75%);
      background-size:24px 24px;
      background-position:0 0,0 12px,12px -12px,-12px 0;
    }

    .placeholder-card{
      max-width:430px;
      padding:28px;
      border:1px dashed #b9c6d5;
      border-radius:16px;
      background:rgba(255,255,255,.9);
    }

    .placeholder-card strong{
      display:block;
      margin-bottom:8px;
      font-size:17px;
    }

    .placeholder-card span{
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }

    .editor-selected-text{
      cursor:pointer;
    }

    .editor-selection-box{
      fill:none;
      stroke:#3b82f6;
      stroke-width:1.25px;
      stroke-dasharray:5 4;
      stroke-linecap:round;
      vector-effect:non-scaling-stroke;
      pointer-events:none;
      shape-rendering:geometricPrecision;
    }

    .editable-svg-text{
      cursor:pointer;
    }

    .file-note{
      padding:10px 11px;
      border-radius:10px;
      background:#eff6ff;
      color:#1e40af;
      font-size:12px;
      line-height:1.5;
      display:none;
      margin-top:10px;
    }

    @media (max-width:960px){
      .app{
        grid-template-columns:1fr;
      }

      .sidebar{
        max-height:none;
        border-right:0;
        border-bottom:1px solid var(--line);
      }

      .workspace{
        min-height:65vh;
      }

      .topbar{
        position:static;
        align-items:flex-start;
        flex-direction:column;
      }

      .top-actions{
        width:100%;
      }

      .top-actions .btn{
        flex:1;
        min-width:0;
      }

      .preview-area{
        padding:14px;
      }

      .svg-host > svg{
        max-height:none;
      }
    }

    .server-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-top:9px;
      padding:5px 8px;
      border-radius:999px;
      background:#ecfdf3;
      color:#166534;
      font-size:11px;
      font-weight:800;
    }

    .server-badge::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:50%;
      background:#22c55e;
    }

    .position-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }

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

    .editable-svg-text.is-dragging{
      cursor:grabbing;
    }

    .editable-svg-text{
      cursor:grab;
    }

    .loading{
      pointer-events:none;
      opacity:.68;
    }


    .editor-alignment-guide{
      position:absolute;
      background:#0ea5e9;
      box-shadow:0 0 0 1px rgba(14,165,233,.12);
      pointer-events:none;
      z-index:20;
      opacity:.96;
    }

    .editor-alignment-guide.is-vertical{
      width:1px;
      margin-left:-.5px;
    }

    .editor-alignment-guide.is-horizontal{
      height:1px;
      margin-top:-.5px;
    }