*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #000000;--surface: #1a1a1a;--surface-hover: #2a2a2a;--text: #f5f5f5;--text-muted: #888;--accent: #e1306c;--accent-hover: #c91357;--radius: 12px;--max-width: 480px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;-webkit-font-smoothing:antialiased}.app{max-width:var(--max-width);margin:0 auto;padding:24px 16px;min-height:100dvh;display:flex;flex-direction:column;align-items:center;gap:20px}h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.install-banner{width:100%;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 16px;background:var(--surface);border-radius:var(--radius);gap:12px}.install-banner__text{display:flex;flex-direction:column;gap:2px;font-size:.875rem}.install-banner__text strong{color:var(--text)}.install-banner__text span{color:var(--text-muted);font-size:.75rem}.install-banner__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.install-banner__btn{padding:8px 20px;background:var(--accent);color:var(--text);border:none;border-radius:20px;font-size:.813rem;font-weight:600;cursor:pointer;transition:background .2s}.install-banner__btn:hover{background:var(--accent-hover)}.install-banner__dismiss{background:none;border:none;color:var(--text-muted);font-size:1.25rem;cursor:pointer;padding:4px;line-height:1}.install-banner__guide{width:100%;margin-top:10px;padding-top:10px;border-top:1px solid var(--surface-hover);display:flex;flex-direction:column;gap:6px;font-size:.75rem;color:var(--text-muted)}.upload-zone{width:100%;aspect-ratio:4 / 5;border:2px dashed var(--text-muted);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s}.upload-zone:hover{border-color:var(--accent)}.upload-zone__content{text-align:center;color:var(--text-muted)}.upload-zone__icon{font-size:3rem;display:block;margin-bottom:8px}.crop-selector{display:flex;gap:8px}.crop-selector__btn{padding:8px 20px;border:1px solid var(--text-muted);border-radius:20px;background:transparent;color:var(--text-muted);font-size:.875rem;cursor:pointer;transition:all .2s}.crop-selector__btn.active{background:var(--accent);border-color:var(--accent);color:var(--text)}.photo-preview{width:100%;display:flex;justify-content:center}.photo-preview__canvas{max-width:100%;height:auto;border-radius:var(--radius)}.caption-result{width:100%;padding:16px;background:var(--surface);border-radius:var(--radius)}.caption-result__text{font-size:1rem;line-height:1.5}.caption-result--loading{color:var(--text-muted);text-align:center}.caption-result--error{color:#f44;text-align:center}.share-button-wrapper{width:100%;text-align:center}.share-button{width:100%;padding:16px;background:var(--accent);color:var(--text);border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.share-button:hover:not(:disabled){background:var(--accent-hover)}.share-button:disabled{opacity:.4;cursor:not-allowed}.share-toast{margin-top:12px;color:var(--text-muted);font-size:.875rem}.generate-btn{width:100%;padding:14px;background:var(--surface);color:var(--text);border:1px solid var(--text-muted);border-radius:var(--radius);font-size:1rem;cursor:pointer;transition:all .2s}.generate-btn:hover{background:var(--surface-hover);border-color:var(--accent)}.reset-btn{padding:10px 24px;background:transparent;color:var(--text-muted);border:none;font-size:.875rem;cursor:pointer;text-decoration:underline}
