*{margin:0;padding:0;box-sizing:border-box}
    body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#1a1a2e;color:#eee;min-height:100vh}
    .page{min-height:100vh;display:flex;flex-direction:column;padding:20px}
    .container{max-width:1500px;margin:0 auto;display:flex;gap:22px;flex-wrap:wrap;justify-content:center;align-items:flex-start;flex:1}
    h1{text-align:center;margin-bottom:10px;color:#c41e3a;width:100%}
    .subtitle{text-align:center;margin-bottom:20px;color:#888;font-size:12px;width:100%}
    a{color:#bbb}a:hover{color:#fff}

    /* Panels */
    .panel{background:#16213e;padding:18px;border-radius:10px}
    .form-section{width:360px}
    .batch-section{width:480px}
    .preview-section{display:flex;flex-direction:column;align-items:center}
    @media (max-width: 1200px){.form-section,.batch-section{width:min(560px,100%)}}

    /* Inputs */
    .form-group{margin-bottom:12px}
    label{display:block;margin-bottom:5px;font-weight:700;color:#aaa;font-size:12px}
    input[type="text"], input[type="number"], textarea, select{
      width:100%;padding:8px;border:2px solid #333;border-radius:6px;background:#0f0f1a;color:#fff;font-size:13px
    }
    textarea{resize:vertical;min-height:55px}
    input:focus,textarea:focus,select:focus{outline:none;border-color:#c41e3a}
    select{cursor:pointer;color:#fff;background:#0f0f1a;appearance:none}
    input[type="file"]{display:none}
    .file-label{display:block;padding:8px 12px;background:#c41e3a;color:#fff;border-radius:6px;cursor:pointer;text-align:center;transition:background .2s;font-size:13px}
    .file-label:hover{background:#a01830}

    /* Buttons */
    .btn{width:100%;padding:10px;background:#c41e3a;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;transition:background .2s;margin-top:8px}
    .btn:hover{background:#a01830}
    .btn:disabled{opacity:.45;cursor:not-allowed}
    .btn-secondary{background:#333}.btn-secondary:hover{background:#444}
    .btn-tertiary{background:#1f2937}.btn-tertiary:hover{background:#263244}
    .btn-inline{padding:7px 10px;border-radius:8px;border:1px solid #333;background:#0f0f1a;color:#eee;cursor:pointer;font-size:12px}
    .btn-inline:hover{border-color:#c41e3a}
    .btn-inline:disabled{opacity:.45;cursor:not-allowed}
    .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .help{font-size:11px;color:#888;line-height:1.35}
    .muted{color:#888}
    .section-separator{border-top:1px solid #333;margin:14px 0;padding-top:14px}
    .section-title{font-size:11px;color:#666;text-transform:uppercase;margin-bottom:10px;letter-spacing:1px}
    .hidden{display:none !important}

    /* Status */
    .status-message{padding:8px;border-radius:6px;margin-bottom:10px;font-size:11px;text-align:center}
    .status-success{background:rgba(46,139,87,.2);color:#2e8b57}
    .status-error{background:rgba(196,30,58,.2);color:#ff9fb2}
    .status-loading{background:rgba(212,160,23,.2);color:#d4a017}

    /* Card preview */
    .card{width:375px;height:525px;background:#fff;border-radius:15px;border:8px solid #c41e3a;position:relative;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
    .card.phase-command{border-color:#d4a017}
    .card.phase-move{border-color:#2e8b57}
    .card.phase-shoot{border-color:#1e90ff}
    .card.phase-fight{border-color:#c41e3a}
    .card.type-enhancement{border-color:#d4a017}
    .card.type-rules{border-color:#6b6b6b}
    .card-header{padding:10px 15px;min-height:100px;background:transparent}
    .card-type-row{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:#333;margin-bottom:5px}
    .card-title{font-size:24px;font-weight:900;color:#000;line-height:1.1;text-transform:uppercase;margin-bottom:5px;max-width:280px}
    .card-phase{font-size:14px;font-weight:800}
    .card-phase.phase-command{color:#d4a017}
    .card-phase.phase-move{color:#2e8b57}
    .card-phase.phase-shoot{color:#1e90ff}
    .card-phase.phase-fight{color:#c41e3a}
    .card-phase.type-enhancement{color:#d4a017}
    .card-phase.type-rules{color:#6b6b6b}
    .card-cost{
      position:absolute;top:55px;right:15px;min-width:50px;height:30px;padding:0 8px;border:2px solid #c41e3a;border-radius:6px;
      display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#c41e3a;background:transparent;
      transition:border-color .2s,color .2s
    }
    .card-cost.phase-command{border-color:#d4a017;color:#d4a017}
    .card-cost.phase-move{border-color:#2e8b57;color:#2e8b57}
    .card-cost.phase-shoot{border-color:#1e90ff;color:#1e90ff}
    .card-cost.phase-fight{border-color:#c41e3a;color:#c41e3a}
    .card-cost.type-enhancement{border-color:#d4a017;color:#d4a017}
    .card-image-container{
      flex:1;margin:5px 12px;border:3px solid #333;border-radius:10px;overflow:hidden;background:#ddd;display:flex;
      align-items:center;justify-content:center;position:relative
    }
    .card-image-container.has-image{background-size:cover;background-position:center;background-repeat:no-repeat}
    .card-image-placeholder{color:#999;font-size:14px}
    .card-text-container{margin:5px 12px 12px;padding:12px;border:3px solid #333;border-radius:10px;background:transparent;min-height:70px}
    .card-effect-title{font-weight:900;font-size:15px;color:#000;text-align:center;margin-bottom:4px}
    .card-effect-text{font-size:13px;color:#333;text-align:center;line-height:1.3}

    #offscreen{position:absolute;left:-99999px;top:-99999px;width:1px;height:1px;overflow:hidden}
    #exportCanvas{display:none}
    .preview-label{margin-top:15px;color:#888;font-size:12px}

    /* Batch */
    .batch-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
    .batch-header h2{margin:0;font-size:14px;color:#ddd;letter-spacing:.5px;text-transform:uppercase}
    .chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid #333;background:#0f0f1a;color:#aaa;font-size:12px}
    .chip b{color:#fff}
    .batch-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
    .batch-list{margin-top:12px;display:flex;flex-direction:column;gap:10px;max-height:640px;overflow:auto;padding-right:4px}
    .batch-item{
      border:1px solid #333;border-radius:12px;background:#0f0f1a;padding:10px;
      display:flex;gap:10px;align-items:flex-start
    }
    .batch-item.drag-over{outline:2px dashed #c41e3a;outline-offset:3px}
    .handle{
      width:18px;min-width:18px;height:52px;border-radius:10px;border:1px solid #333;background:#0b0b12;
      display:flex;align-items:center;justify-content:center;color:#777;cursor:grab;user-select:none
    }
    .handle:active{cursor:grabbing}
    .check{margin-top:4px;transform:scale(1.15)}
    .col{min-width:0;flex:1;display:flex;flex-direction:column;gap:8px}
    .topline{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
    .titleline{min-width:0}
    .batch-title{font-weight:900;font-size:12px;text-transform:uppercase;color:#fff;line-height:1.15}
    .batch-meta{font-size:11px;color:#aaa;margin-top:3px}
    .actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
    .miniwrap{display:flex;gap:12px;align-items:flex-start;flex-wrap:nowrap}
    .mini{
      width:118px;height:168px;border:2px solid #333;border-radius:14px;background:#111;flex:0 0 auto;
      background-size:cover;background-position:center;background-repeat:no-repeat;
      display:flex;align-items:center;justify-content:center;color:#999;font-size:10px;position:relative;overflow:hidden;
      box-shadow:0 6px 18px rgba(0,0,0,.35)
    }
    .mini.drop{outline:2px dashed #d4a017;outline-offset:-4px}
    .mini .warn{position:absolute;top:6px;left:6px;font-size:13px;color:#ffcccb;text-shadow:0 1px 2px rgba(0,0,0,.4)}
    .inline-grid{display:grid;grid-template-columns: 1fr 1fr;gap:8px}
    .inline-grid .form-group{margin:0}
    .inline-sm{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:8px}
    .inline-sm .form-group{margin:0}
    .small{font-size:11px}
    .badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid #333;background:#0b0b12;color:#aaa;font-size:11px}
    .badge.ok{color:#b8ffd8}
    .badge.warn{color:#ffb4b4}
    .divider{height:1px;background:#222;margin:4px 0}

    /* Image library */
    .img-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .img-grid{display:grid;grid-template-columns: repeat(5, 1fr);gap:8px;margin-top:10px}
    .img-tile{
      border:1px solid #333;border-radius:12px;overflow:hidden;background:#0f0f1a;position:relative;aspect-ratio:1/1;cursor:grab;
    }
    .img-tile:active{cursor:grabbing}
    .img-tile .thumb{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
    .img-tile .cap{position:absolute;left:0;right:0;bottom:0;padding:6px;background:linear-gradient(180deg, transparent, rgba(0,0,0,.8));
      font-size:10px;color:#eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .img-tile .x{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
      background:rgba(0,0,0,.45);color:#fff;font-size:12px;line-height:16px;text-align:center;cursor:pointer}
    .img-grid-empty{font-size:11px;color:#777;margin-top:8px}

    /* Sheet settings */
    .sheet-settings{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:8px}
    .sheet-settings .form-group{margin:0}
  
    /* ---- UI v3 (top editor + fullwidth batch) ---- */
    .layout-v3{flex-direction:column;gap:16px;align-items:stretch;max-width:none;width:100%}
    .container.layout-v3{max-width:none;margin:0;width:100%}
    .editor-row{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
    .editor-row .form-section{width:520px}
    .editor-row .preview-section{flex:1;min-width:420px}
    @media (max-width: 1100px){
      .editor-row .form-section{width:100%}
      .editor-row .preview-section{width:100%}
    }
    #projectBar{width:100%;max-width:none;margin:0 0 16px}
    .bar-row{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
    .bar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    .batch-section.fullwidth{width:100%;max-width:none;margin:0}
    .fullwidth-list{max-height:none;overflow:visible}
    .img-grid{grid-template-columns:repeat(10,1fr)}
    @media (max-width: 1100px){ .img-grid{grid-template-columns:repeat(6,1fr)} }
    @media (max-width: 700px){ .img-grid{grid-template-columns:repeat(3,1fr)} }


    /* card config row */
    .row-2 > div .form-group{margin-bottom:0}


    .icon-btn{min-width:0;width:64px;flex:0 0 auto;font-size:18px;font-weight:900;padding:10px 0}
    @media (max-width: 500px){ .icon-btn{width:52px;font-size:16px} }


    /* --- Force main buttons side-by-side --- */
    .btn-row{display:flex;gap:10px;align-items:stretch;width:100%;margin:10px 0}
    .btn-row > button{flex:1;min-width:0;width:auto !important;white-space:nowrap}


    /* ---- Layout fix: 2-col editor + full-width batch ---- */
    .container{max-width:none !important;margin:0 !important;width:100% !important;justify-content:stretch !important}
    .editor-row{width:100% !important;justify-content:space-between !important;align-items:stretch !important}
    .editor-row .form-section{width:520px !important;flex:0 0 520px !important}
    .editor-row .preview-section{flex:1 1 auto !important;min-width:520px !important;align-items:stretch !important}
    @media (max-width: 1100px){
      .editor-row .form-section{width:100% !important;flex:1 1 100% !important}
      .editor-row .preview-section{width:100% !important;min-width:0 !important}
    }

    .batch-section.fullwidth{width:100% !important;max-width:none !important;margin:0 !important}

    /* ---- Batch cosmetics / spacing ---- */
    .batch-controls{justify-content:flex-start !important}
    .img-toolbar{display:flex !important;gap:10px !important;flex-wrap:wrap !important;justify-content:flex-start !important}
    .img-toolbar input[type="text"]{flex:1 1 260px !important}
    .batch-list{width:100% !important}



/* ---- Layout: editor top 2 cols, batch below full width ---- */
.container.layout-v3{max-width:none !important;margin:0 !important;width:100% !important}
.editor-top{display:flex !important;gap:22px !important;align-items:flex-start !important;justify-content:space-between !important;width:100% !important}
.editor-top .form-section{flex:0 0 520px !important;width:520px !important}
.editor-top .preview-section{flex:1 1 auto !important;min-width:520px !important}
.batch-pro{width:100% !important}
@media (max-width:1100px){
  .editor-top{flex-wrap:wrap !important}
  .editor-top .form-section{flex:1 1 100% !important;width:100% !important}
  .editor-top .preview-section{min-width:0 !important;width:100% !important}
}
.btn-row{display:flex !important;gap:10px !important;align-items:stretch !important;width:100% !important;margin-top:10px !important}
.btn-row > button{flex:1 !important;min-width:0 !important;width:auto !important;white-space:nowrap !important}


/* --- Collapsible Batch Pro --- */
#batchDetails{width:100%;margin-top:10px}
#batchDetails > summary.batch-summary{list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
#batchDetails > summary::-webkit-details-marker{display:none}
.batch-toggle-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:inherit;border-radius:8px;padding:6px 10px;cursor:pointer}

/* --- Inline edit cards grid (3 cols responsive) --- */
#batchList{display:grid !important;grid-template-columns:repeat(3, minmax(280px, 1fr)) !important;gap:14px !important;align-items:start}
@media (max-width: 1100px){ #batchList{grid-template-columns:repeat(2, minmax(260px, 1fr)) !important;} }
@media (max-width: 740px){ #batchList{grid-template-columns:1fr !important;} }

/* reduce visual noise inside inline editors */
#batchList label{display:none !important;}
#batchList .form-group{margin-bottom:8px !important;}
#batchList input, #batchList textarea, #batchList select{padding-top:8px !important;padding-bottom:8px !important;}

/* visually hidden labels (accessibility) */
.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;}



/* --- Mini card thumb responsive --- */
@media (max-width: 740px){
  .miniwrap{flex-wrap:wrap}
  .mini{width:92px;height:132px}
}

/* ===== Footer ===== */
.site-footer{
    margin-top: 60px;
    padding: 28px 0 18px;
    border-top: 1px solid #333;
    color: #888;
}

.site-footer .footer-wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-footer .footer-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    padding-bottom: 18px;
}

.site-footer .footer-col h3{
    margin: 0 0 10px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa;
}

.site-footer .footer-col p{
    color: #777;
    font-size: 13px;
    line-height: 1.5;
}

.site-footer .footer-links{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-footer a{
    color: #888;
    text-decoration: none;
}

.site-footer a:hover{
    color: #c41e3a;
}

.site-footer .footer-bottom{
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #666;
}

.site-footer .footer-bottom .sep{
    opacity: .6;
}