:root{--bg-primary: #f5f5f7;--bg-surface: rgba(255, 255, 255, .72);--bg-surface-solid: #ffffff;--bg-surface-hover: rgba(255, 255, 255, .92);--bg-elevated: rgba(255, 255, 255, .85);--bg-frosted: rgba(245, 245, 247, .72);--text-primary: #1d1d1f;--text-secondary: #6e6e73;--text-tertiary: #aeaeb2;--text-inverse: #ffffff;--accent: #0071e3;--accent-hover: #0077ed;--accent-light: rgba(0, 113, 227, .08);--accent-surface: rgba(0, 113, 227, .05);--success: #34c759;--success-light: rgba(52, 199, 89, .08);--warning: #ff9f0a;--warning-light: rgba(255, 159, 10, .08);--danger: #ff3b30;--danger-light: rgba(255, 59, 48, .06);--border: rgba(0, 0, 0, .06);--border-focus: rgba(0, 113, 227, .4);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .02);--shadow-md: 0 4px 16px rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .03);--shadow-lg: 0 12px 40px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .03);--radius-sm: 10px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 980px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--font: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;--font-size-caption: 12px;--font-size-body: 15px;--font-size-callout: 16px;--font-size-headline: 18px;--font-size-title2: 22px;--font-size-title1: 28px;--font-size-large-title: 34px;--ease-out: cubic-bezier(.25, .46, .45, .94);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .18s;--duration-normal: .3s;--duration-slow: .5s;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--max-width: 420px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font);font-size:var(--font-size-body);font-weight:400;line-height:1.53;color:var(--text-primary);background-color:var(--bg-primary);min-height:100dvh;overflow-x:hidden}#app{max-width:var(--max-width);margin:0 auto;padding:var(--safe-area-top) var(--space-lg) var(--safe-area-bottom);min-height:100dvh;display:flex;flex-direction:column}.page{flex:1;display:flex;flex-direction:column;padding-top:var(--space-2xl);padding-bottom:calc(80px + var(--safe-area-bottom));animation:page-enter var(--duration-normal) var(--ease-out) both}@keyframes page-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-header{margin-bottom:var(--space-xl)}.page-title{font-size:var(--font-size-large-title);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--text-primary)}.page-subtitle{font-size:var(--font-size-callout);font-weight:300;color:var(--text-secondary);margin-top:var(--space-xs);line-height:1.4}.card{background:var(--bg-surface);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out)}.card+.card{margin-top:var(--space-md)}.card:active{transform:scale(.985)}.card-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}.card-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.card-icon--accent{background:var(--accent-light)}.card-icon--success{background:var(--success-light)}.card-icon--warning{background:var(--warning-light)}.card-icon--danger{background:var(--danger-light)}.card-title{font-size:var(--font-size-headline);font-weight:600;letter-spacing:-.01em}.card-description{font-size:var(--font-size-body);color:var(--text-secondary);font-weight:300;line-height:1.5}.section{margin-bottom:var(--space-xl)}.section-label{font-size:var(--font-size-caption);font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;padding:0 var(--space-xs);margin-bottom:var(--space-sm)}.section-group{background:var(--bg-surface);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}.row{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);min-height:52px;transition:background var(--duration-fast) var(--ease-out)}.row:not(:last-child){border-bottom:.5px solid var(--border)}.row:active{background:var(--bg-frosted)}.row-label{flex:1;font-size:var(--font-size-callout);font-weight:400}.row-value{font-size:var(--font-size-callout);color:var(--text-secondary);font-weight:300}.row-chevron{color:var(--text-tertiary);font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);font-family:var(--font);font-size:var(--font-size-callout);font-weight:500;line-height:1;border:none;cursor:pointer;border-radius:var(--radius-full);padding:14px var(--space-xl);transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;user-select:none;-webkit-user-select:none;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0000;transition:background var(--duration-fast) var(--ease-out)}.btn:active:after{background:#00000014}.btn--primary{background:var(--accent);color:var(--text-inverse)}.btn--primary:hover{background:var(--accent-hover)}.btn--secondary{background:var(--accent-light);color:var(--accent)}.btn--secondary:hover{background:#0071e31f}.btn--ghost{background:transparent;color:var(--accent);padding:14px var(--space-md)}.btn--danger{background:var(--danger-light);color:var(--danger)}.btn--danger:hover{background:#ff3b301a}.btn--full{width:100%}.btn--lg{padding:17px var(--space-xl);font-size:var(--font-size-headline);font-weight:600}.btn:disabled{opacity:.35;pointer-events:none}.toggle{position:relative;width:51px;height:31px;flex-shrink:0}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle-track{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--text-tertiary);border-radius:16px;transition:background var(--duration-normal) var(--ease-out);cursor:pointer}.toggle-track:after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;background:#fff;border-radius:50%;box-shadow:0 2px 6px #00000026,0 1px 2px #0000000f;transition:transform var(--duration-normal) var(--ease-spring)}.toggle input:checked+.toggle-track{background:var(--success)}.toggle input:checked+.toggle-track:after{transform:translate(20px)}.chip-group{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-md) var(--space-lg)}.chip{position:relative}.chip input{opacity:0;width:0;height:0;position:absolute}.chip-label{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-family:var(--font);font-size:var(--font-size-body);font-weight:400;color:var(--text-secondary);background:var(--bg-primary);border:1.5px solid var(--border);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);user-select:none;-webkit-user-select:none}.chip input:checked+.chip-label{color:var(--accent);background:var(--accent-light);border-color:#0071e340;font-weight:500}.chip-label:active{transform:scale(.96)}.input-wrap{position:relative}.input{width:100%;font-family:var(--font);font-size:var(--font-size-callout);font-weight:400;color:var(--text-primary);background:var(--bg-primary);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:14px var(--space-md);outline:none;transition:border-color var(--duration-normal) var(--ease-out),box-shadow var(--duration-normal) var(--ease-out)}.input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px #0071e31a}.input::placeholder{color:var(--text-tertiary);font-weight:300}.input--with-prefix{padding-left:36px}.input-prefix{position:absolute;left:var(--space-md);top:50%;transform:translateY(-50%);color:var(--text-secondary);font-size:var(--font-size-callout);font-weight:400;pointer-events:none}.input-hint{font-size:var(--font-size-caption);color:var(--text-tertiary);margin-top:var(--space-xs);padding:0 var(--space-xs)}.segmented{display:flex;background:var(--bg-primary);border-radius:var(--radius-sm);padding:3px;gap:2px}.segmented input{opacity:0;width:0;height:0;position:absolute}.segmented label{flex:1;text-align:center;font-family:var(--font);font-size:var(--font-size-body);font-weight:400;color:var(--text-secondary);padding:8px 4px;border-radius:calc(var(--radius-sm) - 2px);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);user-select:none;-webkit-user-select:none;position:relative}.segmented input:checked+label{background:var(--bg-surface-solid);color:var(--text-primary);font-weight:500;box-shadow:var(--shadow-sm)}.tab-bar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--max-width);display:flex;justify-content:space-around;background:var(--bg-elevated);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-top:.5px solid var(--border);padding:var(--space-sm) 0 calc(var(--space-sm) + var(--safe-area-bottom));z-index:100}.tab-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-xs) var(--space-md);background:none;border:none;cursor:pointer;color:var(--text-tertiary);transition:color var(--duration-fast) var(--ease-out);font-family:var(--font);-webkit-tap-highlight-color:transparent}.tab-item.active{color:var(--accent)}.tab-icon{font-size:22px;line-height:1;height:26px;display:flex;align-items:center}.tab-label{font-size:10px;font-weight:500;letter-spacing:.01em}.watch-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg)}.watch-item:not(:last-child){border-bottom:.5px solid var(--border)}.watch-item-image{width:56px;height:56px;border-radius:var(--radius-sm);object-fit:cover;background:var(--bg-primary);flex-shrink:0}.watch-item-image--empty{display:flex;align-items:center;justify-content:center;background:var(--bg-primary);color:var(--text-tertiary);font-size:20px}.watch-item-image--empty:after{content:"📦"}.watch-item-info{flex:1;min-width:0}.watch-item-name{font-size:var(--font-size-body);font-weight:500;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}.watch-item-prices{display:flex;align-items:baseline;gap:var(--space-sm);margin-top:2px}.watch-item-current{font-size:var(--font-size-body);font-weight:600;color:var(--text-primary)}.watch-item-target{font-size:var(--font-size-caption);color:var(--text-tertiary);font-weight:300}.watch-item-delete{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-tertiary);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);flex-shrink:0;font-size:16px}.watch-item-delete:hover{background:var(--danger-light);color:var(--danger)}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-2xl) var(--space-lg)}.empty-state-icon{font-size:48px;margin-bottom:var(--space-md);opacity:.6}.empty-state-title{font-size:var(--font-size-headline);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}.empty-state-text{font-size:var(--font-size-body);color:var(--text-secondary);font-weight:300;max-width:260px;line-height:1.5}.spinner{width:24px;height:24px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md)}.loading-text{font-size:var(--font-size-body);color:var(--text-tertiary);font-weight:300}.toast{position:fixed;top:calc(var(--safe-area-top) + var(--space-md));left:50%;transform:translate(-50%) translateY(-100%);max-width:calc(var(--max-width) - var(--space-xl));background:var(--text-primary);color:var(--text-inverse);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-full);font-size:var(--font-size-body);font-weight:400;box-shadow:var(--shadow-lg);z-index:200;opacity:0;transition:all var(--duration-normal) var(--ease-spring);pointer-events:none}.toast.show{transform:translate(-50%) translateY(0);opacity:1}.prose{font-size:var(--font-size-body);line-height:1.65;color:var(--text-secondary);font-weight:300}.prose strong{color:var(--text-primary);font-weight:500}.prose p+p{margin-top:var(--space-md)}.prose ul{margin-top:var(--space-sm);margin-bottom:var(--space-sm);padding-left:var(--space-lg)}.prose li{margin-top:var(--space-xs)}.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-full);font-size:var(--font-size-caption);font-weight:500}.badge--success{background:var(--success-light);color:var(--success)}.badge--warning{background:var(--warning-light);color:var(--warning)}.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.gap-md{gap:var(--space-md)}.text-center{text-align:center}.text-secondary{color:var(--text-secondary)}.text-danger{color:var(--danger)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.w-full{width:100%}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000040;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:300;display:flex;align-items:flex-end;justify-content:center;padding:var(--space-lg);animation:overlay-in var(--duration-normal) var(--ease-out) both}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.dialog{background:var(--bg-surface-solid);border-radius:var(--radius-lg);padding:var(--space-xl);max-width:var(--max-width);width:100%;box-shadow:var(--shadow-lg);animation:dialog-in var(--duration-normal) var(--ease-spring) both}@keyframes dialog-in{0%{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.dialog-title{font-size:var(--font-size-title2);font-weight:600;letter-spacing:-.01em;margin-bottom:var(--space-sm)}.dialog-body{font-size:var(--font-size-body);color:var(--text-secondary);font-weight:300;line-height:1.5;margin-bottom:var(--space-xl)}.dialog-actions{display:flex;gap:var(--space-sm)}.dialog-actions .btn{flex:1}.dash-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);padding:var(--space-md) var(--space-lg)}.dash-card{background:var(--bg-surface);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:.5px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md);text-align:center}.dash-card-label{font-size:var(--font-size-caption);font-weight:400;color:var(--text-secondary);margin-bottom:var(--space-xs)}.dash-card-value{font-size:var(--font-size-title2);font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.dash-card-value--accent{color:var(--accent)}.ch-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg)}.ch-row:not(:last-child){border-bottom:.5px solid var(--border)}.ch-name{flex:1;font-size:var(--font-size-body);font-weight:500;color:var(--text-primary)}.ch-stat{font-size:var(--font-size-caption);color:var(--text-secondary);font-weight:400;white-space:nowrap}.ch-stat--accent{color:var(--accent);font-weight:600}.fb-post-area{resize:none;line-height:1.6;font-size:var(--font-size-caption);font-family:var(--font);white-space:pre-wrap}