:root{--bc-blue:#3f7ff0;--bc-navy:#123f5e;--bc-teal:#28b9bd}.bc-hero{padding:27px 0;border-bottom:1px solid var(--line);background:#fff}.bc-hero-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.bc-title{display:flex;align-items:center;gap:12px}.bc-title h1{margin:5px 0 3px;font-family:Georgia,serif;font-size:42px;line-height:1}.bc-title span{padding:5px 8px;border:1px solid #9fdfbc;border-radius:7px;background:#eefaf3;color:#087d50;font-size:11px;font-weight:900}.bc-hero p{margin:6px 0;color:#526c7e}.bc-app-shell{background:#edf6fc}.bc-app{padding:18px 0 60px;background:#edf6fc}.bc-steps{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:14px;padding:8px;border:1px solid #d6e3eb;border-radius:15px;background:#fff}.bc-steps button{padding:11px;border:0;border-radius:10px;background:transparent;color:#536d80;font-weight:850}.bc-steps button:first-child{background:var(--bc-blue);color:#fff}.bc-workspace{display:grid;grid-template-columns:230px minmax(660px,1fr) 255px;gap:14px}.bc-panel,.bc-stage-panel{border:1px solid #d6e3eb;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(18,63,94,.06)}.bc-panel{padding:17px}.bc-panel h2{margin:0 0 15px;font-size:19px}.bc-panel h3{margin:14px 0 10px}.bc-panel button,.bc-upload{width:100%;display:flex;align-items:center;justify-content:center;margin:7px 0;padding:11px;border:1px solid #c7d9e7;border-radius:9px;background:#fff;color:#123f5e;font-weight:800;cursor:pointer}.bc-panel button.is-primary,.bc-production button.is-primary{border-color:var(--bc-blue);background:var(--bc-blue);color:#fff}.bc-upload input{display:none}.bc-panel label{display:grid;gap:5px;margin:10px 0;color:#36546a;font-size:12px;font-weight:800}.bc-panel input,.bc-panel select,.bc-production input{min-width:0;padding:9px;border:1px solid #cbdce8;border-radius:8px;background:#fff}.bc-private{color:#6c8394;font-size:11px}.bc-stage-panel{min-width:0;padding:12px}.bc-toolbar{display:flex;align-items:center;gap:5px;padding:8px;border:1px solid #d9e5ed;border-radius:11px;background:#f8fbfd}.bc-toolbar button{padding:9px 12px;border:0;border-radius:7px;background:transparent;color:#294a63;font-weight:750}.bc-toolbar button.is-active{background:#e9f2ff;color:var(--bc-blue)}.bc-toolbar>span{flex:1}.bc-canvas-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:32px 12px 18px}.bc-canvas-wrap article>strong{display:block;margin-bottom:9px;text-align:center;font-size:12px}.bc-card-shell{position:relative;padding:8px;border:1px dashed #6c9ff5;background:#f6f9fb;box-shadow:0 14px 28px rgba(20,54,80,.12)}.bc-card-shell:after{content:"";position:absolute;inset:17px;border:1px dashed rgba(39,192,189,.7);pointer-events:none}.bc-card{display:block;width:100%;aspect-ratio:85/55;background:#fff;touch-action:none}.bc-card [data-id]{cursor:move}.bc-card .is-selected{filter:drop-shadow(0 0 5px #3f7ff0)}.bc-guide{display:flex;justify-content:center;gap:25px;color:#60798b;font-size:11px}.bc-guide span:before{content:"";display:inline-block;width:22px;margin-right:6px;border-top:2px dashed var(--bc-teal)}.bc-properties>p{margin:-8px 0 15px;color:#72899a;font-size:12px}.bc-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bc-property-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:15px}.bc-property-actions .is-danger{color:#ad2525}.bc-production{display:grid;grid-template-columns:auto repeat(5,minmax(105px,auto)) minmax(180px,1fr) auto auto;align-items:center;gap:14px;margin-top:14px;padding:16px 20px;border:1px solid #d6e3eb;border-radius:16px;background:#fff}.bc-production>div:first-child{display:grid}.bc-production label{display:flex;align-items:center;gap:5px;color:#3f5d72;font-size:12px;font-weight:800}.bc-production input[type=number]{width:58px}.bc-production input[type=color]{width:40px;height:34px;padding:3px}.bc-progress{display:grid;gap:5px}.bc-progress span{height:8px;border-radius:99px;background:#e2edf3}.bc-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--bc-blue),var(--bc-teal));transition:.3s}.bc-production button{padding:12px 15px;border:1px solid #bcd2e4;border-radius:9px;background:#fff;color:#123f5e;font-weight:850}.bc-access{margin-top:10px;padding:11px 15px;border:1px solid #f1b6b6;border-radius:10px;background:#fff1f1;color:#a22b2b;font-size:12px;font-weight:800}.bc-access.is-open{border-color:#a9e1c4;background:#eaf9f1;color:#087d50}@media(max-width:1180px){.bc-workspace{grid-template-columns:210px minmax(600px,1fr)}.bc-properties{grid-column:1/-1}.bc-production{grid-template-columns:repeat(4,1fr)}}@media(max-width:760px){.bc-hero{padding:22px 0}.bc-hero-inner{align-items:flex-start;flex-direction:column}.bc-title h1{font-size:34px}.bc-app{padding:12px}.bc-steps,.bc-workspace,.bc-canvas-wrap{grid-template-columns:1fr}.bc-production{grid-template-columns:1fr 1fr}.bc-production .bc-progress,.bc-production button{grid-column:1/-1}}

@media(max-width:760px){
    .bc-app,.bc-workspace,.bc-stage-panel,.bc-panel,.bc-canvas-wrap,.bc-canvas-wrap article{min-width:0;max-width:100%;box-sizing:border-box}
    .bc-toolbar{flex-wrap:wrap;max-width:100%;box-sizing:border-box}
    .bc-toolbar>span{display:none}
    .bc-toolbar>label{display:flex;align-items:center;gap:4px;width:100%;max-width:100%;margin-top:4px}
    .bc-toolbar select{min-width:0;max-width:100%}
    .bc-card-shell{min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden}
    .bc-guide{flex-wrap:wrap;gap:8px 14px}
    .bc-production{min-width:0;max-width:100%;box-sizing:border-box}
}

.bc-toolbar{display:grid;grid-template-columns:minmax(0,auto) minmax(260px,1fr) auto;gap:10px 18px}
.bc-toolbar-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.bc-toolbar-help{margin:0;align-self:center;color:#60798c;font-size:13px;line-height:1.35}
.bc-toolbar-help strong{color:#294a63}
.bc-zoom-control{display:flex;align-items:center;gap:4px;white-space:nowrap}
.bc-shape-menu{position:relative}
.bc-shape-menu summary{display:flex;align-items:center;gap:7px;padding:9px 12px;border:0;border-radius:7px;color:#294a63;font-weight:750;cursor:pointer;list-style:none;user-select:none}
.bc-shape-menu summary::-webkit-details-marker{display:none}
.bc-shape-menu[open] summary,.bc-shape-menu summary:hover{background:#e9f2ff;color:var(--bc-blue)}
.bc-shape-options{position:absolute;z-index:30;top:calc(100% + 7px);left:0;display:grid;grid-template-columns:repeat(2,minmax(112px,1fr));gap:5px;width:250px;padding:8px;border:1px solid #cbdce8;border-radius:11px;background:#fff;box-shadow:0 16px 35px rgba(18,63,94,.16)}
.bc-shape-options button{border:1px solid #d9e5ed;background:#f8fbfd;text-align:left;cursor:pointer}
.bc-shape-options button:hover{border-color:#8eb7ee;background:#e9f2ff;color:var(--bc-blue)}
@media(max-width:900px){.bc-toolbar{grid-template-columns:1fr}.bc-toolbar-help{order:3}.bc-zoom-control{order:2}.bc-shape-options{left:auto;right:0}}

/* Business-card canvas uses the same 850 x 550 coordinate system as its SVG viewBox. */
#bc-app .bc-card-shell {
    width: 100%;
    overflow: hidden;
}

#bc-app #bc-front,
#bc-app #bc-back {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 260px;
    aspect-ratio: 85 / 55;
    transform-origin: center center;
    touch-action: none;
}

#bc-app #bc-front [data-id],
#bc-app #bc-back [data-id] {
    pointer-events: all;
}

#bc-app #bc-front [data-shape],
#bc-app #bc-back [data-shape],
#bc-app #bc-front [data-shape] > *,
#bc-app #bc-back [data-shape] > * {
    cursor: move;
    pointer-events: all;
}

#bc-app #bc-front .is-selected,
#bc-app #bc-back .is-selected {
    filter: drop-shadow(0 0 7px #ffffff) drop-shadow(0 0 3px #1769ff);
}

#bc-app .bc-card.is-active-side {
    outline: 3px solid #3f7ff0;
    outline-offset: 5px;
    box-shadow: 0 14px 34px rgba(37, 91, 158, 0.22);
}

#bc-app .bc-steps {
    display: none !important;
}

#bc-app .bc-production {
    flex-wrap: wrap;
}

#bc-app .bc-production [data-action^="export-png"] {
    white-space: nowrap;
}

#bc-app .bc-properties .bc-two label:nth-child(1)::after,
#bc-app .bc-properties .bc-two label:nth-child(2)::after {
    content: " mm";
    color: var(--muted, #61788c);
    font-size: 0.78rem;
}

#bc-app #bc-colour {
    display: block;
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 5px;
    border: 1px solid #cbdce8;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

#bc-app #bc-colour::-webkit-color-swatch-wrapper {
    padding: 0;
}

#bc-app #bc-colour::-webkit-color-swatch {
    border: 0;
    border-radius: 6px;
}

#bc-app #bc-colour::-moz-color-swatch {
    border: 0;
    border-radius: 6px;
}

#bc-app #bc-colour:disabled {
    cursor: not-allowed;
}

#bc-app .bc-opacity-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}

#bc-app #bc-opacity {
    width: 100%;
    min-width: 0;
}

#bc-app .bc-opacity-number {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3px;
}

#bc-app #bc-opacity-value {
    width: 48px;
    min-width: 0;
    padding: 7px 4px;
    color: #123f5e;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

#bc-app .bc-opacity-number b {
    color: #61788c;
    font-size: 12px;
}

#bc-app button:not(:disabled),
#bc-app .bc-upload:not(:has(input:disabled)) {
    cursor: pointer;
}

#bc-app button:disabled,
#bc-app input:disabled,
#bc-app select:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

#bc-app .bc-template-panel {
    margin: 4px 0 12px;
    padding: 10px;
    border: 1px solid #cbddeb;
    border-radius: 12px;
    background: #f5f9fc;
}

#bc-app .bc-template-panel summary {
    cursor: pointer;
    color: #164b70;
    font-weight: 800;
}

#bc-app .bc-template-panel[open] summary {
    margin-bottom: 10px;
}

#bc-app .bc-template-panel label,
#bc-app .bc-template-panel button {
    margin-top: 8px;
}

#bc-app .bc-template-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#bc-app .bc-template-select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

#bc-app .bc-template-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

#bc-app .bc-template-preview {
    display: block;
    min-width: 0;
    padding: 5px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    color: #173d59;
    text-align: left;
}

#bc-app .bc-template-preview svg {
    display: block;
    width: 100%;
    aspect-ratio: 85 / 55;
    border-radius: 6px;
}

#bc-app .bc-template-preview span {
    display: block;
    margin-top: 5px;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.15;
}

#bc-app .bc-template-preview.is-active {
    border-color: #3f7ff0;
    box-shadow: 0 5px 14px rgba(63, 127, 240, 0.2);
}