.interior-paint-open { position:relative; display:flex; align-items:center; gap:13px; width:100%; margin-top:16px; padding:13px 15px; overflow:hidden; border:0; border-radius:9px; background:linear-gradient(135deg,#102957 0%,#183d78 100%); box-shadow:0 8px 22px rgba(16,41,87,.2); color:#fff; text-align:left; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.interior-paint-open::after { content:""; position:absolute; top:-45px; right:-35px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.07); }
.interior-paint-open:hover,.interior-paint-open:focus { background:linear-gradient(135deg,#17366b 0%,#245297 100%); box-shadow:0 12px 28px rgba(16,41,87,.3); color:#fff; outline:0; transform:translateY(-2px); }
.interior-paint-open:active { transform:translateY(0); }
.interior-paint-open-icon { position:relative; z-index:1; display:grid; flex:0 0 44px; width:44px; height:44px; place-items:center; border-radius:50%; background:#fff; color:#17366b; font-size:19px; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.interior-paint-open-copy { position:relative; z-index:1; display:flex; min-width:0; flex:1; flex-direction:column; line-height:1.2; }
.interior-paint-open-copy strong { color:#fff; font-size:15px; font-weight:600; }
.interior-paint-open-copy small { margin-top:4px; color:rgba(255,255,255,.72); font-size:11px; }
.interior-paint-open-arrow { position:relative; z-index:1; margin-left:auto; color:rgba(255,255,255,.75); font-size:13px; transition:transform .2s ease; }
.interior-paint-open:hover .interior-paint-open-arrow { transform:translateX(3px); }
.interior-paint-modal .modal-dialog { max-width:1180px; }
.interior-paint-modal .modal-content { border:0; border-radius:18px; overflow:hidden; background:#f7f6f2; }
.interior-paint-modal .modal-header { align-items:flex-start; padding:20px 24px; border-bottom:1px solid #ddd9d0; }
.interior-paint-modal .modal-title { margin:2px 0 0; color:#18243b; font-size:25px; }
.interior-paint-kicker,.interior-paint-label { display:block; color:#79808c; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.interior-paint-modal .close { border:0; background:transparent; color:#18243b; font-size:32px; line-height:1; cursor:pointer; }
.interior-paint-modal .modal-body { padding:20px; }
.interior-paint-upload label { min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:30px; border:2px dashed #b9b6ad; border-radius:14px; background:#fff; text-align:center; cursor:pointer; }
.interior-paint-upload input { display:none; }
.interior-paint-upload i { color:#15305d; font-size:44px; }
.interior-paint-upload small { color:#777; }
.interior-paint-editor { display:grid; grid-template-columns:270px minmax(0,1fr); gap:18px; }
.interior-paint-tools { display:flex; flex-direction:column; gap:16px; padding:16px; border-radius:12px; background:#fff; }
.interior-paint-tools input,.interior-paint-tools select { width:100%; }
.interior-paint-tools select,.interior-paint-canvas-controls select { width:100%; padding:9px; border:1px solid #d8d5cc; border-radius:5px; background:#fff; }
.interior-paint-search { padding:9px 10px; border:1px solid #d8d5cc; border-radius:5px; background:#fff; }
.interior-paint-palette { display:grid; grid-template-columns:repeat(5,35px); gap:11px; max-height:184px; margin-top:9px; padding:4px; overflow-y:auto; }
.interior-paint-color { width:35px; height:35px; padding:0; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #c7c7c7; cursor:pointer; }
.interior-paint-color.active { box-shadow:0 0 0 3px #15305d; }
.interior-paint-color.selected { position:relative; }
.interior-paint-color.selected::after { content:"\2713"; position:absolute; right:-5px; bottom:-5px; display:grid; width:17px; height:17px; place-items:center; border:2px solid #fff; border-radius:50%; background:#69ae35; color:#fff; font-size:10px; font-weight:800; line-height:1; }
.interior-paint-color-status { margin-top:8px; color:#777; font-size:12px; line-height:1.35; }
.interior-paint-selection { padding-top:13px; border-top:1px solid #e4e1d9; }
.interior-paint-selection-heading { display:flex; align-items:center; justify-content:space-between; }
.interior-paint-selection-heading .interior-paint-label { margin:0; }
.interior-paint-selection-heading strong { display:grid; width:23px; height:23px; place-items:center; border-radius:50%; background:#15305d; color:#fff; font-size:12px; }
.interior-paint-select-color { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:9px; padding:8px 9px; border:1px solid #15305d; border-radius:6px; background:#fff; color:#15305d; font-size:12px; font-weight:700; cursor:pointer; }
.interior-paint-select-color:hover:not(:disabled) { background:#edf2f9; }
.interior-paint-select-color:disabled { border-color:#d3d5d1; background:#f5f5f3; color:#999e97; cursor:not-allowed; }
.interior-paint-selected-colors { display:flex; flex-wrap:wrap; gap:6px; max-height:92px; margin:9px 0; overflow-y:auto; }
.interior-paint-selected-colors > small { color:#888; }
.interior-paint-selected-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:5px 7px; border:1px solid #ddd9d0; border-radius:15px; background:#f8f7f3; color:#303744; font-size:11px; }
.interior-paint-selected-chip i { width:13px; height:13px; flex:0 0 13px; border:1px solid rgba(0,0,0,.14); border-radius:50%; }
.interior-paint-selected-chip button { padding:0; border:0; background:transparent; color:#8b929d; font-size:15px; line-height:1; cursor:pointer; }
.interior-paint-cart { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px; border:0; border-radius:6px; background:#69ae35; color:#fff; font-weight:700; cursor:pointer; transition:background .2s ease; }
.interior-paint-cart:hover:not(:disabled) { background:#57992a; }
.interior-paint-cart:disabled { background:#c8cbc5; cursor:not-allowed; }
.interior-paint-cart-status { min-height:17px; margin-top:7px; color:#68717e; font-size:12px; text-align:center; }
.interior-paint-cart-status.success { color:#4d8b24; }
.interior-paint-cart-status.error { color:#bd3434; }
.interior-paint-workspace { display:grid; align-self:start; gap:10px; min-width:0; }
.interior-paint-canvas-controls { display:grid; grid-template-columns:minmax(170px,220px) minmax(0,1fr); align-items:end; gap:12px; padding:12px; border-radius:12px; background:#fff; }
.interior-paint-canvas-controls label { margin:0; }
.interior-paint-actions { display:grid; grid-template-columns:repeat(6,minmax(72px,1fr)); gap:7px; }
.interior-paint-actions button,.interior-paint-download { padding:9px 10px; border:1px solid #ccd0d7; border-radius:5px; background:#fff; color:#18243b; text-align:center; font-weight:600; cursor:pointer; }
.interior-paint-actions button.active { border-color:#15305d; background:#e9eef6; }
.interior-paint-actions .primary,.interior-paint-download { border-color:#15305d; background:#15305d; color:#fff; }
.interior-paint-stage { position:relative; align-self:start; overflow:hidden; border-radius:12px; background:#20242b; touch-action:none; user-select:none; }
.interior-paint-stage canvas { display:block; width:100%; height:auto; }
.interior-paint-stage canvas[data-role="paint-canvas"] { position:absolute; inset:0; }
.interior-paint-cursor { display:none; position:absolute; pointer-events:none; border:2px solid #fff; border-radius:50%; transform:translate(-50%,-50%); }
.interior-paint-result { margin-top:18px; padding:18px; border-radius:12px; background:#fff; text-align:center; }
.interior-paint-result img { display:block; max-width:100%; max-height:65vh; margin:12px auto 18px; border-radius:8px; }
.interior-paint-download { display:inline-block; text-decoration:none; }
@media (max-width:900px) { .interior-paint-modal .modal-dialog { min-height:100%; margin:0; } .interior-paint-modal .modal-content { min-height:100vh; border-radius:0; } .interior-paint-editor { grid-template-columns:1fr; } .interior-paint-workspace { order:1; } .interior-paint-tools { order:2; } .interior-paint-canvas-controls { grid-template-columns:1fr; position:sticky; top:0; z-index:4; padding:10px; box-shadow:0 5px 18px rgba(20,32,50,.12); } .interior-paint-actions { grid-template-columns:repeat(3,minmax(0,1fr)); } .interior-paint-actions button { padding:10px 5px; font-size:12px; } }