/* ============================================================
   STAR Match · Cyberpunk Prototype Stylesheet
   PBI-006 視覺稿（找 STAR + 發案）
   -----------------------------------------------------------
   設計交付物（PROTOTYPE）— 供 frontend-dev-agent 後續轉 Blade。
   視覺語彙延續 resources/views/web/index.blade.php：
   霓虹青/藍/紫、深底、光暈、掃描線、霓虹邊框、卡片 hover。
   所有 CSS class 採 kebab-case。
   ============================================================ */

:root{
  /* —— 延續首頁既有變數（source of truth = home-poster Blade） —— */
  --cyan:#47e6ff;        /* Primary 主品牌色（霓虹青） */
  --blue:#1a77ff;        /* Secondary 次品牌色（電光藍） */
  --violet:#8d57ff;      /* Tertiary / Info（霓虹紫） */
  --deep:#020713;        /* 基礎深底 */
  --white:#eaf9ff;       /* 高強調文字（冷白） */
  --glow:0 0 18px rgba(69,226,255,.78), inset 0 0 24px rgba(69,226,255,.18);

  /* —— 文字階層（皆於深底達 WCAG AA 4.5:1） —— */
  --text-hi:#eaf9ff;     /* 16.9:1 on --deep */
  --text-mid:#aecbe0;    /* 9.4:1  on --deep — 正文 */
  --text-low:#7f9cb5;    /* 4.8:1  on --deep — Meta/輔助 */
  --text-disabled:#4a5a6b;

  /* —— 表面 / 邊框（沿用首頁 rgba 語彙） —— */
  --bg-page:#01030b;
  --surface:rgba(7,31,65,.55);       /* 卡片底 */
  --surface-2:rgba(9,24,48,.78);     /* 浮起面板 / Modal */
  --surface-3:rgba(2,13,31,.62);     /* 輸入框底 */
  --border-subtle:rgba(71,230,255,.22);
  --border:rgba(71,230,255,.34);
  --border-strong:rgba(71,230,255,.68);
  --border-focus:rgba(175,249,255,.95);

  /* —— Semantic（新增；與冷調霓虹家族和諧，詳見 tokens.json 理由） —— */
  --success:#3df5a0;     /* 薄荷霓虹綠 — 與青同屬冷調 */
  --success-soft:rgba(61,245,160,.14);
  --warning:#ffc24a;     /* 琥珀黃 — 唯一暖色，作低頻警示對比 */
  --warning-soft:rgba(255,194,74,.14);
  --error:#ff4d6d;       /* 霓虹洋紅紅 — 賽博龐克常見危險色 */
  --error-soft:rgba(255,77,109,.14);
  --info:#8d57ff;        /* 霓虹紫 */
  --info-soft:rgba(141,87,255,.16);

  /* —— VIP 金色（權限區隔專用，與藍紫對比醒目） —— */
  --vip:#ffd56b;
  --vip-soft:rgba(255,213,107,.14);

  /* —— 光暈別色 —— */
  --glow-blue:0 0 16px rgba(26,119,255,.55);
  --glow-violet:0 0 16px rgba(141,87,255,.5);
  --glow-success:0 0 14px rgba(61,245,160,.5);
  --glow-error:0 0 14px rgba(255,77,109,.5);
  --glow-vip:0 0 16px rgba(255,213,107,.5);

  /* —— 間距（4px 基準網格） —— */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* —— 圓角 —— */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* —— 字級 / 行高 —— */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px;
  --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px;
  --lh-tight:1.25; --lh-normal:1.6;

  /* —— 容器 —— */
  --container:1200px;
  --header-h:64px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;min-height:100%;}
body{
  background:
    radial-gradient(circle at 50% 0%, rgba(33,142,255,.20), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(113,77,255,.14), transparent 42%),
    linear-gradient(180deg,#01020a 0%,#03102554 40%,#01030b 100%) fixed,
    var(--bg-page);
  color:var(--text-hi);
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  overflow-x:hidden;
}
/* 全頁賽博龐克背景圖（藍色科技/雷射/半透明未來感，延續首頁）*/
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("cyber-bg.svg") center center / cover no-repeat fixed;
  opacity:.6;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{margin:0;line-height:var(--lh-tight);font-weight:700;}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:4px;}

/* 全頁掃描線疊層（延續首頁 stage::after） */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 9px);
  opacity:.5;mix-blend-mode:screen;
}

.container{width:min(100%,var(--container));margin:0 auto;padding:0 var(--sp-5);position:relative;z-index:2;}
.page-main{position:relative;z-index:2;padding:var(--sp-8) 0 var(--sp-12);}
.section-title{font-size:var(--fs-2xl);letter-spacing:.04em;text-shadow:0 0 14px rgba(69,226,255,.45);}
.text-muted{color:var(--text-mid);}
.text-meta{color:var(--text-low);font-size:var(--fs-sm);}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ============================================================
   App Header / 導覽列  (.app-header)
   ============================================================ */
.app-header{
  position:sticky;top:0;z-index:50;height:var(--header-h);
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(2,10,26,.92),rgba(1,4,13,.86));
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 26px rgba(23,152,255,.14);
  backdrop-filter:blur(8px);
}
.app-header .container{display:flex;align-items:center;gap:var(--sp-5);}
.brand-logo{font-size:var(--fs-lg);font-weight:800;letter-spacing:.12em;color:var(--cyan);text-shadow:0 0 12px rgba(69,226,255,.7);white-space:nowrap;}
.brand-logo span{color:var(--violet);text-shadow:0 0 12px rgba(141,87,255,.7);}
.main-nav{display:flex;gap:var(--sp-2);margin-left:var(--sp-2);}
.main-nav a{padding:8px 12px;border-radius:var(--r-sm);color:var(--text-mid);font-size:var(--fs-sm);letter-spacing:.05em;border:1px solid transparent;transition:.2s;}
.main-nav a:hover{color:var(--white);border-color:var(--border-strong);box-shadow:inset 0 0 14px rgba(71,230,255,.16);}
.main-nav a.is-active{color:var(--cyan);border-color:var(--border-strong);box-shadow:var(--glow);}
.header-spacer{flex:1;}
.header-actions{display:flex;align-items:center;gap:var(--sp-3);}
.nav-toggle{display:none;width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-3);color:var(--cyan);font-size:20px;cursor:pointer;}

/* ============================================================
   Buttons  (.btn)
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;letter-spacing:.05em;
  padding:10px 20px;border-radius:var(--r-pill);border:1px solid transparent;
  background:transparent;color:var(--white);cursor:pointer;white-space:nowrap;
  transition:.2s ease;
}
.btn:disabled,.btn.is-disabled{opacity:.45;cursor:not-allowed;color:var(--text-disabled);border-color:var(--text-disabled)!important;box-shadow:none!important;background:transparent!important;}
.btn-primary{border-color:var(--cyan);color:#021016;background:linear-gradient(180deg,var(--cyan),#1fb6e6);box-shadow:0 0 14px rgba(69,226,255,.4);}
.btn-primary:hover{box-shadow:var(--glow);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);filter:brightness(.94);}
.btn-secondary{border-color:var(--border-strong);color:var(--cyan);background:rgba(21,153,255,.06);}
.btn-secondary:hover{border-color:var(--border-focus);box-shadow:var(--glow);}
.btn-ghost{border-color:transparent;color:var(--text-mid);}
.btn-ghost:hover{color:var(--white);border-color:var(--border);}
.btn-danger{border-color:var(--error);color:var(--error);background:var(--error-soft);}
.btn-danger:hover{box-shadow:var(--glow-error);color:#fff;background:rgba(255,77,109,.22);}
.btn-sm{padding:6px 14px;font-size:var(--fs-xs);}
.btn-lg{padding:14px 28px;font-size:var(--fs-base);}
.btn-block{width:100%;}
.btn-icon{width:42px;height:42px;padding:0;border-radius:50%;}

/* ============================================================
   Search bar (pill)  — 延續首頁 .search-ui
   ============================================================ */
.search-bar{
  display:flex;align-items:center;gap:8px;flex:1;min-width:0;
  height:46px;padding:0 6px 0 18px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);background:var(--surface-3);
  box-shadow:inset 0 0 18px rgba(48,207,255,.18),0 0 14px rgba(36,198,255,.12);
  transition:.2s;
}
.search-bar:focus-within{border-color:var(--border-focus);box-shadow:0 0 22px rgba(71,230,255,.5),inset 0 0 18px rgba(71,230,255,.2);}
.search-bar .search-ico{color:var(--cyan);font-size:18px;}
.search-bar input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text-hi);font-size:var(--fs-sm);letter-spacing:.03em;}
.search-bar input::placeholder{color:var(--text-low);}
.search-bar.is-locked{opacity:.6;}

/* ============================================================
   Badges & Chips
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;border:1px solid var(--border);background:var(--surface);color:var(--text-mid);}
.badge-vip{color:var(--vip);border-color:rgba(255,213,107,.6);background:var(--vip-soft);text-shadow:0 0 8px rgba(255,213,107,.5);}
.badge-success{color:var(--success);border-color:rgba(61,245,160,.55);background:var(--success-soft);}
.badge-warning{color:var(--warning);border-color:rgba(255,194,74,.55);background:var(--warning-soft);}
.badge-danger{color:var(--error);border-color:rgba(255,77,109,.55);background:var(--error-soft);}
.badge-info{color:#c9b4ff;border-color:rgba(141,87,255,.6);background:var(--info-soft);}
.badge-pinned{color:var(--cyan);border-color:var(--border-strong);background:rgba(21,153,255,.1);box-shadow:0 0 10px rgba(69,226,255,.25);}

/* Chip / 標籤篩選 */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-pill);
  font-size:var(--fs-sm);color:var(--text-mid);border:1px solid var(--border);background:var(--surface);
  cursor:pointer;transition:.18s;user-select:none;
}
.chip:hover{color:var(--white);border-color:var(--border-strong);}
.chip.is-active{color:#021016;background:linear-gradient(180deg,var(--cyan),#1fb6e6);border-color:var(--cyan);font-weight:600;box-shadow:0 0 12px rgba(69,226,255,.35);}
.chip.is-locked{cursor:not-allowed;opacity:.55;border-style:dashed;}
.chip-remove{font-size:14px;line-height:1;opacity:.8;}

/* ============================================================
   Cards (shared)  — 延續首頁霓虹邊框 + hover 光暈
   ============================================================ */
.card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,var(--surface),rgba(2,10,26,.72));
  border:1px solid var(--border-subtle);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:0 14px 38px rgba(0,0,0,.55),0 0 22px rgba(69,226,255,.22);}
.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.45;}

/* ============================================================
   STAR Card  (.star-card)
   ============================================================ */
.grid-cards{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fill,minmax(252px,1fr));}
.star-card .star-cover{position:relative;aspect-ratio:4/3;overflow:hidden;background:#04101f;}
.star-cover img{width:100%;height:100%;object-fit:cover;}
.star-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(1,4,13,.78));}
.star-fav{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);background:rgba(1,8,20,.7);color:var(--text-mid);font-size:18px;cursor:pointer;transition:.2s;backdrop-filter:blur(4px);}
.star-fav:hover{color:var(--error);border-color:var(--error);box-shadow:var(--glow-error);}
.star-fav.is-on{color:var(--error);border-color:var(--error);}
.star-cat-row{position:absolute;left:10px;bottom:10px;z-index:2;display:flex;gap:6px;flex-wrap:wrap;}
.star-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);}
.star-name{font-size:var(--fs-lg);font-weight:700;display:flex;align-items:center;gap:8px;}
.rating{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);}
.rating .stars{color:var(--vip);letter-spacing:1px;text-shadow:0 0 8px rgba(255,213,107,.4);}
.rating .rating-num{color:var(--white);font-weight:600;}
.rating .rating-count{color:var(--text-low);}
.star-rate{font-size:var(--fs-base);color:var(--cyan);font-weight:700;}
.star-rate small{color:var(--text-low);font-weight:400;font-size:var(--fs-xs);}
.tag-row{display:flex;gap:6px;flex-wrap:wrap;}
.star-foot{display:flex;gap:8px;padding-top:var(--sp-2);border-top:1px solid var(--border-subtle);}

/* ============================================================
   Job / Case Card  (.job-card)
   ============================================================ */
.job-card{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);}
.job-card .job-top{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:flex-start;}
.job-title{font-size:var(--fs-xl);letter-spacing:.02em;}
.job-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-4);}
.job-meta-grid .mi{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-mid);}
.job-meta-grid .mi b{color:var(--white);font-weight:600;}
.job-meta-grid .mi .ico{color:var(--cyan);width:18px;text-align:center;}
.money{color:var(--success);font-weight:700;text-shadow:0 0 8px rgba(61,245,160,.3);}
.job-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border-subtle);}
.poster-mini{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-mid);}
.poster-mini img{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);}

.avatar{border-radius:50%;border:1px solid var(--border-strong);box-shadow:0 0 12px rgba(69,226,255,.3);object-fit:cover;}

/* Placeholder media（原型用，無外部圖片亦可呈現） */
.ph{background:
  radial-gradient(circle at 30% 25%, rgba(69,226,255,.35), transparent 45%),
  radial-gradient(circle at 75% 80%, rgba(141,87,255,.32), transparent 50%),
  linear-gradient(135deg,#062036,#0b1430);
  display:grid;place-items:center;color:rgba(174,203,224,.5);font-size:var(--fs-xs);letter-spacing:.1em;}
.ph-2{background:
  radial-gradient(circle at 70% 20%, rgba(26,119,255,.4), transparent 45%),
  radial-gradient(circle at 20% 85%, rgba(61,245,160,.22), transparent 50%),
  linear-gradient(135deg,#091a2e,#10172e);}
.ph-avatar{background:radial-gradient(circle at 40% 35%,#1a77ff,#062036);display:grid;place-items:center;color:var(--white);font-weight:700;}

/* ============================================================
   Filter sidebar / toolbar
   ============================================================ */
.toolbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5);}
.layout-with-aside{display:grid;grid-template-columns:264px 1fr;gap:var(--sp-6);align-items:start;}
.filter-panel{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-5);border-radius:var(--r-lg);border:1px solid var(--border-subtle);background:var(--surface-2);}
.filter-group{display:flex;flex-direction:column;gap:var(--sp-3);}
.filter-group > h4{font-size:var(--fs-sm);letter-spacing:.08em;color:var(--cyan);text-transform:uppercase;}
.filter-group .chip-wrap{display:flex;gap:8px;flex-wrap:wrap;}

/* VIP 鎖定區塊（免費會員不可用之進階篩選） */
.vip-lock{position:relative;border-radius:var(--r-md);}
.vip-lock .vip-lock-mask{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--r-md);border:1px dashed rgba(255,213,107,.5);
  background:linear-gradient(180deg,rgba(8,16,32,.62),rgba(8,16,32,.86));backdrop-filter:blur(2px);
  color:var(--vip);font-size:var(--fs-sm);text-align:center;padding:var(--sp-3);
}
.vip-lock .vip-lock-mask .lock-ico{font-size:20px;}
.vip-lock.is-locked > :not(.vip-lock-mask){filter:saturate(.4);pointer-events:none;}

/* ============================================================
   Form fields  (.field)
   ============================================================ */
.form-card{padding:var(--sp-8);border-radius:var(--r-lg);border:1px solid var(--border-subtle);background:var(--surface-2);}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--sp-5);}
.field > label{font-size:var(--fs-sm);font-weight:600;letter-spacing:.03em;color:var(--text-hi);}
.field .req{color:var(--error);margin-left:4px;}
.field .hint{font-size:var(--fs-xs);color:var(--text-low);}
.control{
  width:100%;font-family:inherit;font-size:var(--fs-base);color:var(--text-hi);
  padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--border);
  background:var(--surface-3);transition:.18s;
}
.control::placeholder{color:var(--text-low);}
.control:hover{border-color:var(--border-strong);}
.control:focus{outline:0;border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(71,230,255,.18),inset 0 0 14px rgba(71,230,255,.1);}
textarea.control{min-height:140px;resize:vertical;line-height:var(--lh-normal);}
select.control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);background-position:calc(100% - 18px) center,calc(100% - 12px) center;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px;}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);}
.input-affix{position:relative;display:flex;align-items:center;}
.input-affix .affix{position:absolute;left:14px;color:var(--text-low);font-size:var(--fs-sm);pointer-events:none;}
.input-affix .control{padding-left:34px;}

/* 驗證狀態 */
.field.is-error .control{border-color:var(--error);box-shadow:0 0 0 3px rgba(255,77,109,.16);}
.field.is-error .field-msg{color:var(--error);}
.field.is-success .control{border-color:var(--success);box-shadow:0 0 0 3px rgba(61,245,160,.14);}
.field.is-success .field-msg{color:var(--success);}
.field-msg{font-size:var(--fs-xs);display:flex;align-items:center;gap:6px;min-height:16px;}

/* checkbox / switch */
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--fs-sm);color:var(--text-mid);}
.check input{position:absolute;opacity:0;}
.check .box{width:22px;height:22px;border-radius:6px;border:1px solid var(--border-strong);background:var(--surface-3);display:grid;place-items:center;color:transparent;transition:.15s;}
.check input:checked + .box{background:linear-gradient(180deg,var(--cyan),#1fb6e6);border-color:var(--cyan);color:#021016;box-shadow:0 0 12px rgba(69,226,255,.35);}
.check input:focus-visible + .box{outline:2px solid var(--border-focus);outline-offset:2px;}

/* ============================================================
   Pagination
   ============================================================ */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:var(--sp-8);flex-wrap:wrap;}
.pagination a,.pagination span{
  min-width:40px;height:40px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-mid);font-size:var(--fs-sm);transition:.18s;
}
.pagination a:hover{color:var(--white);border-color:var(--border-strong);box-shadow:inset 0 0 14px rgba(71,230,255,.16);}
.pagination .is-active{color:#021016;background:linear-gradient(180deg,var(--cyan),#1fb6e6);border-color:var(--cyan);font-weight:700;box-shadow:0 0 12px rgba(69,226,255,.35);}
.pagination .is-disabled{opacity:.4;pointer-events:none;}

/* ============================================================
   States: Loading (skeleton) / Empty / Error
   ============================================================ */
.skeleton{position:relative;overflow:hidden;background:rgba(20,32,52,.6);border-radius:var(--r-sm);}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(120,200,255,.14),transparent);transform:translateX(-100%);animation:sk 1.3s infinite;}
@keyframes sk{to{transform:translateX(100%);}}
.sk-line{height:12px;margin:8px 0;border-radius:6px;}
.sk-cover{aspect-ratio:4/3;}

.state-block{
  text-align:center;padding:var(--sp-12) var(--sp-5);border-radius:var(--r-lg);
  border:1px dashed var(--border);background:var(--surface);color:var(--text-mid);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
}
.state-block .state-ico{font-size:44px;line-height:1;}
.state-block.is-error{border-color:rgba(255,77,109,.5);color:#ffc3cf;}
.state-block.is-error .state-ico{color:var(--error);text-shadow:var(--glow-error);}
.state-block h3{color:var(--white);font-size:var(--fs-xl);}

/* ============================================================
   Detail page layout
   ============================================================ */
.detail-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--sp-6);align-items:start;}
.aside-card{position:sticky;top:calc(var(--header-h) + 16px);padding:var(--sp-5);border-radius:var(--r-lg);border:1px solid var(--border-subtle);background:var(--surface-2);display:flex;flex-direction:column;gap:var(--sp-4);}
.profile-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);}
.profile-hero .hero-cover{aspect-ratio:21/7;object-fit:cover;width:100%;}
.profile-hero .hero-cover-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(1,4,13,.92));}
.profile-id{position:relative;z-index:2;display:flex;align-items:flex-end;gap:var(--sp-4);padding:var(--sp-5);margin-top:-72px;}
.profile-id .avatar-lg{width:104px;height:104px;}
.section-card{padding:var(--sp-6);border-radius:var(--r-lg);border:1px solid var(--border-subtle);background:var(--surface);margin-bottom:var(--sp-5);}
.section-card > h3{font-size:var(--fs-xl);margin-bottom:var(--sp-4);letter-spacing:.03em;color:var(--white);display:flex;align-items:center;gap:8px;}
.section-card > h3::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp-3);}
.portfolio-grid img{aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--border-subtle);transition:.2s;}
.portfolio-grid img:hover{border-color:var(--border-strong);box-shadow:var(--glow);}
.dl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);text-align:center;}
.dl-stats .stat{padding:var(--sp-3);border-radius:var(--r-md);border:1px solid var(--border-subtle);background:var(--surface-3);}
.dl-stats .stat b{display:block;font-size:var(--fs-xl);color:var(--cyan);}
.dl-stats .stat span{font-size:var(--fs-xs);color:var(--text-low);}

.review-item{padding:var(--sp-4) 0;border-bottom:1px solid var(--border-subtle);display:flex;gap:var(--sp-3);}
.review-item:last-child{border-bottom:0;}

/* ============================================================
   Toast (延續首頁)
   ============================================================ */
.toast{
  position:fixed;z-index:200;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
  max-width:calc(100vw - 32px);padding:12px 18px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);background:rgba(1,13,31,.92);box-shadow:0 0 22px rgba(71,230,255,.38);
  color:#eaffff;font-size:var(--fs-sm);text-align:center;backdrop-filter:blur(8px);transition:.24s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============================================================
   Footer
   ============================================================ */
.app-footer{margin-top:var(--sp-12);padding:var(--sp-6) 0;border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(2,10,26,.7),rgba(1,4,13,.95));}
.app-footer .container{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;align-items:center;}
.app-footer .copyright{color:var(--text-low);font-size:var(--fs-xs);}

/* ============================================================
   Filter drawer backdrop (mobile)
   ============================================================ */
.drawer-backdrop{position:fixed;inset:0;z-index:60;background:rgba(1,4,13,.6);backdrop-filter:blur(2px);display:none;}
.drawer-backdrop.show{display:block;}

/* ============================================================
   RWD
   ============================================================ */
@media (max-width:992px){
  .detail-grid{grid-template-columns:1fr;}
  .aside-card{position:static;}
  .layout-with-aside{grid-template-columns:1fr;}
  .filter-panel{
    position:fixed;top:0;left:0;z-index:70;height:100dvh;width:min(86vw,320px);
    border-radius:0;transform:translateX(-105%);transition:transform .25s ease;overflow-y:auto;
  }
  .filter-panel.show{transform:translateX(0);}
}
@media (max-width:768px){
  .main-nav{display:none;}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .job-meta-grid{grid-template-columns:1fr;}
  .dl-stats{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .section-title{font-size:var(--fs-xl);}
}
@media (max-width:480px){
  .container{padding:0 var(--sp-4);}
  .grid-cards{grid-template-columns:1fr 1fr;gap:var(--sp-3);}
  .star-body{padding:var(--sp-3);}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  body::after{display:none;}
}