/*!
==========================================================
 * ARTFIELD PROJECT
 * Copyright (c) 2026 ArtField Project. All rights reserved.
 *
 * PROPRIETARY PREVIEW.
 * Unauthorized copying, distribution, or reverse engineering of this file
 * via any medium is strictly prohibited.
==========================================================
*/
@keyframes pulse-attention{0%{box-shadow:0 0 0 0 rgba(0,210,255,.7);transform:scale(1)}50%{box-shadow:0 0 0 10px transparent;transform:scale(1.08);background:#00d2ff;color:#000}to{box-shadow:0 0 0 0 transparent;transform:scale(1)}}:root{--graphite-opacity:0.5;--bg-color:#f4f4f4}body.dark-theme{--bg-color:#050505}body,canvas,html{width:100%;height:100%}body,html{margin:0;padding:0;overflow:hidden;background-color:var(--bg-color);font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;touch-action:none;transition:background-color .4s ease}canvas{position:absolute;top:0;left:0}#art-canvas{opacity:var(--graphite-opacity);transition:opacity .1s}#art-canvas.pencil-effect-light{filter:url(#pencil-process-light)}#art-canvas.pencil-effect-dark{filter:url(#pencil-process-dark)}#top-bar,#top-left,#top-right{display:flex;align-items:center}#top-bar{position:absolute;top:0;left:0;width:100%;height:55px;background:rgba(255,255,255,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);box-shadow:0 2px 10px rgba(0,0,0,.03);justify-content:space-between;padding:0 20px;box-sizing:border-box;z-index:20;transition:background .4s,color .4s}body.dark-theme #top-bar{background:rgba(25,25,25,.35);box-shadow:0 2px 12px rgba(0,0,0,.3)}#top-left,#top-right{gap:8px;flex:1}#top-left{justify-content:flex-start}#top-right{justify-content:flex-end}#top-center{display:flex;align-items:center;gap:8px;flex:0}.v-separator{width:1px;height:24px;background-color:rgba(0,0,0,.15);margin:0 8px}body.dark-theme .v-separator{background-color:rgba(255,255,255,.15)}#top-right h1{margin:0;font-size:1.1rem;color:#222;text-transform:uppercase;letter-spacing:1px}body.dark-theme #top-right h1,body.dark-theme #ui-header h2,body.dark-theme .control-group label{color:#f4f4f4}#top-center button,.top-btn{background:#e2e2e2;border:0;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:.85rem;font-weight:600;color:#222;transition:background .2s,transform .1s;box-shadow:0 2px 6px rgba(0,0,0,.08)}#top-center button:hover:not(:disabled),.top-btn:hover{background:#d0d0d0}#top-center button:active:not(:disabled),.top-btn:active{transform:scale(.95)}#top-center button:disabled{opacity:.4;cursor:not-allowed}body.dark-theme #top-center button,body.dark-theme .top-btn{background:#282828;color:#f4f4f4;box-shadow:0 2px 6px rgba(0,0,0,.4)}body.dark-theme #top-center button:hover:not(:disabled),body.dark-theme .top-btn:hover{background:#383838}.top-btn.loading{background:#666!important;color:#ccc!important;cursor:not-allowed;pointer-events:none}#ui-container{position:absolute;top:70px;left:15px;z-index:10;background:rgba(255,255,255,.85);padding:12px 18px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.05);pointer-events:auto;width:280px;max-height:calc(100vh - 100px);display:flex;flex-direction:column;transition:background .4s,color .4s;box-sizing:border-box}#ui-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}#ui-header h2{margin:0;font-size:1rem;color:#222}#ui-content{overflow-y:auto;padding-right:5px}#ui-content::-webkit-scrollbar{width:5px}#ui-content::-webkit-scrollbar-track{background:0 0}#ui-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}body.dark-theme #ui-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}#ui-toggle-btn{background:#e0e0e0;border:0;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:.75rem;font-weight:700;color:#444;transition:background .2s}#ui-toggle-btn:hover{background:#d2d2d2}.control-group{margin-top:12px;padding-top:12px;border-top:1px solid #ccc}.control-group label{display:block;font-size:.85rem;color:#222;margin-bottom:6px;font-weight:600}.swatch,input[type=range]{width:100%;cursor:pointer}#palette-swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0;width:100%}.swatch{width:22px;height:22px;border-radius:4px;border:1.5px solid #ccc;position:relative;transition:transform .15s,border-color .15s}.swatch:hover{transform:scale(1.1);border-color:#888}.swatch-remove{position:absolute;top:-5px;right:-5px;background:#f44;color:#fff;border-radius:50%;width:12px;height:12px;font-size:9px;line-height:12px;text-align:center;border:0;display:none;z-index:2}.swatch:hover .swatch-remove{display:block}#add-color-btn,#help-modal-overlay{display:flex;justify-content:center;align-items:center}#add-color-btn,.swatch-remove{font-weight:700;cursor:pointer;padding:0}#add-color-btn{width:22px;height:22px;border-radius:4px;border:1.5px dashed #888;background:rgba(0,0,0,.05);color:#444;font-size:14px;transition:background .15s,transform .1s,border-color .15s;line-height:22px}#add-color-btn:hover{background:rgba(0,0,0,.1);border-color:#333;transform:scale(1.1)}#add-color-btn:active{transform:scale(.95)}#help-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:30;backdrop-filter:blur(4px)}#help-modal{background:rgba(255,255,255,.98);padding:25px 30px;border-radius:12px;width:90%;max-width:500px;position:relative;box-shadow:0 10px 40px rgba(0,0,0,.2);color:#222}#close-help-btn{position:absolute;top:15px;right:20px;background:0 0;border:0;font-size:1.8rem;cursor:pointer;color:#888;transition:color .2s}#close-help-btn:hover{color:#000}.help-section{margin-bottom:18px}.help-section h3{margin-top:0;margin-bottom:8px;border-bottom:1px solid #ddd;padding-bottom:4px;font-size:1.1rem}.help-section p{font-size:.95rem;line-height:1.5;margin:6px 0}body.dark-theme #ui-container{background:rgba(25,25,25,.85);color:#e0e0e0}body.dark-theme .control-group,body.dark-theme .swatch{border-color:#444}body.dark-theme #ui-toggle-btn{background:#444;color:#fff}body.dark-theme #ui-toggle-btn:hover{background:#555}body.dark-theme .swatch:hover{border-color:#aaa}body.dark-theme #add-color-btn{border-color:#666;background:rgba(255,255,255,.1);color:#e0e0e0}body.dark-theme #add-color-btn:hover{background:rgba(255,255,255,.15);border-color:#aaa}body.dark-theme #help-modal{background:rgba(30,30,30,.98);color:#e0e0e0}body.dark-theme #close-help-btn{color:#aaa}body.dark-theme #close-help-btn:hover{color:#fff}body.dark-theme .help-section h3{border-color:#444;color:#fff}#ui-container.collapsed #ui-content{display:none}@media (max-width:768px){#top-bar{padding:0 10px;overflow-x:auto;gap:10px;justify-content:flex-start}#top-center,#top-left,#top-right{flex:none}#top-right h1{font-size:.9rem;white-space:nowrap}#top-center button,.top-btn{padding:6px 10px;font-size:.75rem;white-space:nowrap}#ui-container{top:65px;left:10px;width:calc(100% - 20px);max-height:45vh}}.help-pulse{animation:pulse-attention 1.25s infinite ease-in-out;border:1px solid #00d2ff!important}