:root{--color-bg-main: #121212;--color-bg-panel: #1e1e1e;--color-bg-card: #ffffff;--color-text-main: #ffffff;--color-text-muted: #a0a0a0;--color-text-card: #000000;--color-accent: #3b82f6;--color-accent-hover: #2563eb;--color-border: #333333;--color-input-bg: #2a2a2a;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", monospace}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);background-color:var(--color-bg-main);color:var(--color-text-main);line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-print-color-adjust:exact;print-color-adjust:exact}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600}button{cursor:pointer;border:none;background:var(--color-accent);color:#fff;padding:8px 16px;border-radius:6px;font-weight:500;transition:background .2s}button:hover{background:var(--color-accent-hover)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-main)}::-webkit-scrollbar-thumb{background:#444;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-main{display:flex;flex:1;overflow:hidden}.editor-panel{width:300px;background-color:var(--color-bg-panel);display:flex;flex-direction:column;flex-shrink:0;z-index:10}.left-sidebar{border-right:1px solid var(--color-border)}.right-sidebar{border-left:1px solid var(--color-border)}.control-group{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #2a2a2a}.control-group:last-child{border-bottom:none}.control-group h3{font-size:1rem;margin-bottom:12px;color:#fff;font-weight:600;letter-spacing:.02em}.section-label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:8px;font-weight:600}input[type=text],input[type=number],select{width:100%;background-color:#111;border:1px solid #333;color:#eee;padding:8px 10px;border-radius:4px;font-size:.9rem;transition:border-color .2s}input[type=text]:focus,input[type=number]:focus,select:focus{outline:none;border-color:var(--color-accent)}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;margin:10px 0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:#333;border-radius:2px}input[type=range]::-webkit-slider-thumb{height:16px;width:16px;border-radius:50%;background:var(--color-accent);cursor:pointer;-webkit-appearance:none;margin-top:-6px;box-shadow:0 1px 3px #00000080}input[type=range]::-moz-range-track{width:100%;height:4px;cursor:pointer;background:#333;border-radius:2px}input[type=range]::-moz-range-thumb{height:16px;width:16px;border:none;border-radius:50%;background:var(--color-accent);cursor:pointer}.action-btn{flex:1;padding:10px;font-size:.85rem;border-radius:4px;font-weight:600;border:1px solid transparent;display:flex;align-items:center;justify-content:center}.action-btn.primary{background-color:var(--color-accent);color:#fff}.action-btn.primary:hover{background-color:var(--color-accent-hover)}.action-btn.secondary{background-color:#10b981;color:#fff}.action-btn.secondary:hover{background-color:#059669}.action-btn.warning{background-color:#f59e0b;color:#fff;color:#000}.action-btn.warning:hover{background-color:#d97706}.rank-btn,.suit-btn,.variant-btn{background:#2a2a2a;border:1px solid #333;color:#ccc;border-radius:4px;padding:6px;font-size:.85rem;transition:all .2s}.rank-btn:hover,.suit-btn:hover,.variant-btn:hover{background:#333;color:#fff}.rank-btn.active,.suit-btn.active,.variant-btn.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent);font-weight:700}.spacer-top{margin-top:20px}.app-container{display:flex;flex-direction:column;height:100vh}.app-header{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border);background:var(--color-bg-panel)}.app-main{flex:1;display:flex;overflow:hidden}