/* Shared visual layer; tool-specific canvas sizes and layouts stay intact. */
body.cc-tool{--cc-ink:#354767;--cc-muted:#7890aa;--cc-blue:#639bdd;background:#edf5fc url('../sakura-background.svg') center top/cover no-repeat fixed!important;color:var(--cc-ink);-webkit-font-smoothing:antialiased}
.cc-tool .brand-mini{color:#3d628d;letter-spacing:.04em}
.cc-tool .brand-mini img{filter:none;border-radius:12px}
.cc-tool .back{background:rgba(255,255,255,.88);border-color:#fff;color:#608ab8;box-shadow:0 4px 16px #6a91be12;font-weight:600}
.cc-tool .back:hover{background:#fff0f6;color:#aa7694}
.cc-tool h1,.cc-tool .page-title,.cc-tool h2,.cc-tool h3{color:#42668f;letter-spacing:.02em}
.cc-tool .eyebrow{color:#8aa7c6;font-size:10px;letter-spacing:.18em;font-weight:600}
.cc-tool .panel{background:rgba(255,255,255,.91);border-color:rgba(255,255,255,.96);box-shadow:0 8px 30px rgba(91,128,178,.09);border-radius:18px}
.cc-tool :is(.form-card,.setting-card,.info-card,.qr-preview,.box,.result){background:rgba(249,252,255,.95);border-color:#dce7f4;box-shadow:none;border-radius:14px}
.cc-tool :is(.box-title,.preview-title){background:linear-gradient(100deg,#edf5ff,#fff3f8);color:#6482a2;border-color:#e1eaf5}
.cc-tool :is(.field input:not([type=range]):not([type=color]):not([type=checkbox]),.field select,.field textarea,.ip-search input){background:#fff;border-color:#b9d2ee;border-radius:10px;color:#385473;box-shadow:none}
.cc-tool :is(input,textarea,select):focus-visible{outline:2px solid #8ab6e5;outline-offset:2px}
.cc-tool :is(.toolbar button,.actions button,.download-actions button,.download-actions a,.bg-options button){background:#edf4ff;color:#6389b7;font-weight:600;box-shadow:none}
.cc-tool :is(.main-btn,.actions .primary,.download-actions .primary,.qr-actions button,.qr-actions a,.download-row button,.download-row a,.ip-search button:first-of-type){background:linear-gradient(115deg,#74ace6,#5a90d1);color:#fff;font-weight:600;box-shadow:0 4px 12px #6c9bd323;border-radius:10px}
.cc-tool :is(.qr-actions .ghost,.download-row .ghost){background:#eaf2ff;color:#6389b7;box-shadow:none}
.cc-tool button:disabled{opacity:.5;cursor:not-allowed}
.cc-tool :is(.upload-zone,.logo-drop){background:linear-gradient(115deg,#f3f9ff,#fff6fa);border-color:#b4d1ed;color:#7995b5;border-radius:14px}
.cc-tool .upload-zone:hover,.cc-tool .upload-zone.dragover{background:#edf6ff;border-color:#7faee0}
.cc-tool .upload-icon{background:linear-gradient(135deg,#82b9eb,#9aadde);box-shadow:0 7px 18px #80a6d330}
.cc-tool .ai-badge{background:#edf4ff;color:#7794b5;border-color:#dce8f8;font-weight:600}
.cc-tool .bg-options button.active{background:#e3efff;color:#5684b9;border-color:#96bae5}
.cc-tool :is(.tips,.hint,.note-list,.summary,.tip,.status){color:#7a8da5}
.cc-tool .status-box:not(.error){background:#f0f6fe;color:#6c85a2;border-color:#dce7f4}
.cc-tool .r{background:#fff;border-color:#e2eaf5}
.cc-tool .r span{color:#7990ac}.cc-tool .r b{color:#426181}
.cc-tool .map-link a{background:#eaf2ff;color:#608bbc}
.cc-tool input[type=checkbox],.cc-tool input[type=range]{accent-color:#79a5de}
.cc-tool .edge-orange{border-color:#eead66!important}.cc-tool .edge-purple{border-color:#b094db!important}
.cc-contact{position:fixed;right:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:100;display:grid;grid-template-columns:1fr 32px;gap:0;width:170px;padding:8px;border:1px solid #fffffff5;border-radius:21px;background:linear-gradient(145deg,#fffffffa,#e9f5fff5);box-shadow:0 8px 30px #4c7daf26;backdrop-filter:blur(16px);font-family:inherit}
.cc-contact [hidden]{display:none!important}
.cc-contact-actions{display:contents}
.cc-contact-link{grid-column:1/-1;display:flex;align-items:center;gap:9px;padding:5px 3px;height:54px;text-decoration:none;border-radius:12px;color:#4b739d}
.cc-contact-link:hover{background:#e0efff99}
.cc-contact-symbol{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#78bce9,#549cdb);box-shadow:0 3px 9px #4e95d033}
.cc-contact-symbol svg{width:22px;height:22px}
.cc-contact-label{font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap}
.cc-contact-label small{display:block;font-size:8px;letter-spacing:.13em;color:#8babc8;margin-top:3px}
.cc-contact-arrow{width:14px;height:14px;margin-left:auto;color:#8aaaca}
.cc-contact-top,.cc-contact-toggle{display:flex;align-items:center;justify-content:center;height:32px;border:0;border-radius:9px;background:#ddebfa73;color:#7b96b2;cursor:pointer;font-family:inherit;box-shadow:none;padding:0}
.cc-contact-top{grid-column:1;grid-row:2;gap:5px;margin:6px 4px 0 0;font-size:11px}
.cc-contact-top svg{width:14px;height:14px}
.cc-contact-toggle{grid-column:2;grid-row:2;width:32px;margin-top:6px}
.cc-contact-toggle svg{width:18px;height:18px}
.cc-contact-top:hover,.cc-contact-toggle:hover{background:#dfedfc;color:#5486b6}
.cc-contact .toggle-open{display:none}
.cc-contact.is-collapsed{width:40px;padding:0;border-radius:50%}
.cc-contact.is-collapsed .cc-contact-toggle{width:38px;height:38px;grid-column:1;grid-row:1;margin:0;border-radius:50%;background:transparent}
.cc-contact.is-collapsed .toggle-open{display:block}.cc-contact.is-collapsed .toggle-close{display:none}
.cc-contact :is(a,button):focus-visible{outline:3px solid #82b2e8;outline-offset:3px}
@media(min-width:1500px){.cc-contact{right:20px}}
@media(max-width:760px){body.cc-tool{background-attachment:scroll!important;background-position:65% top!important}.cc-contact{right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:158px;padding:6px;border-radius:18px}.cc-contact-link{height:48px}.cc-contact-symbol{width:32px;height:32px;flex-basis:32px}.cc-contact-label{font-size:12px}}