:root{
    --bg:#0D1322;
    --panel:#141C30;
    --panel2:#182238;
    --line:#253252;
    --text:#E8EDF6;
    --muted:#93A0B8;
    --faint:#6E7A93;
    --gold:#C9A25F;
    --gold-2:#E3C184;
    --danger:#E06C6C;
    --ok:#6FBF8F;
    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'Manrope','Segoe UI',system-ui,sans-serif;
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    font-size:13px;
    line-height:1.5;
  }

  /* ---------- Barra superior ---------- */
  .topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:9px 16px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:10;
  }
  .topbar .brand{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
  }
  .topbar .brand svg{ width:34px; height:34px; flex:none; }
  .topbar .brand .title{
    font-weight:800;
    letter-spacing:.12em;
    font-size:13px;
    white-space:nowrap;
  }
  .topbar .brand .title span{ color:var(--gold-2); }
  .topbar .brand .sub{
    font-size:9.5px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .topbar-menu{ display:none; }
  .actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .actions .drawer-top{ display:none; }
  .actions button{
    display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap;
  }
  .actions button svg{ width:14px; height:14px; flex:none; }

  button{
    cursor:pointer;
    border:1px solid var(--line);
    background:#0E1526;
    color:var(--text);
    border-radius:8px;
    padding:8px 13px;
    font:inherit;
    font-size:12.5px;
    transition:border-color .15s, color .15s, background .15s;
    white-space:nowrap;
  }
  button:hover{ border-color:var(--gold); color:var(--gold-2); }
  button.primary{
    background:var(--gold);
    border-color:var(--gold);
    color:#10141B;
    font-weight:800;
  }
  button.primary:hover{ background:var(--gold-2); color:#10141B; }
  button.small{ padding:4px 8px; font-size:12px; }
  button:disabled{ opacity:.5; cursor:default; }

  .save-status{
    font-size:10.5px;
    color:var(--muted);
    letter-spacing:.08em;
    white-space:nowrap;
    border:1px solid var(--line);
    border-radius:20px;
    padding:4px 10px;
  }
  .save-status.ok{ color:var(--ok); border-color:rgba(111,191,143,.45); }
  .save-status.err{ color:var(--danger); border-color:rgba(224,108,108,.45); }
  .budget-list{ display:flex; flex-direction:column; gap:6px; }
  .bl-row{
    display:flex;
    align-items:center;
    gap:6px;
    border:1px solid var(--line);
    border-radius:8px;
    padding:7px 8px;
    cursor:pointer;
    background:#0E1526;
  }
  .bl-row:hover{ border-color:var(--gold); }
  .bl-row.active{ border-color:var(--gold); background:rgba(201,162,95,.08); }
  .bl-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .bl-main b{ font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bl-main span{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bl-main .bl-price{ color:var(--gold-2); font-weight:700; font-size:12px; font-variant-numeric:tabular-nums; }
  .bl-main i{ font-size:10px; color:var(--faint); font-style:normal; }
  .bl-row > button{ flex:none; }
  .bl-row .del{ flex:none; }
  .bl-row .pdf{ flex:none; color:var(--gold-2); }
  .bl-row .pdf:hover{ border-color:var(--gold); }
  .bl-row .sign{ flex:none; color:var(--gold-2); }
  .bl-row .sign.done{ color:var(--ok); border-color:var(--ok); }
  .bl-row .sign:hover{ border-color:var(--gold); }
  .company-sig-box{
    display:flex; flex-direction:column; gap:8px;
    border:1px solid var(--line); border-radius:10px;
    background:#0E1526; padding:10px; margin-bottom:10px;
  }
  .company-sig-head{
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    font-size:11.5px; font-weight:700; color:var(--text);
  }
  .company-sig-preview{
    display:flex; align-items:center; justify-content:center; min-height:44px;
  }
  .company-sig-preview img{
    max-height:52px; max-width:100%; display:block;
    border:1px dashed var(--line); border-radius:8px; padding:6px; background:#fff;
  }
  .company-sig-upload button{ width:100%; }
  .company-sig-box .hint{ margin:0; }
  .onboarding-sector{
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:16px 10px; border:1px solid var(--line); border-radius:12px;
    background:var(--panel2); color:var(--text); font-size:12.5px; font-weight:600;
    cursor:pointer; min-height:64px; line-height:1.35;
  }
  .onboarding-sector:hover{ border-color:var(--gold); color:var(--gold-2); }
  .bl-row .template-rename-input{ width:100%; padding:4px 6px; font-size:12px; }
  .actions #btn-pdf{ border-radius:8px 0 0 8px; }
  .actions #btn-export{ padding:0 10px; border-radius:0 8px 8px 0; }
  .actions #btn-actions{ border-radius:8px 0 0 8px; }
  .actions #btn-actions-toggle{ padding:0 10px; border-radius:0 8px 8px 0; }

  /* ---------- Layout ---------- */
  .layout{
    display:flex;
    padding:12px;
    /* els panells acaben per sobre del footer fix: sense números màgics al totalsbar */
    padding-bottom:44px;
    height:calc(100vh - 58px);
    --panel-left:300px;
    --panel-right:560px;
  }
  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:auto;
    min-height:0;
    min-width:0;
  }
  .divider{
    flex:none;
    width:10px;
    cursor:col-resize;
    position:relative;
    z-index:5;
  }
  .divider::after{
    content:'';
    position:absolute;
    left:4px;
    top:12px;
    bottom:12px;
    width:2px;
    border-radius:2px;
    background:var(--line);
  }
  .divider:hover::after, .divider.active::after{ background:var(--gold); }
  .divider:hover, .divider.active{ background:rgba(201,162,95,.10); }

  .left{ width:var(--panel-left); flex:none; padding:2px 12px 14px; }
  .center{ flex:1 1 auto; min-width:0; }
  .right{ width:var(--panel-right); flex:none; }

  @media (max-width:1250px){
    .layout{ flex-wrap:wrap; }
    .left{ flex:1 1 260px; width:auto; }
    .center{ flex:1 1 420px; }
    .right{ flex:1 1 100%; width:auto; height:70vh; }
    .divider{ display:none; }
  }

  /* ---------- Formularios (izquierda) ---------- */
  .left{ padding:2px 12px 14px; }
  .panel-toggle{ display:flex; gap:6px; padding:10px 2px 8px; }
  .panel-toggle button{
    flex:1; background:transparent; border:1px solid var(--line); border-radius:8px;
    color:var(--muted); font-size:10.5px; font-weight:700; letter-spacing:.06em;
    padding:6px 8px; cursor:pointer;
  }
  .panel-toggle button:hover{ color:var(--gold-2); border-color:var(--gold); }
  details{ border-bottom:1px solid var(--line); }
  details:last-child{ border-bottom:0; }
  summary{
    cursor:pointer;
    list-style:none;
    padding:12px 2px;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold-2);
    display:flex;
    align-items:center;
    gap:8px;
  }
  summary::-webkit-details-marker{ display:none; }
  summary::after{
    content:'+';
    color:var(--muted);
    font-weight:700;
  }
  details[open] summary::after{ content:'–'; }
  .panel-handle{
    cursor:grab; flex:none; color:var(--muted); font-size:12px;
    opacity:.45; user-select:none; -webkit-user-select:none;
  }
  .panel-handle:hover{ opacity:1; color:var(--gold-2); }
  .panel-handle:active{ cursor:grabbing; }
  .panel-pin{
    margin-left:auto; display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; padding:0; cursor:pointer;
    width:22px; height:22px; color:var(--muted); opacity:.55;
  }
  .panel-pin svg{ width:13px; height:13px; display:block; }
  .panel-pin:hover{ opacity:1; color:var(--text); }
  .panel-pin.pinned{ opacity:1; color:var(--text); }
  .panel-pin.pinned svg{ fill:currentColor; }
  details.dragging{ opacity:.35; }
  details.drop-before{ box-shadow: inset 0 2px 0 var(--gold); }
  details.drop-after{ box-shadow: inset 0 -2px 0 var(--gold); }
  .body{ padding:2px 0 14px; display:flex; flex-direction:column; gap:9px; }

  label{ display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
  input, textarea, select{
    width:100%;
    background:#0E1526;
    border:1px solid #243252;
    color:var(--text);
    border-radius:8px;
    padding:8px 10px;
    font:inherit;
    font-size:13px;
  }
  input:focus, textarea:focus{ outline:none; border-color:var(--gold); }
  textarea{ resize:vertical; min-height:92px; line-height:1.45; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .hint{ font-size:11px; color:var(--muted); line-height:1.45; }

  .color-row{ display:flex; align-items:center; gap:10px; }
  .color-row input[type=color]{
    width:44px; height:30px; padding:2px; flex:none; cursor:pointer;
  }
  .color-row .hex{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
  .logo-preview{
    width:100%; height:64px; border-radius:8px; overflow:hidden;
    background:#0E1526; display:flex; align-items:center; justify-content:center;
    border:1px dashed #32415F; font-size:11px; color:var(--muted);
  }
  .logo-preview img{ max-width:100%; max-height:100%; object-fit:contain; }
  .logo-btns{ display:flex; gap:8px; }
  .s-brand{
    border:1px solid var(--line); border-radius:10px;
    padding:10px; margin-bottom:12px; background:var(--panel2);
  }
  .s-brand > label:first-child{
    display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gold-2); font-weight:800; margin-bottom:8px;
  }
  .s-logo-row{ display:flex; gap:6px; margin-top:4px; }
  .s-logo-row input{ flex:1; min-width:0; }
  .s-colors{ margin-top:10px; }
  .color-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px 10px; margin-top:6px; }
  .color-grid label{ display:flex; align-items:center; gap:6px; font-size:11px; }
  .color-grid input[type=color]{
    width:34px; height:26px; padding:0; border:1px solid var(--line); border-radius:6px;
    background:var(--panel); cursor:pointer;
  }
  @media (max-width: 640px){
    .color-grid{ grid-template-columns:repeat(2,1fr); }
  }

  /* ---------- Productos (centro) ---------- */
  .center{ display:flex; flex-direction:column; }
  .addbar{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding:12px;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    background:var(--panel);
    z-index:3;
  }
  .addbar input{ flex:1; }
  #url-input, #btn-scrape, #btn-html{ display:none !important; }
  .item.dragging{ opacity:.4; }
  .item.drop-target{ outline:2px dashed var(--gold); outline-offset:-2px; }
  #items{ padding:12px; display:flex; flex-direction:column; gap:10px; flex:1; }
  .empty{
    border:1px dashed #32415F; border-radius:10px; padding:28px 16px;
    text-align:center; color:var(--muted); font-size:12.5px; line-height:1.6;
  }
  .item{
    background:var(--panel2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px;
    display:grid;
    grid-template-columns:96px 1fr 340px;
    gap:10px;
  }
  .item-thumb{
    width:100%; height:80px; border-radius:10px; overflow:hidden;
    background:#0E1526; display:flex; align-items:center; justify-content:center;
    color:var(--gold); font-weight:800; font-family:var(--serif); font-size:26px;
  }
  .item-thumb img{ width:100%; height:100%; object-fit:cover; }
  .item-thumb-wrap{ display:flex; flex-direction:column; gap:6px; }
  .item-polish{
    display:flex; align-items:center; justify-content:center; gap:5px;
    font-size:10.5px; padding:5px 8px; border-radius:7px; white-space:nowrap; width:100%;
    background:transparent; color:var(--text); cursor:pointer;
  }
  .item-polish:hover{ background:var(--panel2); }
  .item-polish svg{ width:12px; height:12px; flex:none; }
  .item-polish:disabled{ opacity:.5; cursor:default; }
  .item-main{ display:flex; flex-direction:column; gap:6px; }
  .item-main input.f-name{ font-weight:700; }
  .img-row{ display:flex; gap:6px; }
  .img-row input{ flex:1; min-width:0; }
  .img-row button{ flex:none; }
  .pos-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .pos-row select{ flex:none; width:auto; padding:6px 8px; font-size:12px; }
  .pos-row input{ flex:none; width:110px; }
  .frame{
    position:relative;
    width:100%;
    aspect-ratio:2.85 / 1;
    max-height:480px;
    border-radius:8px;
    overflow:hidden;
    border:1px solid #32415F;
    background:#0E1526;
    cursor:grab;
    touch-action:none;
    user-select:none;
  }
  .frame.dragging{ cursor:grabbing; border-color:var(--gold); }
  .frame.sec-frame{ aspect-ratio:1.5 / 1; }
  .frame img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    pointer-events:none;
  }
  .frame-coords{
    position:absolute;
    right:6px;
    bottom:6px;
    background:rgba(10,15,26,.72);
    color:var(--gold-2);
    padding:2px 8px;
    border-radius:6px;
    font-size:10px;
    font-variant-numeric:tabular-nums;
    pointer-events:none;
  }
  .item-nums{
    display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:5px;
    align-items:start; align-content:start;
  }
  .item-nums input{ text-align:center; padding:7px 4px; font-size:12.5px; }
  .item-nums .num-label{
    font-size:9px; color:var(--muted); text-align:center;
    text-transform:uppercase; letter-spacing:.04em; line-height:1.2;
  }
  .item-nums .f-cost{ border-color:rgba(111,191,143,.5); }
  .row-total{
    grid-column:1 / -1;
    text-align:right;
    font-weight:800;
    color:var(--gold-2);
    font-size:12.5px;
    font-variant-numeric:tabular-nums;
  }
  .item-move-bar{
    grid-column:1 / -1;
    display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:6px;
    padding-top:6px; margin-top:2px; border-top:1px solid var(--line);
  }
  .item:not(.separator) .item-move-bar{ grid-row:3; }
  .item-move-bar button{ padding:4px 7px; font-size:12px; }
  .item-move-bar button svg{ width:12px; height:12px; display:block; }
  .item.separator .item-move-bar{
    grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:flex-end;
    grid-row:auto;
    gap:6px; padding-top:6px; margin-top:2px; border-top:1px solid var(--line);
  }
  .item-move-bar button.del:hover{ border-color:var(--danger); color:var(--danger); }
  .item-move-bar .drag-handle{
    color:var(--faint); font-size:15px; line-height:1; cursor:grab;
    padding:0 2px; user-select:none;
  }
  .item-move-bar .drag-handle:hover{ color:var(--gold-2); }
  .item-courtesy{
    display:flex; align-items:center; gap:6px;
    font-size:11px; color:var(--muted); margin-top:6px; cursor:pointer;
  }
  .item-courtesy input{ width:auto; margin:0; }
  .item.courtesy .f-name,
  .item.courtesy .f-desc,
  .item.courtesy .f-cost,
  .item.courtesy .f-unit,
  .item.courtesy .row-total,
  .item.courtesy .item-courtesy{ color:var(--danger); }
  .item.separator{ grid-template-columns:30px 1fr; align-items:center; }
  .sep-badge{ color:var(--gold); text-align:center; font-weight:800; font-size:14px; }
  .item.separator .f-name{ font-style:italic; }
  .sep-body{ display:flex; flex-direction:column; gap:6px; }
  .sep-title-row{ display:flex; align-items:center; gap:8px; }
  .sep-total{
    color:var(--gold-2); font-family:var(--serif); font-size:15px;
    white-space:nowrap;
  }
  .sep-subtotal{
    display:flex; align-items:center; gap:6px; font-size:11px;
    color:var(--muted); cursor:pointer; user-select:none;
  }
  .sep-subtotal input{ width:auto; margin:0; }
  .sep-subtotal-line{
    grid-column:1 / -1; text-align:right; font-size:12px; font-weight:800;
    color:var(--gold-2); padding-top:6px; border-top:1px dashed var(--line);
  }

  .sec-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:14px 12px 6px;
    border-top:1px solid var(--line);
  }
  .sec-head .lbl{
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold-2);
  }
  #sections{ padding:6px 12px 14px; display:flex; flex-direction:column; gap:10px; }
  .sec-block{
    background:var(--panel2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .sec-top{ display:flex; gap:8px; align-items:flex-start; }
  .sec-top input{ flex:1; min-width:0; }
  .sec-actions{ display:flex; gap:5px; flex:none; }
  .sec-actions button{ padding:5px 9px; font-size:11px; }
  .sec-actions button.del:hover{ border-color:var(--danger); color:var(--danger); }

  .totalsbar{
    display:grid;
    grid-template-columns:1.1fr 1fr 1.1fr 1fr 1.4fr;
    gap:10px;
    padding:12px;
    border-top:1px solid var(--line);
    background:var(--panel);
    position:sticky;
    bottom:0;
    margin-bottom:0;
  }
  .totalsbar .cell{ min-width:0; }
  .totalsbar .cell:last-child{ text-align:right; }
  .totalsbar .lbl{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
  .totalsbar .val{ font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; }
  .totalsbar .val.gold{ color:var(--gold-2); font-family:var(--serif); font-size:19px; }
  .totalsbar input{ text-align:center; padding:6px 4px; font-size:12.5px; }

  /* ---------- Vista previa (derecha) ---------- */
  .right{ display:flex; flex-direction:column; }
  .preview-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 12px;
    border-bottom:1px solid var(--line);
    font-size:11.5px;
    color:var(--muted);
    flex:none;
  }
  #preview-wrap{
    flex:1;
    overflow:auto;
    padding:16px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
  }
  #preview{
    border:0;
    width:100%;
    height:100%;
    background:#fff;
    transform-origin:top left;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
    border-radius:4px;
  }
  .preview-mobile{ display:none; }

  /* ---------- Aviso ---------- */
  .toast{
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%) translateY(80px);
    background:#0E1526;
    border:1px solid var(--gold);
    color:var(--text);
    padding:10px 18px;
    border-radius:10px;
    font-size:12.5px;
    box-shadow:0 12px 34px rgba(0,0,0,.5);
    transition:transform .25s ease;
    z-index:50;
    max-width:80vw;
  }
  .toast.show{ transform:translateX(-50%) translateY(0); }
  .toast.err{ border-color:var(--danger); }
  .app-footer{
    position:fixed; left:0; right:0; bottom:0; display:flex; align-items:center;
    justify-content:flex-end; gap:10px; padding:6px 12px;
    background:rgba(13,19,34,.94); border-top:1px solid var(--line);
    color:var(--muted); font-size:11px; z-index:40;
  }
  .app-footer select{
    background:var(--panel2); color:var(--text); border:1px solid var(--line);
    border-radius:6px; padding:3px 6px; font-size:11px; height:26px; cursor:pointer;
    width:auto;
  }
  .app-footer button{ padding:4px 10px; font-size:11px; }
  .app-footer a.small{
    padding:4px 10px; font-size:11px; text-decoration:none; color:var(--text);
    border:1px solid var(--line); border-radius:7px; background:var(--panel2);
  }
  .app-footer a.small:hover{ border-color:var(--gold); }
  .app-footer #ft-offline{ color:var(--gold-2); font-size:10.5px; margin-right:auto; }
  .bl-signed{
    display:inline-block; font-size:10px; color:var(--ok);
    border:1px solid var(--ok); border-radius:99px; padding:1px 7px; margin-left:6px;
    vertical-align:middle; font-weight:700;
  }
  .project-name{
    background:var(--panel);
    border-radius:10px;
    padding:12px;
    margin:10px 20px 12px;
  }
  .project-name label{
    display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); margin:0 0 2px 2px;
  }
  .project-name input{
    width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
    border-radius:0; padding:4px 2px 10px; color:var(--text);
    font-family:var(--serif); font-size:28px; font-weight:600; line-height:1.15;
  }
  .project-name input::placeholder{ color:var(--faint); font-weight:500; }
  .project-name input:focus{ outline:none; border-bottom-color:var(--gold); }
  .project-name input:disabled{ opacity:.55; cursor:not-allowed; }

  .assistant{
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:12px; margin:0 30px;
  }
  body.no-ai [data-ai-only]{ display:none !important; }
  .no-ai-note{
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:12px 16px; margin:0 30px 12px; color:var(--muted); font-size:13px;
  }
  .assistant-head{
    display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;
  }
  .assistant-head b{
    color:var(--gold-2); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  }
  .ai-tools{ display:flex; align-items:center; gap:8px; }
  .ai-tools select{
    background:var(--panel2); color:var(--text); border:1px solid var(--line);
    border-radius:6px; padding:3px 6px; font-size:11px;
  }
  .assistant-model{
    font-size:10.5px; color:var(--faint); background:var(--panel2);
    border:1px solid var(--line); border-radius:99px; padding:2px 9px;
    white-space:nowrap;
  }
  .assistant-model.on{ color:var(--ok); border-color:rgba(111,191,143,.45); }
  .assistant textarea{
    width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--text);
    border-radius:8px; padding:9px 11px; font-family:var(--sans);
    font-size:12.5px; line-height:1.45; resize:vertical;
  }
  .assistant textarea:focus{ outline:none; border-color:var(--gold); }
  .ai-image-attach{
    display:flex; align-items:center; gap:8px; margin-top:8px;
    background:var(--panel2); border:1px solid var(--line); border-radius:8px;
    padding:6px 8px; font-size:11.5px; color:var(--text);
  }
  .ai-image-attach img{
    width:34px; height:34px; object-fit:cover; border-radius:6px; flex:none;
    border:1px solid var(--line);
  }
  .ai-image-attach span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ai-image-attach button{ flex:none; }
  .ai-buttons{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .ai-buttons > button{
    flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center;
    gap:6px; white-space:nowrap;
  }
  .ai-buttons > button:disabled{ opacity:.5; cursor:default; }
  .ai-buttons svg{ width:15px; height:15px; flex:none; }
  .ai-buttons .ai-spacer{ flex:1; }
  .addbar .ai-drop-menu{ left:auto; right:0; }
  .actions .ai-drop-menu{ left:auto; right:0; min-width:120px; }
  .actions .ai-drop-menu button{ justify-content:center; }
  .ai-drop{ position:relative; display:inline-flex; }
  .ai-drop-btn{
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  }
  .ai-drop-btn .caret{ font-size:9px; opacity:.7; }
  .ai-drop-menu{
    position:absolute; top:calc(100% + 4px); left:0; min-width:240px; z-index:50;
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:6px; display:none; flex-direction:column; gap:2px;
    box-shadow:0 14px 34px rgba(0,0,0,.28);
  }
  .ai-drop.open .ai-drop-menu{ display:flex; }
  .ai-drop-menu button{
    display:flex; align-items:center; gap:8px; padding:8px 10px; width:100%;
    background:transparent; border:0; color:var(--text); font-size:12px;
    border-radius:7px; cursor:pointer; text-align:left; white-space:nowrap;
  }
  .ai-drop-menu button:hover{ background:var(--panel2); }
  .ai-drop-menu button:disabled{ opacity:.5; cursor:default; }
  .ai-drop-menu svg{ width:14px; height:14px; flex:none; }
  #s-title{ margin-bottom:30px; }
  .budget-hint{ font-size:10px; color:var(--faint); margin:2px 0 4px; }
  .modal-overlay{
    position:fixed; inset:0; background:rgba(8,12,22,.72);
    display:flex; align-items:center; justify-content:center; z-index:60;
  }
  .modal{
    width:min(92vw, 380px); background:var(--panel); border:1px solid var(--line);
    border-radius:14px; padding:26px;
  }
  .modal h3{
    margin:0 0 10px; font-family:var(--serif); color:var(--gold-2); font-size:20px;
  }
  .modal p{ margin:0 0 8px; color:var(--text); font-size:13px; line-height:1.6; }
  .modal a{ color:var(--gold-2); text-decoration:none; }
  .modal .contact-line{ color:var(--gold-2); font-weight:800; }
  .modal-wide{ width:min(94vw, 760px); max-height:82vh; overflow:auto; }
  .quote-table{ width:100%; border-collapse:collapse; font-size:12px; }
  .quote-table th{
    text-align:left; color:var(--gold-2); font-size:10px; letter-spacing:.08em;
    text-transform:uppercase; padding:4px 6px;
  }
  .quote-table td{ padding:4px 6px; border-top:1px solid var(--line); }
  .quote-table input{
    width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--text);
    border-radius:6px; padding:5px 7px; font-size:12px;
  }
  .import-row{ margin-top:8px; }

  /* ---------- Mòbil (al final per sobreescriure la base) ---------- */
  @media (max-width: 900px){
    .topbar{ flex-wrap:wrap; gap:8px; padding:8px 10px; }
    .topbar{ z-index:60; }
    .topbar .brand .sub{ display:none; }
    .save-status{ margin-left:auto; font-size:9.5px; }
    .topbar-menu{
      display:inline-flex; align-items:center; justify-content:center;
      width:38px; height:38px; padding:0; font-size:18px;
    }
    .actions{
      position:fixed; top:0; right:0; bottom:0; width:min(82vw,330px); z-index:50;
      display:flex; flex-direction:column; align-items:stretch; gap:8px;
      justify-content:flex-start;
      background:var(--panel); border:0; border-left:1px solid var(--line);
      padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));
      box-shadow:0 16px 38px rgba(0,0,0,.3);
      transform:translateX(100%); transition:transform .3s ease;
      overflow-y:auto;
    }
    .actions.open{ transform:translateX(0); }
    .actions .drawer-top{ display:flex; justify-content:flex-end; margin-bottom:8px; }
    .actions .drawer-close{
      width:38px; height:38px; border:1px solid var(--line); border-radius:9px;
      background:transparent; color:var(--text); font-size:18px; cursor:pointer; flex:none;
      display:inline-flex; align-items:center; justify-content:center; line-height:1; padding:0;
    }
    .actions .drawer-close:hover{ border-color:var(--gold); color:var(--gold-2); }
    .menu-overlay{
      position:fixed; inset:0; background:rgba(8,12,22,.6); z-index:45;
      opacity:0; pointer-events:none; transition:opacity .3s ease;
    }
    .menu-overlay.open{ opacity:1; pointer-events:auto; }
    .actions > button{ width:100%; }
    .actions .ai-drop{ width:100%; display:flex; flex-wrap:wrap; }
    .actions .ai-drop #btn-pdf{ flex:1 1 auto; }
    .actions .ai-drop #btn-export{ flex:none; padding:0 16px; }
    .actions .ai-drop #btn-actions{ flex:1 1 auto; }
    .actions .ai-drop #btn-actions-toggle{ flex:none; padding:0 16px; }
    .actions .ai-drop-menu{
      position:static; display:none; width:100%; box-shadow:none; margin-top:2px;
      flex:0 0 100%; flex-direction:column;
    }
    .actions .ai-drop.open .ai-drop-menu{ display:flex; }
    .layout{
      flex-direction:column; height:auto; overflow:visible;
      padding:10px; gap:12px;
    }
    .left, .center, .right{
      flex:1 1 auto !important; width:100% !important; height:auto;
    }
    .right{ height:78vh; min-height:420px; }
    .divider{ display:none !important; }
    .panel{ border-radius:14px; }
    #items{ gap:12px; padding:12px; }
    #preview-wrap{ padding:10px; }
    .preview-toolbar{ display:none; }
    #preview-wrap{ display:none; }
    .preview-mobile{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:14px;
      flex:1;
      padding:24px;
      text-align:center;
    }
    .preview-mobile p{
      font-size:12px;
      color:var(--muted);
      max-width:280px;
      line-height:1.5;
      margin:0;
    }
    .preview-mobile button{ padding:12px 22px; font-size:13px; }
    .totalsbar{
      display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
      gap:8px 16px;
      width:auto; margin:0 12px 15px; border-radius:12px;
      padding:10px 14px;
      padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
      bottom:0;
    }
    .totalsbar .cell{ flex:0 0 76px; text-align:center; }
    .totalsbar .lbl{ font-size:9px; margin-bottom:2px; }
    .totalsbar .val{ font-size:13px; }
    .totalsbar .val.gold{ font-size:17px; }
    .totalsbar input{ width:72px; padding:5px 4px; font-size:12px; margin:0 auto; }
    .topbar .editor-badge{ display:none; }
    .app-footer{ justify-content:center; flex-wrap:wrap; padding:5px 8px; font-size:10.5px; }
    .app-footer #ft-offline{ margin-right:0; flex:0 0 100%; text-align:center; }
    .app-footer select{ padding:0 4px; font-size:10px; height:23px; }
    .app-footer button, .app-footer a.small{ padding:3px 8px; font-size:10px; }
  }

  @media (max-width: 640px){
    .item{ grid-template-columns:1fr !important; gap:8px; padding:10px; }
    .item-thumb-wrap{ flex-direction:row; align-items:center; }
    .item-thumb-wrap .item-thumb{ width:64px; height:64px; flex:none; }
    .item-thumb-wrap .item-polish{ width:auto; }
    .item-nums{ grid-template-columns:1fr 1fr; gap:6px; }
    .item-move-bar{
      grid-column:auto; grid-row:auto;
      flex-direction:row; justify-content:flex-end; align-self:stretch;
      border-top:1px solid var(--line); margin-top:4px; padding-top:6px;
    }
    .assistant .ai-buttons{ flex-direction:column; }
    .ai-buttons > button, .ai-buttons .ai-drop{ width:100%; }
    .addbar{ flex-wrap:wrap; }
    .frame{ max-height:230px; }
  }

  /* ---------- Chatbot d'onboarding ---------- */
  .assistant-fab{
    position:fixed; right:18px; bottom:74px; z-index:60;
    width:46px; height:46px; border-radius:50%; border:0;
    background:var(--gold); color:#10141B; font-weight:800; font-size:20px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.35);
  }
  .assistant-fab:hover{ background:var(--gold-2); }
  .assistant-panel{
    position:fixed; right:18px; bottom:126px; z-index:61;
    width:min(360px, calc(100vw - 36px)); height:min(460px, calc(100vh - 160px));
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 18px 44px rgba(0,0,0,.4);
  }
  .assistant-panel[hidden]{ display:none; }
  .assistant-panel-head{
    display:flex; align-items:center; gap:6px; padding:10px 12px;
    border-bottom:1px solid var(--line);
  }
  .assistant-panel-head b{
    flex:1; color:var(--gold-2); font-size:12px;
    letter-spacing:.08em; text-transform:uppercase;
  }
  .assistant-msgs{
    flex:1; overflow:auto; padding:12px; display:flex;
    flex-direction:column; gap:8px;
  }
  .assistant-msg{
    max-width:88%; padding:8px 11px; border-radius:12px;
    font-size:13px; line-height:1.5; white-space:pre-wrap;
  }
  .assistant-msg.user{ align-self:flex-end; background:var(--gold); color:#10141B; }
  .assistant-msg.bot{ align-self:flex-start; background:var(--panel2); border:1px solid var(--line); color:var(--text); }
  .assistant-msg.bot.typing{ color:var(--muted); font-style:italic; }
  .assistant-msg p{ margin:0 0 6px; }
  .assistant-msg p:last-child{ margin-bottom:0; }
  .assistant-msg ol, .assistant-msg ul{ margin:4px 0 8px; padding-left:20px; }
  .assistant-msg li{ margin:3px 0; }
  .assistant-msg code{
    background:rgba(13,19,34,.55); border:1px solid var(--line); border-radius:5px;
    padding:1px 5px; font-size:12px; font-family:Consolas,Menlo,monospace;
  }
  .assistant-msg a{ color:var(--gold-2); }
  .assistant-sugg{
    display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 8px;
  }
  .assistant-sugg button{
    font-size:11.5px; padding:4px 9px; border-radius:99px;
    background:var(--panel2); border:1px solid var(--line); color:var(--text); cursor:pointer;
  }
  .assistant-sugg button:hover{ border-color:var(--gold); color:var(--gold-2); }
  .assistant-input{
    display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--line);
  }
  .assistant-input input{ flex:1; min-width:0; }
  .assistant-input button{ flex:none; }