:root{color-scheme:light;--primary: #00AA7B;--primary-dark: #008f67;--secondary: #8EB8CD;--text: #2d334a;--bg: #f8fafc;--card-bg: #fff;--error: #dc2626}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;overflow:hidden}body{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:16px}#app{width:100%;max-width:420px}.card{background:var(--card-bg);border:1px solid #e5e7eb;border-radius:16px;padding:20px;box-shadow:0 8px 24px #00000014}h1{font-size:20px;text-align:center;margin-bottom:16px;color:var(--text)}.status{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px}.status p{font-size:14px;color:#666}.status.ok{color:var(--primary);padding:8px 12px;background:#e6f7f2;border-radius:8px;text-align:center;font-weight:600}.status.err{color:var(--error);padding:8px 12px;background:#fef2f2;border-radius:8px;text-align:center;font-weight:600}.spinner{width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.upload-section{text-align:center}.instruction{font-size:15px;color:#666;margin-bottom:20px}.upload-buttons{display:flex;flex-direction:column;gap:12px}.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:12px;border:none;font-size:16px;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .1s,background-color .2s}.btn:active{transform:scale(.98)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:#eef2ff;color:var(--text);border:1px solid #dbeafe}.btn-secondary:hover{background:#e0e7ff}.btn-send{width:100%;margin-top:16px;background:var(--primary);color:#fff;font-size:18px;padding:16px}.preview{margin-top:16px;border-radius:12px;overflow:hidden;background:#f1f5f9;min-height:120px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb}.preview img{max-width:100%;max-height:200px;display:block}.preview.hidden{display:none}.uploading-section{text-align:center;padding:20px}.uploading-section p{margin:12px 0;color:#666}.progress-bar{width:100%;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin:12px 0}.progress-fill{height:100%;background:var(--primary);transition:width .3s ease}.progress-text{font-weight:600;color:var(--primary)}.error-section{text-align:center;padding:20px}.error-message{color:var(--error);font-size:15px;margin-bottom:20px}.card.controller{padding:12px}.card.controller h1{font-size:16px;margin-bottom:8px}.actions{margin-top:10px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.grid2 button,.emotes button{padding:12px;border-radius:10px;border:1px solid #dbeafe;background:#eef2ff;color:var(--text);font-weight:600;font-size:14px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.grid2 button:active,.emotes button:active{transform:scale(.98)}.emotes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}.emotes button{font-size:20px;padding:10px}.dpad{display:grid;grid-template-columns:56px 56px 56px;grid-template-rows:56px 56px 56px;gap:6px;justify-content:center;margin-top:12px}.dpad .sp{visibility:hidden}.dpad-btn{padding:10px;border-radius:10px;border:1px solid #dbeafe;background:#eef2ff;color:var(--text);font-weight:600;font-size:16px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.dpad-btn:active{transform:scale(.95);background:var(--primary);color:#fff}.dpad-hint{text-align:center;font-size:12px;color:#888;margin-top:6px}.hidden{display:none!important}@media (max-width: 380px){.card{padding:16px}h1{font-size:18px}.btn{padding:12px 16px;font-size:15px}.dpad{grid-template-columns:50px 50px 50px;grid-template-rows:50px 50px 50px}}