/* ==========================================================================
   《怪獸電力公司》(Monsters, Inc.) 廠區超強烈風格樣式表
   Monsters, Inc. Laugh Energy Factory & Door Vault Design System
   以毛怪藍綠、紫色斑點、大眼仔螢光綠、黃黑安全警示紋與金屬驚笑能量瓶打造
   支援手機極致 RWD 響應式、全展開無拉桿傳送門與高對比淺色廠區質感
   ========================================================================== */

:root {
  /* 怪獸電力公司雙主角與廠區標誌色彩 (Iconic Monsters Colors) */
  --color-sulley-cyan: #00C4CC;        /* 🩵 毛怪藍綠: 蘇利文招牌毛色 */
  --color-sulley-cyan-dark: #00939A;
  --color-sulley-cyan-light: #E0F9FA;
  --color-sulley-purple: #8E44AD;      /* 💜 毛怪紫: 蘇利文身上經典紫點 */
  --color-sulley-purple-light: #F4E8F9;

  --color-mike-green: #84CC16;         /* 💚 大眼仔綠: 華斯基螢光鮮綠 */
  --color-mike-green-dark: #4D7C0F;
  --color-mike-green-light: #ECFCCB;

  --color-canister-yellow: #F59E0B;    /* ⚡ 能量瓶金黃: 經典驚叫/驚笑儲存罐 */
  --color-canister-yellow-bright: #FCD34D;
  --color-canister-yellow-light: #FEF3C7;

  --color-caution-yellow: #FFD600;     /* ⚠️ 廠區警示黃 */
  --color-caution-black: #1E293B;      /* ⚠️ 警示炭灰黑 */
  --color-danger-red: #EF4444;         /* 🚨 23-19 代碼警戒紅 */

  /* 淺色工業廠區底色 (Light Industrial Floor) */
  --bg-factory: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFFFFF;
  --bg-input: #FFFFFF;

  --border-card: #CBD5E1;
  --border-metal: #94A3B8;

  --text-main: #0F172A;                /* 工業黑藍，對比度極高極清晰 */
  --text-title: #020617;
  --text-sub: #475569;
  --text-muted: #64748B;

  --font-display: "Fredoka", "Noto Sans TC", sans-serif;
  --font-body: "Outfit", "Noto Sans TC", sans-serif;

  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 16px 40px rgba(0, 196, 204, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
}

/* 全域重設與怪獸電力公司明亮廠區背景 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-factory);
  background-image: 
    /* 毛怪紫色波斑暗紋 (Sulley Polka Dots) */
    radial-gradient(circle at 12% 14%, rgba(142, 68, 173, 0.15) 0%, transparent 22%),
    radial-gradient(circle at 88% 22%, rgba(0, 196, 204, 0.20) 0%, transparent 28%),
    radial-gradient(circle at 45% 65%, rgba(132, 204, 22, 0.12) 0%, transparent 25%),
    radial-gradient(circle at 80% 85%, rgba(142, 68, 173, 0.12) 0%, transparent 24%),
    radial-gradient(circle at 18% 85%, rgba(0, 196, 204, 0.16) 0%, transparent 26%),
    /* 廠區金屬拉絲與地磚網格 */
    linear-gradient(rgba(203, 213, 225, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203, 213, 225, 0.3) 1px, transparent 1px),
    linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 50%, #E2E8F0 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px, 100% 100%;
  background-attachment: fixed;
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ==========================================================================
   怪獸電力公司廠區大廳版頭 (Monsters, Inc. Factory Masthead)
   ========================================================================== */
.newspaper-masthead {
  background: #FFFFFF;
  border-bottom: 4px solid var(--color-sulley-cyan);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 1.8rem 1rem 1.4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* 頂部經典黃黑警示斜斑馬紋 (Caution Hazard Stripes) */
.newspaper-masthead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  background: repeating-linear-gradient(
    45deg,
    var(--color-caution-yellow),
    var(--color-caution-yellow) 15px,
    var(--color-caution-black) 15px,
    var(--color-caution-black) 30px
  );
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.masthead-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* 怪獸電力公司官方 M 標誌與雙主角吉祥物條 */
.factory-brand-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0.85rem;
}

.brand-eye-logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-sulley-cyan);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 196, 204, 0.4);
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  color: #FFF;
  border: 2px solid #FFF;
}

.brand-mascot-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 800;
  font-family: var(--font-display);
}

.pill-sulley {
  background: linear-gradient(135deg, var(--color-sulley-cyan-light) 0%, #B2EBF2 100%);
  color: var(--color-sulley-cyan-dark);
  border: 1.5px solid var(--color-sulley-cyan);
}

.pill-mike {
  background: linear-gradient(135deg, var(--color-mike-green-light) 0%, #DCFCE7 100%);
  color: var(--color-mike-green-dark);
  border: 1.5px solid var(--color-mike-green);
}

.newspaper-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-sub);
  border-bottom: 2px dashed #E2E8F0;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

/* 怪獸電力公司重磅粗體字 (毛怪藍綠 + 亮黃撞色) */
.newspaper-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #00A3AD 0%, #007B83 30%, #8E44AD 75%, #6C3483 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0, 196, 204, 0.25));
  margin: 0.2rem 0;
  line-height: 1.15;
}

/* 副標籤：怪獸電力公司警示安全牌 */
.newspaper-tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1E293B;
  background: #FFD600;
  border: 2px solid #1E293B;
  box-shadow: 3px 3px 0 #1E293B;
  padding: 0.45rem 1.5rem;
  border-radius: var(--radius-sm);
  margin-top: 0.65rem;
}

.newspaper-dateline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  background: #F8FAFC;
  border: 1.5px solid #CBD5E1;
  border-radius: var(--radius-md);
  padding: 0.65rem 1.4rem;
  margin-top: 1.2rem;
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   怪獸電力公司 • 廠區即時廣播條 (Monsters, Inc. Factory Broadcast)
   ========================================================================== */
.breaking-ticker-bar {
  background: #1E293B;
  border-bottom: 3px solid var(--color-caution-yellow);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  font-size: 0.92rem;
  overflow: hidden;
}

.ticker-badge {
  background: var(--color-caution-yellow);
  color: #1E293B;
  font-family: var(--font-display);
  font-weight: 900;
  padding: 0.6rem 1.4rem;
  letter-spacing: 0.08em;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  border-right: 2px solid #1E293B;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  background-color: #EF4444;
  border-radius: 50%;
  box-shadow: 0 0 10px #EF4444;
  animation: alarmPulse 1.2s infinite;
}

@keyframes alarmPulse {
  0% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.4; }
  100% { transform: scale(0.9); opacity: 1; }
}

.ticker-content {
  padding: 0.6rem 1.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  color: #F8FAFC;
  font-weight: 600;
}

/* ==========================================================================
   主要容器與工廠金屬卡片 (Factory Industrial Cards)
   ========================================================================== */
.app-container {
  max-width: 1100px;
  margin: 2.2rem auto 4.5rem;
  padding: 0 1rem;
}

.editorial-card {
  background: var(--bg-card);
  border: 2px solid #CBD5E1;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  margin-bottom: 2.2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}

/* 頂部毛怪紫與藍綠雙色裝飾飾條 */
.editorial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--color-sulley-cyan) 0%, var(--color-sulley-purple) 50%, var(--color-mike-green) 100%);
}

.editorial-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-sulley-cyan);
}

.card-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #E2E8F0;
  padding-bottom: 0.95rem;
  margin-bottom: 1.75rem;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--text-title);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.card-subtitle {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-sulley-cyan-dark);
  background: var(--color-sulley-cyan-light);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-sulley-cyan);
}

/* ==========================================================================
   【新增特色畫面 1】怪獸電力公司六大明星職員導覽 (Monsters Roster)
   ========================================================================== */
.emotions-character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.1rem;
  margin-bottom: 2.2rem;
}

.emotion-character-card {
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}

.emotion-character-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(0, 196, 204, 0.15);
}

.card-sulley { border-top: 5px solid var(--color-sulley-cyan); }
.card-mike { border-top: 5px solid var(--color-mike-green); }
.card-boo { border-top: 5px solid #EC4899; }
.card-celia { border-top: 5px solid var(--color-sulley-purple); }
.card-roz { border-top: 5px solid #F59E0B; }
.card-cda { border-top: 5px solid #EF4444; }

.character-orb-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 0.65rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.character-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.character-role-tag {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 0.6rem;
}

.character-quote {
  font-size: 0.82rem;
  color: var(--text-sub);
  line-height: 1.45;
  text-align: left;
}

/* ==========================================================================
   【新增特色畫面 2】皮克斯特展五大經典展區導覽 (Exhibition Highlights)
   ========================================================================== */
.personality-islands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.35rem;
  margin-bottom: 2rem;
}

.island-card {
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 1.35rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 1rem;
  align-items: center;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.island-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-sulley-cyan);
}

.island-icon-box {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.85rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.island-info h5 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: 0.25rem;
}

.island-info p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ==========================================================================
   員工核身打卡艙 (Monsters Employee Timeclock Login)
   ========================================================================== */
.login-section {
  max-width: 560px;
  margin: 2.5rem auto;
  border: 3px solid var(--color-sulley-cyan);
  box-shadow: 0 16px 45px rgba(0, 196, 204, 0.15), 0 4px 15px rgba(0, 0, 0, 0.06);
}

.login-editorial-banner {
  background: linear-gradient(135deg, var(--color-sulley-cyan-light) 0%, #E0F2FE 100%);
  border-left: 5px solid var(--color-sulley-cyan);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  margin-bottom: 1.85rem;
  font-size: 0.96rem;
  color: #0F4C5C;
  line-height: 1.6;
  border: 1.5px solid #BAE6FD;
  border-left-width: 5px;
}

.login-editorial-banner strong {
  color: #007B83;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}

.form-input {
  width: 100%;
  padding: 0.9rem 1.2rem;
  font-size: 1.08rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text-title);
  border: 2px solid #CBD5E1;
  border-radius: var(--radius-md);
  background-color: var(--bg-input);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-sulley-cyan);
  box-shadow: 0 0 0 4px rgba(0, 196, 204, 0.25);
}

.input-instruction-tag {
  display: inline-block;
  font-size: 0.9rem;
  color: #007B83;
  background: var(--color-sulley-cyan-light);
  border: 1.5px solid var(--color-sulley-cyan);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.85rem;
  margin-top: 0.6rem;
  font-weight: 700;
}

.input-instruction-tag strong {
  color: #004D53;
  text-decoration: underline;
}

/* 怪獸打卡主按鈕 (Sulley Power Button) */
.btn-primary {
  width: 100%;
  padding: 1.05rem 2rem;
  background: linear-gradient(135deg, #00D4DE 0%, #00A3AD 45%, #007B83 100%);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 900;
  border: 2px solid #005A60;
  border-radius: var(--radius-pill);
  cursor: pointer;
  letter-spacing: 0.06em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 8px 25px rgba(0, 196, 204, 0.4), 0 3px 0 #005A60;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-top: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 196, 204, 0.55), 0 4px 0 #005A60;
  background: linear-gradient(135deg, #33E1EA 0%, #00C4CC 45%, #00939A 100%);
}

.btn-primary:active {
  transform: translateY(2px) scale(0.99);
  box-shadow: 0 2px 8px rgba(0, 196, 204, 0.4), 0 1px 0 #005A60;
}

/* ==========================================================================
   員工身分控制艙 (Agent Identity Strip)
   ========================================================================== */
.user-identity-strip {
  background: #FFFFFF;
  border: 2px solid var(--color-sulley-cyan);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-bottom: 2.2rem;
}

.user-identity-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.user-name-badge {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  color: #007B83;
}

.user-meta-tag {
  font-size: 0.9rem;
  background: #F1F5F9;
  border: 1.5px solid #CBD5E1;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  color: var(--text-sub);
  font-weight: 700;
}

.quota-pill {
  background: linear-gradient(135deg, #00C4CC 0%, #00939A 100%);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 900;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 10px rgba(0, 196, 204, 0.35);
}

.quota-pill.quota-full {
  background: #64748B;
  box-shadow: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.btn-sm-ghost {
  padding: 0.55rem 1.2rem;
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  color: var(--text-title);
  font-size: 0.9rem;
  font-weight: 800;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.btn-sm-ghost:hover {
  background: #F8FAFC;
  border-color: var(--color-sulley-cyan);
  color: #007B83;
}

.btn-admin-special {
  background: linear-gradient(135deg, var(--color-caution-yellow) 0%, #F59E0B 100%);
  color: #1E293B;
  border-color: #1E293B;
  font-weight: 900;
}

.btn-admin-special:hover {
  background: var(--color-caution-yellow);
  color: #000;
  box-shadow: 0 4px 15px rgba(255, 214, 0, 0.4);
}

/* ==========================================================================
   🚪 專屬登出按鈕 (Monsters Door Exit Logout Button)
   ========================================================================== */
.btn-logout {
  padding: 0.55rem 1.35rem;
  background: #FFF1F2;
  border: 2px solid #FDA4AF;
  color: #E11D48;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 3px 10px rgba(225, 29, 72, 0.1);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.btn-logout:hover {
  background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
  border-color: #BE123C;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.35);
  transform: translateY(-2px);
}

.btn-logout:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.2);
}

.btn-logout-icon {
  font-size: 1.15rem;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-logout:hover .btn-logout-icon {
  transform: translateX(-3px) scale(1.15);
}

/* 底部快捷登出條 (Dashboard Quick Logout Bar) */
.dashboard-exit-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0 0.5rem;
  margin-top: 2rem;
  border-top: 2px dashed #CBD5E1;
}

/* ==========================================================================
   官方已核發放映派遣證 (Dispatched Tickets - 已選票券)
   ========================================================================== */
.my-bookings-container {
  border: 2.5px solid var(--color-sulley-cyan);
  box-shadow: 0 12px 35px rgba(0, 196, 204, 0.14), var(--shadow-card);
}

.my-ticket-card {
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  border-left: 6px solid var(--color-sulley-cyan);
  padding: 1.5rem;
  margin-top: 1.1rem;
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.35rem;
  align-items: center;
  position: relative;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.my-ticket-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-sulley-cyan);
  box-shadow: 0 10px 25px rgba(0, 196, 204, 0.18);
}

.my-ticket-details h4 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--text-title);
  margin-bottom: 0.5rem;
}

.my-ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.95rem;
  color: var(--text-sub);
  font-weight: 600;
}

.my-ticket-badge {
  background: linear-gradient(135deg, var(--color-sulley-cyan-light) 0%, #B2EBF2 100%);
  color: var(--color-sulley-cyan-dark);
  font-family: var(--font-display);
  font-weight: 900;
  padding: 0.3rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-sulley-cyan);
}

.btn-delete-ticket {
  padding: 0.7rem 1.35rem;
  background: #FEE2E2;
  border: 2px solid #F87171;
  color: #DC2626;
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.btn-delete-ticket:hover {
  background: #EF4444;
  color: #FFF;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35);
  transform: translateY(-1px);
}

/* ==========================================================================
   🚪 怪獸傳送門日期標籤 (Door Station Tabs - 直接顯示各日剩餘票數)
   ========================================================================== */
.date-filter-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.85rem;
  padding: 0.5rem 0 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 2px solid #E2E8F0;
}

.date-tab-btn {
  padding: 0.8rem 0.9rem;
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-title);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  text-align: center;
}

/* 傳送門上方軌道掛勾裝飾 */
.date-tab-btn::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 4px;
  background: #64748B;
  border-radius: 2px;
}

.date-tab-btn:hover {
  background: #F8FAFC;
  border-color: var(--color-sulley-cyan);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 196, 204, 0.2);
}

.date-tab-btn.active {
  background: linear-gradient(135deg, #00D4DE 0%, #00A3AD 100%);
  color: #FFFFFF;
  border-color: #005A60;
  font-weight: 900;
  box-shadow: 0 8px 25px rgba(0, 196, 204, 0.45);
  transform: translateY(-2px) scale(1.02);
}

.date-tab-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: 0.02em;
  color: var(--text-title);
}

.date-tab-btn.active .date-tab-title {
  color: #FFFFFF;
}

.date-tab-stock-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
}

.date-stock-pill {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 900;
  padding: 0.22rem 0.75rem;
  border-radius: var(--radius-pill);
  background: #FEF3C7;
  color: #B45309;
  border: 1px solid #FCD34D;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.date-tab-btn.active .date-stock-pill {
  background: #FFFFFF;
  color: #007B83;
  border-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.date-stock-pill.low-stock {
  background: #FEE2E2;
  color: #DC2626;
  border-color: #FCA5A5;
}

.date-tab-btn.active .date-stock-pill.low-stock {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FFF;
}

.date-stock-pill.out-of-stock {
  background: #F1F5F9;
  color: #94A3B8;
  border-color: #CBD5E1;
}

.date-tab-btn.active .date-stock-pill.out-of-stock {
  background: rgba(255, 255, 255, 0.2);
  color: #E2E8F0;
  border-color: rgba(255, 255, 255, 0.4);
}

.date-stock-breakdown {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.date-tab-btn.active .date-stock-breakdown {
  color: rgba(255, 255, 255, 0.92);
}

/* ==========================================================================
   場次卡片矩陣 (Live Sessions Matrix)
   ========================================================================== */
.sessions-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.6rem;
}

.session-editorial-card {
  background: #FFFFFF;
  border: 2.5px solid #CBD5E1;
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s, border-color 0.25s;
  position: relative;
  overflow: hidden;
}

/* 頂部毛怪紫飾條 */
.session-editorial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--color-sulley-cyan), var(--color-sulley-purple));
}

.session-editorial-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-sulley-cyan);
  box-shadow: var(--shadow-card-hover);
}

.session-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--text-sub);
  margin-bottom: 0.75rem;
}

.session-time-pill {
  background: var(--color-sulley-cyan-light);
  color: #007B83;
  border: 1.5px solid var(--color-sulley-cyan);
  font-family: var(--font-display);
  font-weight: 800;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
}

.session-movie-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--text-title);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   ⚡ 3D 驚笑能量瓶席位儀表 (3D Laugh Canister Gauge)
   ========================================================================== */
.ticket-stock-display {
  background: #F8FAFC;
  border: 2px solid #CBD5E1;
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stock-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-title);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.stock-value-wrapper {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* 立體 3D 驚笑能量瓶罐體 (The 3D Laugh Canister) */
.stock-number {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 900;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #1E293B;
  position: relative;
  /* 經典金屬亮黃能量瓶罐身 */
  background: linear-gradient(135deg, #FFF59D 0%, var(--color-caution-yellow) 40%, #F59E0B 100%);
  border: 2.5px solid #475569;
  box-shadow: 
    0 4px 15px rgba(245, 158, 11, 0.4),
    inset -3px -3px 6px rgba(0, 0, 0, 0.2),
    inset 2px 2px 5px #FFF;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 能量瓶頂部金屬洩壓閥飾物 */
.stock-number::before {
  content: "";
  position: absolute;
  top: -6px;
  width: 20px;
  height: 4px;
  background: #475569;
  border-radius: 2px;
}

/* 席位緊張 (<=10)：23-19 代碼警報紅色能量瓶 */
.stock-number.low-stock {
  background: linear-gradient(135deg, #FFCDD2 0%, #EF4444 40%, #B71C1C 100%);
  border-color: #7F1D1D;
  box-shadow: 
    0 4px 18px rgba(239, 68, 68, 0.45),
    inset -3px -3px 6px rgba(0, 0, 0, 0.3),
    inset 2px 2px 5px #FFF;
  color: #FFF;
  animation: canisterAlert 1.1s infinite alternate;
}

@keyframes canisterAlert {
  0% { transform: scale(1); filter: drop-shadow(0 0 4px #EF4444); }
  100% { transform: scale(1.08); filter: drop-shadow(0 0 12px #EF4444); }
}

/* 售罄 (0 席)：暗灰排空能量瓶 */
.stock-number.out-of-stock {
  background: linear-gradient(135deg, #E2E8F0 0%, #94A3B8 60%, #64748B 100%);
  border-color: #475569;
  box-shadow: none;
  color: #475569;
}

.stock-pulse {
  animation: canisterRefill 0.7s ease-out;
}

@keyframes canisterRefill {
  0% { transform: scale(1.35); filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1); }
}

.stock-total-cap {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 700;
}

/* ==========================================================================
   選票控制組 (Booking Controls)
   ========================================================================== */
.booking-control-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.qty-select {
  padding: 0.75rem 1rem;
  font-size: 1.05rem;
  font-weight: 800;
  border: 2px solid #CBD5E1;
  border-radius: var(--radius-pill);
  background-color: #FFFFFF;
  color: var(--text-title);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

.qty-select:focus {
  outline: none;
  border-color: var(--color-sulley-cyan);
  box-shadow: 0 0 10px rgba(0, 196, 204, 0.3);
}

.btn-select-ticket {
  flex: 1;
  padding: 0.8rem 1.4rem;
  background: linear-gradient(135deg, var(--color-sulley-cyan-light) 0%, #B2EBF2 100%);
  border: 2px solid var(--color-sulley-cyan);
  color: #007B83;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.08rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 196, 204, 0.2);
}

.btn-select-ticket:hover:not(:disabled) {
  background: linear-gradient(135deg, #00D4DE 0%, #00A3AD 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(0, 196, 204, 0.4);
  transform: translateY(-2px);
}

.btn-select-ticket:disabled {
  background: #E2E8F0;
  border-color: #CBD5E1;
  color: #94A3B8;
  cursor: not-allowed;
  box-shadow: none;
}

/* ==========================================================================
   🚪 傳送門啟動確認視窗 (Door Station Confirmation Modal)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-backdrop.open {
  display: flex;
}

.editorial-modal {
  background: #FFFFFF;
  border: 3px solid var(--color-sulley-cyan);
  border-radius: var(--radius-lg);
  max-width: 530px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25), 0 0 35px rgba(0, 196, 204, 0.25);
  padding: 2.2rem;
  position: relative;
  animation: doorDropIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes doorDropIn {
  from { opacity: 0; transform: translateY(-30px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-headline {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 900;
  color: #007B83;
  border-bottom: 2px solid #E2E8F0;
  padding-bottom: 0.9rem;
  margin-bottom: 1.4rem;
}

.confirmation-receipt-box {
  background: #F8FAFC;
  border: 2px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 1.45rem;
  margin-bottom: 1.45rem;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed #CBD5E1;
}

.receipt-row:last-child {
  border-bottom: none;
}

.receipt-label {
  color: var(--text-sub);
  font-weight: 600;
}

.receipt-val {
  font-weight: 800;
  color: var(--text-title);
}

.modal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn-secondary {
  flex: 1;
  padding: 0.95rem;
  background: #F1F5F9;
  border: 2px solid #CBD5E1;
  color: var(--text-title);
  font-family: var(--font-display);
  font-weight: 800;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: #E2E8F0;
}

/* ==========================================================================
   Toast 提示訊息
   ========================================================================== */
.toast-notice {
  position: fixed;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: #FFFFFF;
  border: 3px solid var(--color-sulley-cyan);
  color: var(--text-title);
  padding: 1rem 2.2rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 0 20px rgba(0, 196, 204, 0.3);
  z-index: 2000;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 90vw;
  text-align: center;
}

.toast-notice.show {
  transform: translateX(-50%) translateY(0);
}

.toast-notice.success {
  border-color: var(--color-mike-green);
}

.toast-notice.error {
  border-color: var(--color-danger-red);
}

/* ==========================================================================
   手機極致適配 (Mobile Responsive)
   ========================================================================== */
@media (max-width: 640px) {
  .newspaper-meta-top {
    font-size: 0.78rem;
  }
  .newspaper-title {
    font-size: 2.2rem;
  }
  .newspaper-dateline {
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
  }
  .factory-brand-strip {
    gap: 0.85rem;
    flex-wrap: wrap;
  }
  .emotions-character-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .personality-islands-grid {
    grid-template-columns: 1fr;
  }
  .user-identity-strip {
    flex-direction: column;
    align-items: stretch;
  }
  .nav-actions {
    justify-content: space-between;
  }
  .my-ticket-card {
    grid-template-columns: 1fr;
  }
  .btn-delete-ticket {
    width: 100%;
    justify-content: center;
  }
  .sessions-matrix {
    grid-template-columns: 1fr;
  }
}