:root{--tg-theme-bg-color: #ffffff;--tg-theme-text-color: #000000;--tg-theme-hint-color: #999999;--tg-theme-link-color: #2481cc;--tg-theme-button-color: #2481cc;--tg-theme-button-text-color: #ffffff;--tg-theme-secondary-bg-color: #f0f0f0;--tg-theme-header-bg-color: #ffffff;--tg-theme-section-bg-color: #ffffff;--tg-theme-section-header-text-color: #6d7885;--tg-theme-subtitle-text-color: #6d7885;--tg-theme-destructive-text-color: #e53935;--border-radius: 12px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;background-color:var(--tg-theme-bg-color);color:var(--tg-theme-text-color);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}input,button,select,textarea{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer;border:none;background:none}a{text-decoration:none;color:var(--tg-theme-link-color)}img{max-width:100%;display:block}#root{min-height:100vh;display:flex;flex-direction:column;align-items:center}.app{width:100%;max-width:480px;padding:var(--spacing-md);padding-bottom:40px;display:flex;flex-direction:column;gap:var(--spacing-md)}.color-preview{width:100%;height:150px;border-radius:var(--border-radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xs);box-shadow:0 4px 20px #00000026;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.preview-hex{font-size:28px;font-weight:700;letter-spacing:2px}.preview-label{font-size:13px;opacity:.7}.picker-row{display:flex;gap:var(--spacing-sm);align-items:center}.color-picker-wrapper{flex:1;display:flex;align-items:center;gap:var(--spacing-sm);background:var(--tg-theme-secondary-bg-color);border-radius:var(--border-radius);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;min-height:48px}.native-picker{width:40px;height:40px;border:none;border-radius:8px;cursor:pointer;padding:0;background:none}.native-picker::-webkit-color-swatch-wrapper{padding:0}.native-picker::-webkit-color-swatch{border:2px solid rgba(0,0,0,.1);border-radius:8px}.native-picker::-moz-color-swatch{border:2px solid rgba(0,0,0,.1);border-radius:8px}.picker-label{font-size:14px;font-weight:500;color:var(--tg-theme-text-color)}.btn{height:48px;padding:0 var(--spacing-md);border-radius:var(--border-radius);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;white-space:nowrap;transition:opacity .15s ease,transform .1s ease}.btn:active{opacity:.8;transform:scale(.97)}.btn-random{background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.btn-save{background:var(--tg-theme-button-color);color:var(--tg-theme-button-text-color)}.section{background:var(--tg-theme-section-bg-color);border-radius:var(--border-radius);padding:var(--spacing-md)}.section-title{display:block;font-size:13px;font-weight:600;color:var(--tg-theme-section-header-text-color);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm)}.section-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm)}.section-header-row .section-title{margin-bottom:0}.hex-input-row{display:flex;align-items:center;gap:var(--spacing-xs);background:var(--tg-theme-secondary-bg-color);border-radius:8px;padding:var(--spacing-sm) var(--spacing-md)}.hex-prefix{font-size:18px;font-weight:700;color:var(--tg-theme-hint-color)}.hex-input{flex:1;border:none;background:transparent;font-size:18px;font-weight:700;font-family:SF Mono,Fira Code,Consolas,monospace;letter-spacing:2px;text-transform:uppercase;outline:none;min-height:36px}.slider-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.slider-row{display:flex;align-items:center;gap:var(--spacing-sm)}.slider-label{width:20px;font-size:13px;font-weight:700;text-align:center;color:var(--tg-theme-hint-color)}.slider{flex:1;-webkit-appearance:none;appearance:none;height:8px;border-radius:4px;outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid currentColor;box-shadow:0 2px 6px #0003;cursor:pointer}.slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid currentColor;box-shadow:0 2px 6px #0003;cursor:pointer}.slider-r{background:linear-gradient(to right,#000,red);color:red}.slider-g{background:linear-gradient(to right,#000,#0c0);color:#0c0}.slider-b{background:linear-gradient(to right,#000,#06f);color:#06f}.slider-h{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);color:#888}.slider-s{background:linear-gradient(to right,#ccc,#ff6b6b);color:#ff6b6b}.slider-l{background:linear-gradient(to right,#000,#888,#fff);color:#888}.slider-value{width:48px;font-size:13px;font-weight:600;text-align:right;color:var(--tg-theme-text-color);font-family:SF Mono,Fira Code,Consolas,monospace}.values-grid{display:flex;flex-direction:column;gap:var(--spacing-xs)}.value-row{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--tg-theme-secondary-bg-color);border-radius:8px}.value-label{width:48px;font-size:12px;font-weight:700;color:var(--tg-theme-hint-color);text-transform:uppercase}.value-text{flex:1;font-size:14px;font-weight:500;font-family:SF Mono,Fira Code,Consolas,monospace}.btn-copy{padding:6px 12px;background:var(--tg-theme-button-color);color:var(--tg-theme-button-text-color);border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity .15s ease,transform .1s ease,background .2s ease}.btn-copy:active{transform:scale(.95)}.btn-copy.copied{background:#27ae60}.palette-row{display:flex;gap:var(--spacing-xs)}.palette-swatch{flex:1;height:56px;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s ease;overflow:hidden;padding:2px}.palette-swatch:active{transform:scale(.95)}.swatch-label{font-size:9px;font-weight:700;letter-spacing:.3px;word-break:break-all;text-align:center;line-height:1.2}.premium-badge{font-size:11px;font-weight:700;color:#f39c12;background:#f39c121f;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.premium-gate{text-align:center;padding:var(--spacing-md) 0}.premium-text{font-size:14px;color:var(--tg-theme-hint-color);margin-bottom:var(--spacing-md)}.btn-premium{background:linear-gradient(135deg,#f39c12,#e67e22);color:#fff;font-weight:700;padding:12px 24px;border-radius:var(--border-radius);font-size:15px;box-shadow:0 4px 12px #f39c124d;transition:opacity .15s ease,transform .1s ease}.btn-premium:active{opacity:.85;transform:scale(.97)}.harmony-group{display:flex;flex-direction:column;gap:var(--spacing-md)}.harmony-row{display:flex;flex-direction:column;gap:var(--spacing-xs)}.harmony-label{font-size:12px;font-weight:600;color:var(--tg-theme-hint-color)}.harmony-swatch{height:44px;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:.5px;transition:transform .1s ease}.harmony-swatch:active{transform:scale(.97)}.analogous-swatches{display:flex;gap:var(--spacing-xs)}.analogous-swatches .harmony-swatch{flex:1}.empty-hint{font-size:14px;color:var(--tg-theme-hint-color);text-align:center;padding:var(--spacing-md) 0}.saved-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-sm)}.saved-item{position:relative}.saved-swatch{width:100%;aspect-ratio:1;border:none;border-radius:8px;cursor:pointer;box-shadow:0 2px 8px #0000001a;transition:transform .1s ease}.saved-swatch:active{transform:scale(.92)}.saved-remove{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border-radius:50%;background:var(--tg-theme-destructive-text-color);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 1px 4px #0003;cursor:pointer;border:none}