:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh;width:100%}body{width:100%}#root{width:100%;min-height:100vh}.color-block{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:4px 8px;margin:2px;border-radius:8px;box-shadow:0 2px 4px #0000001a;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}.color-block:hover{transform:scale(1.05);box-shadow:0 4px 8px #0003}.color-block .count-badge{font-size:16px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5);z-index:1}.color-block .color-name{position:absolute;bottom:2px;left:50%;transform:translate(-50%);font-size:10px;color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%;z-index:1}.glossy-overlay{position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom,#ffffff4d,#ffffff1a,#fff0);border-radius:8px 8px 0 0;pointer-events:none}.color-sequence{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px;margin:8px 0;padding:12px;background:#0000000d;border-radius:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}.row-container{margin-bottom:16px}.row-header{display:flex;align-items:center;justify-content:flex-start;margin-bottom:8px;font-weight:600;font-size:14px;color:var(--tg-theme-text-color, #000)}.row-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--tg-theme-button-color, #8774e1);color:var(--tg-theme-button-text-color, #fff);border-radius:50%;font-size:12px;margin-right:8px}.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px;margin:16px 0}.palette-item{display:flex;flex-direction:column;align-items:center;padding:12px;background:var(--tg-theme-secondary-bg-color, #f0f0f0);border-radius:12px;transition:transform .2s ease;cursor:pointer}.palette-item:hover{transform:translateY(-2px)}.palette-swatch{width:48px;height:48px;border-radius:50%;margin-bottom:8px;box-shadow:0 2px 4px #0000001a;border:2px solid rgba(255,255,255,.3)}.palette-name{font-size:12px;font-weight:600;color:var(--tg-theme-text-color, #000);text-align:center;margin-bottom:4px}.palette-total{font-size:11px;color:var(--tg-theme-hint-color, #666)}.upload-zone{border:2px dashed var(--tg-theme-hint-color, #aaa);border-radius:16px;padding:32px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--tg-theme-secondary-bg-color, #f0f0f0)}.upload-zone:hover{border-color:var(--tg-theme-button-color, #8774e1);background:#8774e10d}.upload-zone.drag-over{border-color:var(--tg-theme-button-color, #8774e1);background:#8774e11a;transform:scale(1.02)}.upload-icon{font-size:48px;margin-bottom:16px}.upload-text{font-size:14px;color:var(--tg-theme-hint-color, #666);margin-bottom:8px}.preview-image{max-width:100%;max-height:400px;width:100%;height:auto;object-fit:contain;border-radius:0;box-shadow:0 4px 8px #0000001a;display:block;margin:16px auto}.visualization-grid{max-width:100%;height:auto;border-radius:12px;margin:16px 0;box-shadow:0 4px 8px #0000001a}.section-title{font-size:18px;font-weight:700;color:var(--tg-theme-text-color, #000);margin:24px 0 12px;display:flex;align-items:center}.section-title:before{content:"";display:inline-block;width:4px;height:20px;background:var(--tg-theme-button-color, #8774e1);margin-right:8px;border-radius:2px}.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;background:var(--tg-theme-button-color, #8774e1);color:var(--tg-theme-button-text-color, #fff);border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.button:hover{opacity:.9}.button:active{transform:scale(.98)}.button:disabled{opacity:.5;cursor:not-allowed}.input{width:100%;padding:12px;background:var(--tg-theme-bg-color, #fff);color:var(--tg-theme-text-color, #000);border:1px solid var(--tg-theme-hint-color, #ccc);border-radius:8px;font-size:14px;transition:border-color .2s ease}.input:focus{outline:none;border-color:var(--tg-theme-button-color, #8774e1)}.toggle{display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--tg-theme-secondary-bg-color, #f0f0f0);border-radius:8px;margin-bottom:8px}.toggle-label{font-size:14px;color:var(--tg-theme-text-color, #000)}.toggle-switch{width:44px;height:24px;background:var(--tg-theme-hint-color, #ccc);border-radius:12px;position:relative;cursor:pointer;transition:background .3s ease}.toggle-switch.active{background:var(--tg-theme-button-color, #8774e1)}.toggle-switch:after{content:"";position:absolute;width:20px;height:20px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.toggle-switch.active:after{transform:translate(20px)}@media(max-width:480px){.color-block{min-width:40px;height:40px;padding:3px 6px}.color-block .count-badge{font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.5)}.color-block .color-name{font-size:9px}.color-sequence{padding:8px}}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;padding:32px;text-align:center}.loading-spinner{width:48px;height:48px;border:4px solid var(--tg-theme-secondary-bg-color, #f0f0f0);border-top-color:var(--tg-theme-button-color, #8774e1);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:14px;color:var(--tg-theme-hint-color, #666)}.accordion-section{margin-bottom:16px;background:var(--tg-theme-secondary-bg-color, #f0f0f0);border-radius:12px;overflow:hidden}.accordion-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px;background:transparent;border:none;cursor:pointer;transition:background .2s ease}.accordion-header:hover{background:#0000000d}.accordion-icon{color:var(--tg-theme-hint-color, #666);display:flex;align-items:center;justify-content:center;transition:color .2s ease}.accordion-icon.expanded{color:var(--tg-theme-button-color, #8774e1)}.accordion-content{transition:max-height .3s ease-out}.accordion-content.expanded{max-height:none}.accordion-inner{padding:0 16px 16px}