/* =========================================================
   SELF-CONTAINED TOOL WORKSPACE BASE
   This tool does not depend on universal-tool-layout.css.
   Keep these primitives inside this tool's own CSS.
   ========================================================= */

.universal-tool-section{
    min-height:calc(100vh - 190px);
    padding:16px 0 30px;
    background:var(--paper,#eef8fe);
}



.universal-template-eyebrow{
    display:block;
    margin:0 0 4px;
    color:#21aeb4;
    font-size:10px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.universal-tool-canvas-card{
    min-width:0;
    border:1px solid #d3e0e8;
    border-radius:15px;
    background:#fff;
    box-shadow:0 8px 24px rgba(18,53,82,.055);
}

.v2-tool-header .v2-favourite-button{
    width:auto;
    min-width:0;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 16px;
    border:1px solid #cbd8e2;
    border-radius:10px;
    background:#ffffff;
    color:#38566d;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
}

.v2-tool-header .v2-favourite-button span{
    display:inline;
}

.v2-tool-header .v2-favourite-button[aria-pressed="true"]{
    border-color:#75c89c;
    background:#edf9f2;
    color:#087747;
}

@media(max-width:700px){
    
}

.itw-section{background:var(--paper,#eef8fe)}
.itw-universal-grid{
    display:grid;
    grid-template-columns:255px minmax(0,1fr) 300px;
    gap:14px;
    align-items:stretch;
}
.itw-panel,
.itw-preview-card{
    min-width:0;
    background:#fff;
    border:1px solid #d3e0e8;
    border-radius:15px;
    box-shadow:0 8px 24px rgba(18,53,82,.055);
}
.itw-panel{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.itw-panel-heading h2,
.itw-preview-head h2,
.itw-output-section h3{
    margin:4px 0 0;
    color:#102b40;
    font-family:Georgia,"Times New Roman",serif;
}
.itw-panel-heading h2,.itw-preview-head h2{font-size:22px}
.itw-output-section h3{font-size:18px}
.itw-panel label{
    display:grid;
    gap:6px;
    color:#17344c;
    font-size:11px;
    font-weight:850;
}
.itw-panel input:not([type=checkbox]):not([type=range]),
.itw-panel textarea{
    width:100%;
    border:1px solid #cbd9e3;
    border-radius:8px;
    background:#fff;
    color:#142b3d;
    padding:9px 10px;
    font:inherit;
}
.itw-panel textarea{resize:vertical;min-height:70px}
.itw-panel input[type=color]{height:40px;padding:3px}
.itw-panel input[type=range]{
    width:100%;
    margin:0;
    padding:0;
    accent-color:#3b82f6;
}
.itw-range span{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.itw-range output{color:#2f73df;font-size:10px;font-weight:900}
.itw-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.itw-check{
    min-height:40px;
    display:flex!important;
    grid-template-columns:none!important;
    flex-direction:row!important;
    align-items:center;
    gap:8px!important;
    padding:8px 10px;
    border:1px solid #d7e3ec;
    border-radius:8px;
    background:#f7fafc;
}
.itw-check input{width:16px!important;height:16px;accent-color:#3b82f6}
.itw-drop{
    min-height:145px;
    display:flex!important;
    flex-direction:column!important;
    align-items:center;
    justify-content:center;
    gap:7px!important;
    padding:18px!important;
    border:1px dashed #9dbcd6!important;
    border-radius:11px;
    background:#f6fafe;
    text-align:center;
    cursor:pointer;
}
.itw-drop:hover{border-color:#3b82f6!important;background:#eef6ff}
.itw-upload-icon{
    width:44px;height:44px;
    display:grid;place-items:center;
    border-radius:10px;
    background:#e6f0ff;
    color:#2971eb;
    font-size:10px;
    font-weight:900;
}
.itw-drop strong{color:#102b40;font-size:12px}
.itw-drop small{color:#6f8394;font-size:9px;line-height:1.4}
.itw-status{
    margin:0;
    color:#667e90;
    font-size:10px;
    line-height:1.4;
    overflow-wrap:anywhere;
}
.itw-section-block{
    display:grid;
    gap:10px;
    padding-top:13px;
    border-top:1px solid #e0e9f0;
}
.itw-block-title{display:grid;gap:3px}
.itw-block-title p{margin:0;color:#6f8394;font-size:9px;line-height:1.35}
.itw-section-block fieldset{
    display:grid;
    gap:10px;
    margin:0;
    padding:0;
    border:0;
}
.itw-section-block fieldset:disabled{opacity:.45}
.itw-left-panel .button{
    min-height:38px;
    border:1px solid #b8cee1;
    border-radius:8px;
    background:#fff;
    color:#225d95;
    font:800 10px inherit;
}
.itw-preview-card{
    min-height:650px;
    padding:18px;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:14px;
}
.itw-preview-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}
.itw-preview-head p{margin:5px 0 0;color:#6b8194;font-size:10px}
.itw-preview-head .button{
    min-height:38px;
    padding:0 14px;
    border:1px solid #a9bfd2;
    border-radius:8px;
    background:#fff;
    color:#235f9f;
    font-weight:850;
}
.itw-canvas-shell{
    position:relative;
    min-height:520px;
    height:min(70vh,760px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:14px;
    border:1px dashed #bfd3e5;
    border-radius:12px;
    background-color:#f8fafc;
    background-image:
        linear-gradient(45deg,#e4ebf1 25%,transparent 25%),
        linear-gradient(-45deg,#e4ebf1 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#e4ebf1 75%),
        linear-gradient(-45deg,transparent 75%,#e4ebf1 75%);
    background-size:18px 18px;
    background-position:0 0,0 9px,9px -9px,-9px 0;
}
.itw-canvas-shell canvas{
    display:none;
    flex:0 0 auto;
    width:auto;
    max-width:none;
    max-height:none;
    object-fit:initial;
    box-shadow:0 8px 24px rgba(15,23,42,.18);
}
.itw-canvas-shell.ready canvas{display:block}
.itw-canvas-shell.ready #itw-empty{display:none}
#itw-empty{
    display:grid;
    gap:5px;
    text-align:center;
    color:#7a879b;
    font-size:11px;
}
#itw-empty strong{color:#17344c;font-size:14px}
.itw-canvas-shell canvas.brush-active{cursor:crosshair;touch-action:none}
.itw-safe-spacing{display:block;color:#66758d;font-size:9px;line-height:1.4;margin-top:-2px}
.itw-right-panel{gap:12px}
.itw-watermark-section,.itw-text-section{padding-top:11px}
.itw-position-grid{align-items:end}
.itw-shadow-check{min-height:40px}
.itw-output-section{
    margin-top:auto;
    display:grid;
    gap:8px;
    padding-top:14px;
    border-top:1px solid #dde8ef;
}
.itw-output-section .button{
    width:100%;
    min-height:42px;
    border-radius:8px;
    background:#3b82f6;
    border:1px solid #3b82f6;
    color:#fff;
    font-weight:900;
}
.itw-output-section .button:disabled{
    background:#d7e4f5;
    border-color:#d7e4f5;
    color:#7a8ca0;
    cursor:not-allowed;
}
.tool-output-notice{margin:0}
@media(max-width:1180px){
    .itw-universal-grid{grid-template-columns:230px minmax(0,1fr)}
    .itw-right-panel{
        grid-column:1/-1;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-items:start;
    }
    .itw-right-panel .itw-panel-heading,
    .itw-right-panel .itw-output-section{grid-column:1/-1}
}
@media(max-width:820px){
    .itw-universal-grid{grid-template-columns:1fr}
    .itw-right-panel{grid-column:auto;display:flex}
    .itw-canvas-shell{min-height:400px;height:60vh}
}
@media(max-width:520px){
    .itw-two{grid-template-columns:1fr}
    .itw-preview-head{display:grid}
    .itw-canvas-shell{min-height:300px;height:52vh}
}

.itw-percent-input{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:7px;
}
.itw-percent-input b{
    color:#58738a;
    font-size:10px;
    font-weight:900;
}



/* Internal tool sections use normal headings, not system eyebrows. */
.itw-section-title{
    margin:0;
    color:#102b40;
    font-family:Georgia,"Times New Roman",serif;
    font-size:17px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:0;
    text-transform:none;
}