/* ============================================================
   愛嬉遊 iSeeYou — Design Tokens & Components v2
   頂級 UI/UX 升級:線性 SVG 圖示系統・層次陰影・focus/hover 狀態・零 emoji
   命名:--isu-* (tokens)、.isu-* (components)。手機優先。
   ============================================================ */

:root {
  /* 品牌 */
  --isu-navy-900:#0A113D; --isu-navy-800:#141C4D; --isu-navy-700:#242E63;
  --isu-navy-600:#3A4680; --isu-navy-500:#5A6699; --isu-navy-100:#EAECF4;
  --isu-coral-700:#C63F2B; --isu-coral-600:#D24A35; --isu-coral-500:#E7614C;
  --isu-coral-400:#F07E6B; --isu-coral-100:#FCE7E2;
  --isu-violet-700:#4A3268; --isu-violet-600:#543872; --isu-violet-500:#654585;
  --isu-violet-300:#A98FC4; --isu-violet-100:#ECE5F2;
  /* 中性 */
  --isu-gray-900:#1A1D29; --isu-gray-700:#454B5A; --isu-gray-500:#828A9B;
  --isu-gray-400:#C3C9D4; --isu-gray-300:#DDE1E9; --isu-gray-200:#E9ECF1;
  --isu-gray-100:#F2F4F7; --isu-gray-50:#F7F8FB; --isu-white:#FFFFFF;
  /* 語意 */
  --isu-success:#2F9E44; --isu-success-bg:#EBFBEE;
  --isu-warning:#E8890C; --isu-warning-bg:#FFF4E6;
  --isu-danger:#E03131;  --isu-danger-bg:#FFF0F0;
  --isu-info:#2C64E3;    --isu-info-bg:#EDF2FF;
  /* 表面/文字 */
  --isu-bg:var(--isu-gray-50); --isu-surface:var(--isu-white); --isu-surface-alt:#EDEFF3;
  --isu-text:var(--isu-gray-900); --isu-text-muted:var(--isu-gray-700);
  --isu-text-subtle:var(--isu-gray-500); --isu-text-on-brand:var(--isu-white);
  --isu-link:var(--isu-coral-600); --isu-border:var(--isu-gray-200);
  /* 字型 */
  --isu-font-body:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --isu-font-head:'Noto Sans TC','PingFang TC',system-ui,sans-serif;
  --isu-fs-display:1.75rem; --isu-fs-h1:1.5rem; --isu-fs-h2:1.25rem; --isu-fs-h3:1.125rem;
  --isu-fs-body-lg:1.0625rem; --isu-fs-body:1rem; --isu-fs-sm:0.875rem; --isu-fs-caption:0.75rem;
  --isu-lh-tight:1.28; --isu-lh-body:1.6;
  --isu-fw-regular:400; --isu-fw-medium:500; --isu-fw-bold:700; --isu-fw-black:900;
  /* 間距/圓角 */
  --isu-space-1:4px; --isu-space-2:8px; --isu-space-3:12px; --isu-space-4:16px;
  --isu-space-5:20px; --isu-space-6:24px; --isu-space-8:32px; --isu-space-10:40px;
  --isu-space-12:48px; --isu-space-16:64px;
  --isu-radius-sm:10px; --isu-radius-md:14px; --isu-radius-lg:18px; --isu-radius-xl:26px; --isu-radius-pill:999px;
  /* 層次陰影(雙層、染墨藍) */
  --isu-shadow-xs:0 1px 2px rgba(16,24,64,.05);
  --isu-shadow-sm:0 1px 2px rgba(16,24,64,.05),0 4px 10px -4px rgba(16,24,64,.08);
  --isu-shadow-md:0 2px 6px rgba(16,24,64,.06),0 12px 28px -8px rgba(16,24,64,.14);
  --isu-shadow-lg:0 8px 20px rgba(16,24,64,.10),0 24px 48px -12px rgba(16,24,64,.22);
  --isu-ring:0 0 0 4px var(--isu-coral-100);
  /* 版型 */
  --isu-container:480px; --isu-header-h:56px; --isu-tabbar-h:64px;
  --isu-motion:.22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
body.isu{margin:0;font-family:var(--isu-font-body);font-size:var(--isu-fs-body);line-height:var(--isu-lh-body);
  color:var(--isu-text);background:var(--isu-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;}
.isu ::selection{background:var(--isu-coral-100);}

/* ---------- 圖示系統 SVG Icons ---------- */
.isu-ic{width:1.25em;height:1.25em;flex:0 0 auto;display:inline-block;vertical-align:-.18em;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.isu-ic--sm{width:1em;height:1em;} .isu-ic--lg{width:1.5em;height:1.5em;}
.isu-ic-box{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--isu-radius-md);background:var(--isu-navy-100);color:var(--isu-navy-700);}
.isu-ic-box--coral{background:var(--isu-coral-100);color:var(--isu-coral-600);}
.isu-ic-box--violet{background:var(--isu-violet-100);color:var(--isu-violet-600);}

/* ---------- 文字 ---------- */
.isu h1,.isu h2,.isu h3{font-family:var(--isu-font-head);line-height:var(--isu-lh-tight);margin:0 0 var(--isu-space-3);color:var(--isu-navy-900);letter-spacing:-.01em;}
.isu-display{font-size:var(--isu-fs-display);font-weight:var(--isu-fw-black);line-height:var(--isu-lh-tight);color:var(--isu-navy-900);letter-spacing:-.02em;}
.isu-h1,.isu h1{font-size:var(--isu-fs-h1);font-weight:var(--isu-fw-bold);}
.isu-h2,.isu h2{font-size:var(--isu-fs-h2);font-weight:var(--isu-fw-bold);}
.isu-h3,.isu h3{font-size:var(--isu-fs-h3);font-weight:var(--isu-fw-medium);}
.isu-body-lg{font-size:var(--isu-fs-body-lg);}
.isu-small{font-size:var(--isu-fs-sm);}
.isu-caption{font-size:var(--isu-fs-caption);color:var(--isu-text-subtle);}
.isu-muted{color:var(--isu-text-muted);}
.isu a,.isu-link{color:var(--isu-link);text-decoration:none;font-weight:var(--isu-fw-medium);}

/* ---------- 按鈕 ---------- */
.isu-btn{--_bg:var(--isu-navy-900);--_fg:var(--isu-white);--_bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--isu-space-2);
  height:48px;padding:0 var(--isu-space-6);border-radius:var(--isu-radius-pill);
  font-family:var(--isu-font-body);font-size:var(--isu-fs-body);font-weight:var(--isu-fw-bold);
  background:var(--_bg);color:var(--_fg);border:1.5px solid var(--_bd);cursor:pointer;text-decoration:none;
  transition:transform var(--isu-motion),box-shadow var(--isu-motion),background var(--isu-motion),filter var(--isu-motion);}
.isu-btn .isu-ic{width:1.15em;height:1.15em;stroke-width:2;}
.isu-btn:hover{filter:brightness(1.06);}
.isu-btn:active{transform:translateY(1px) scale(.99);}
.isu-btn:focus-visible{outline:none;box-shadow:var(--isu-ring);}
.isu-btn:disabled,.isu-btn[aria-disabled="true"]{background:var(--isu-gray-200);color:var(--isu-gray-500);border-color:transparent;cursor:not-allowed;filter:none;transform:none;box-shadow:none;}
.isu-btn--block{display:flex;width:100%;}
.isu-btn--lg{height:52px;font-size:var(--isu-fs-body-lg);}
.isu-btn--sm{height:38px;padding:0 var(--isu-space-4);font-size:var(--isu-fs-sm);}
.isu-btn--primary{--_bg:var(--isu-coral-500);box-shadow:0 6px 16px -6px rgba(231,97,76,.6);}
.isu-btn--primary:hover{--_bg:var(--isu-coral-600);filter:none;}
.isu-btn--navy{--_bg:var(--isu-navy-900);}
.isu-btn--reward{--_bg:var(--isu-violet-500);box-shadow:0 6px 16px -6px rgba(101,69,133,.55);}
.isu-btn--reward:hover{--_bg:var(--isu-violet-600);filter:none;}
.isu-btn--outline{--_bg:transparent;--_fg:var(--isu-navy-900);--_bd:var(--isu-gray-300);box-shadow:none;}
.isu-btn--outline:hover{--_bd:var(--isu-navy-900);filter:none;}
.isu-btn--ghost{--_bg:transparent;--_fg:var(--isu-navy-700);box-shadow:none;}
.isu-btn--ghost:hover{--_bg:var(--isu-gray-100);filter:none;}
.isu-btn--danger{--_bg:var(--isu-danger);}
.isu-btn--icon{width:44px;height:44px;padding:0;border-radius:var(--isu-radius-pill);}

/* ---------- 卡片 ---------- */
.isu-card{background:var(--isu-surface);border-radius:var(--isu-radius-lg);box-shadow:var(--isu-shadow-sm);padding:var(--isu-space-4);border:1px solid rgba(16,24,64,.02);}
.isu-card--flat{box-shadow:none;border:1px solid var(--isu-border);}
.isu-card--link{cursor:pointer;}
@media(hover:hover){.isu-card--link:hover{transform:translateY(-2px);box-shadow:var(--isu-shadow-md);}}
.isu-card__media{position:relative;margin:calc(-1*var(--isu-space-4)) calc(-1*var(--isu-space-4)) var(--isu-space-3);border-radius:var(--isu-radius-lg) var(--isu-radius-lg) 0 0;overflow:hidden;aspect-ratio:16/10;background:var(--isu-gray-200);}
.isu-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
@media(hover:hover){.isu-card--link:hover .isu-card__media img{transform:scale(1.04);}}
.isu-card__media--overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,17,61,.72),transparent 55%);}
.isu-card__ontop{position:absolute;left:var(--isu-space-3);right:var(--isu-space-3);bottom:var(--isu-space-3);z-index:2;color:#fff;}
.isu-card__title{font-size:var(--isu-fs-h3);font-weight:var(--isu-fw-bold);color:var(--isu-navy-900);margin:0 0 2px;letter-spacing:-.01em;}
.isu-card__meta{font-size:var(--isu-fs-sm);color:var(--isu-text-subtle);}

/* 優惠券 */
.isu-coupon{position:relative;display:flex;background:var(--isu-surface);border-radius:var(--isu-radius-md);box-shadow:var(--isu-shadow-sm);overflow:hidden;}
.isu-coupon__stub{flex:0 0 96px;background:var(--isu-violet-500);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--isu-space-3);position:relative;}
.isu-coupon__stub::after{content:"";position:absolute;right:-1px;top:8px;bottom:8px;border-right:2px dashed rgba(255,255,255,.5);}
.isu-coupon__stub b{font-size:1.6rem;font-weight:var(--isu-fw-black);line-height:1;}
.isu-coupon__body{flex:1;padding:var(--isu-space-3) var(--isu-space-4);}
.isu-coupon::before,.isu-coupon::after{content:"";position:absolute;left:88px;width:14px;height:14px;background:var(--isu-bg);border-radius:50%;}
.isu-coupon::before{top:-7px;} .isu-coupon::after{bottom:-7px;}

/* 集章 */
.isu-stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--isu-space-3);}
.isu-stamp{aspect-ratio:1;border-radius:50%;border:2px dashed var(--isu-gray-400);display:flex;align-items:center;justify-content:center;color:var(--isu-gray-400);font-size:var(--isu-fs-sm);font-weight:var(--isu-fw-bold);}
.isu-stamp--on{background:var(--isu-violet-500);border-style:solid;border-color:var(--isu-violet-500);color:#fff;box-shadow:0 4px 10px -4px rgba(101,69,133,.6);}
.isu-stamp .isu-ic{width:1.1em;height:1.1em;stroke-width:2.5;}

/* ---------- 表單 ---------- */
.isu-field{margin-bottom:var(--isu-space-4);}
.isu-label{display:block;font-size:var(--isu-fs-sm);font-weight:var(--isu-fw-medium);color:var(--isu-text-muted);margin-bottom:var(--isu-space-2);}
.isu-input,.isu-select,.isu-textarea{width:100%;height:50px;padding:0 var(--isu-space-4);font-family:var(--isu-font-body);font-size:var(--isu-fs-body);color:var(--isu-text);
  background:var(--isu-white);border:1.5px solid var(--isu-gray-300);border-radius:var(--isu-radius-md);transition:border-color var(--isu-motion),box-shadow var(--isu-motion);outline:none;}
.isu-textarea{height:auto;min-height:120px;padding:var(--isu-space-3) var(--isu-space-4);line-height:var(--isu-lh-body);resize:vertical;}
.isu-input::placeholder,.isu-textarea::placeholder{color:var(--isu-text-subtle);}
.isu-input:focus,.isu-select:focus,.isu-textarea:focus{border-color:var(--isu-coral-500);box-shadow:var(--isu-ring);}
.isu-input:disabled{background:var(--isu-gray-100);color:var(--isu-text-subtle);}
.isu-field--error .isu-input,.isu-field--error .isu-select{border-color:var(--isu-danger);box-shadow:0 0 0 4px var(--isu-danger-bg);}
.isu-help{font-size:var(--isu-fs-caption);color:var(--isu-text-subtle);margin-top:var(--isu-space-1);}
.isu-field--error .isu-help{color:var(--isu-danger);}
.isu-input-icon{position:relative;} .isu-input-icon .isu-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--isu-text-subtle);}
.isu-input-icon .isu-input{padding-left:44px;}
.isu-otp{display:flex;gap:var(--isu-space-2);}
.isu-otp input{width:46px;height:54px;text-align:center;font-size:1.25rem;font-weight:var(--isu-fw-bold);border:1.5px solid var(--isu-gray-300);border-radius:var(--isu-radius-md);outline:none;transition:border-color var(--isu-motion),box-shadow var(--isu-motion);}
.isu-otp input:focus{border-color:var(--isu-coral-500);box-shadow:var(--isu-ring);}

/* Badge */
.isu-badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 var(--isu-space-3);border-radius:var(--isu-radius-pill);font-size:var(--isu-fs-caption);font-weight:var(--isu-fw-medium);letter-spacing:.02em;}
.isu-badge .isu-ic{width:.9em;height:.9em;}
.isu-badge--reward{background:var(--isu-violet-100);color:var(--isu-violet-700);}
.isu-badge--coral{background:var(--isu-coral-100);color:var(--isu-coral-700);}
.isu-badge--success{background:var(--isu-success-bg);color:var(--isu-success);}
.isu-badge--muted{background:var(--isu-gray-100);color:var(--isu-gray-700);}

/* ---------- 版型 ---------- */
.isu-app{max-width:var(--isu-container);margin:0 auto;min-height:100vh;background:var(--isu-bg);position:relative;}
.isu-header{position:sticky;top:0;z-index:20;height:var(--isu-header-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--isu-space-4);background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--isu-border);}
.isu-header__brand{font-weight:var(--isu-fw-black);color:var(--isu-navy-900);letter-spacing:.02em;font-size:var(--isu-fs-body-lg);}
.isu-iconbtn{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--isu-navy-100);color:var(--isu-navy-700);border:0;cursor:pointer;text-decoration:none;}
.isu-main{padding:var(--isu-space-4);padding-bottom:calc(var(--isu-tabbar-h) + var(--isu-space-10));}
.isu-section{margin-bottom:var(--isu-space-8);}
.isu-section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--isu-space-4);}
.isu-section__title{font-size:var(--isu-fs-h2);font-weight:var(--isu-fw-bold);color:var(--isu-navy-900);letter-spacing:-.01em;}
.isu-stack{display:flex;flex-direction:column;gap:var(--isu-space-4);}

/* 底部分頁列 */
.isu-tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--isu-container);
  height:calc(var(--isu-tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:flex;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--isu-border);z-index:30;}
.isu-tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--isu-gray-500);font-size:var(--isu-fs-caption);text-decoration:none;transition:color var(--isu-motion);}
.isu-tab .isu-ic{width:22px;height:22px;stroke-width:1.9;}
.isu-tab--active{color:var(--isu-coral-500);font-weight:var(--isu-fw-bold);}
.isu-tab--active .isu-ic{stroke-width:2.2;}
.isu-tab--active::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--isu-coral-500);}

/* 數字強調 */
.isu-metric{display:flex;flex-direction:column;}
.isu-metric__num{font-family:var(--isu-font-head);font-size:2rem;font-weight:var(--isu-fw-black);color:var(--isu-navy-900);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.isu-metric__label{font-size:var(--isu-fs-sm);color:var(--isu-text-subtle);margin-top:4px;}

/* 漸層品牌卡 */
.isu-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0A113D 0%,#242E63 60%,#3A2E63 100%);color:#fff;border-radius:var(--isu-radius-lg);padding:var(--isu-space-5);box-shadow:var(--isu-shadow-md);}
.isu-hero::after{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(231,97,76,.35),transparent 70%);}
.isu-hero > *{position:relative;z-index:1;}
.isu-hero .isu-metric__num{color:#fff;} .isu-hero .isu-metric__label{color:#AEB6D6;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}