/* ============================================================
   瑩生工具箱 — 品牌識別設計系統 (Brand Design System) v1
   單一來源：所有儀表板頁面與工具都 link 此檔，沿用同一套 token。
   修改這裡 = 全站同步更新。
   ============================================================ */
:root{
  /* —— 瑩生 × 國風青綠 v2（搭配青綠山水背景；CTA＝瑩生藍）—— */
  --ys-blue:#004E03;    /* 瑩生藍（品牌＋CTA 強調）*/
  --ys-paper:#F4F1EA;   /* 主底：暖宣紙 */
  --ys-paper-2:#E7EFE7; /* 次底：霧青 */
  --ys-tan:#DAD1C8;
  --ys-peri:#9BACD8;
  --ys-celadon:#DCEAE0; /* 霧青（柔填色）*/
  --ys-jade:#8FBCA6;    /* 青綠（次要面/tag）*/
  --ys-pine:#34564A;    /* 墨玉深綠（深度/文字）*/
  --ys-stone:#5E6B62; /* 石綠灰（中性文字/邊線）*/
  --ys-gold:#C2A15B;    /* 古典金（高級點綴）*/
  --ys-royal:#2C4A3E;   /* 主深綠（原深藍退役）*/
  --ys-ink:#18241E;     /* 最深墨綠（側欄/標題）*/
  --ys-orange:#004E03;  /* 焦點色改瑩生藍（原焦點橘退役）*/

  --ys-text:#22332b;
  --ys-muted:#5e6b62;
  --ys-line:rgba(52,86,74,.16);

  /* —— 字體 —— */
  --ys-serif:"Noto Serif TC","Songti TC","Source Han Serif TC",serif;   /* 標題：中文襯線、編輯感 */
  --ys-sans:-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif; /* 內文 */
  --ys-mono:"Space Grotesk",ui-monospace,"SFMono-Regular",Menlo,monospace; /* 數字 / eyebrow / tag */
  --ys-display:"Noto Serif TC","Songti TC","Source Han Serif TC",serif; /* hero 點綴（授權帳號改凝書體）*/

  /* —— 形狀與陰影 —— */
  --ys-r:22px; --ys-r-sm:14px; --ys-r-pill:999px;
  --ys-sh:0 1px 2px rgba(17,17,68,.04),0 8px 24px rgba(17,17,68,.06);
  --ys-sh-lift:0 2px 6px rgba(17,17,68,.06),0 18px 44px rgba(17,17,68,.12);

  /* —— 漸層磨砂（v2）：噪點貼圖（純 SVG，不增圖檔）—— */
  --ys-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* —— 文字元件 —— */
.ys-eyebrow{font-family:var(--ys-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ys-royal);opacity:.7;}
.ys-h1{font-family:var(--ys-serif);font-weight:600;font-size:40px;line-height:1.1;letter-spacing:.01em;color:var(--ys-ink);margin:0;}
.ys-h2{font-family:var(--ys-serif);font-weight:600;font-size:23px;line-height:1.25;letter-spacing:.01em;color:var(--ys-ink);margin:0;}
.ys-mono{font-family:var(--ys-mono);}
.ys-muted{color:var(--ys-muted);}

/* —— 卡片 —— */
.ys-card{background:rgba(255,255,255,.56);-webkit-backdrop-filter:blur(36px) saturate(185%);backdrop-filter:blur(36px) saturate(185%);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--ys-r);box-shadow:0 1px 2px rgba(40,70,58,.05),0 10px 30px rgba(40,70,58,.12);padding:24px;transition:transform .2s,box-shadow .2s;}
.ys-card-hover:hover{transform:translateY(-4px);box-shadow:var(--ys-sh-lift);}

/* —— 按鈕（pill）—— */
.ys-btn{font-family:var(--ys-sans);font-weight:600;font-size:14px;border:none;border-radius:var(--ys-r-pill);
  padding:11px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.18s;line-height:1;}
.ys-btn-primary{background:var(--ys-orange);color:#fff;}
.ys-btn-primary:hover{background:#e0760a;}
.ys-btn-dark{background:var(--ys-ink);color:var(--ys-paper);}
.ys-btn-dark:hover{background:#1c1c5a;}
.ys-btn-ghost{background:#fff;color:var(--ys-royal);border:1px solid var(--ys-line);}
.ys-btn-ghost:hover{border-color:var(--ys-orange);color:var(--ys-orange);}

/* —— 按鈕微互動（全站；含工具頁 .btn 與品牌 .ys-btn）—— */
.btn,.ys-btn{transition:transform .14s ease,box-shadow .2s ease,filter .2s ease,background .2s ease;position:relative;}
.btn:hover,.ys-btn:hover{transform:translateY(-1.5px);}
.btn:active,.ys-btn:active{transform:translateY(0) scale(.97);}
.btn:focus-visible,.ys-btn:focus-visible{outline:2px solid var(--ys-orange);outline-offset:2px;}
/* 主要動作鈕：漸層 + 內緣高光 + 光暈陰影（玻璃質感）*/
.ys-btn-primary{background:linear-gradient(180deg,#2a9d4f,var(--ys-blue));
  box-shadow:0 5px 14px rgba(42,157,79,.32),inset 0 1px 0 rgba(255,255,255,.38);}
.ys-btn-primary:hover{background:linear-gradient(180deg,#1f8f42,#00500a);
  box-shadow:0 8px 20px rgba(42,157,79,.42),inset 0 1px 0 rgba(255,255,255,.38);}
.btn-teal{box-shadow:0 5px 14px rgba(42,157,79,.28),inset 0 1px 0 rgba(255,255,255,.3);}
.btn-teal:hover{box-shadow:0 8px 20px rgba(42,157,79,.4),inset 0 1px 0 rgba(255,255,255,.3);filter:saturate(108%);}
.ys-btn-dark{box-shadow:0 5px 14px rgba(20,32,24,.26),inset 0 1px 0 rgba(255,255,255,.12);}
.btn-ghost:hover,.ys-btn-ghost:hover{box-shadow:0 5px 14px rgba(40,70,58,.10);}
@media(prefers-reduced-motion:reduce){ .btn,.ys-btn{transition:none;} .btn:hover,.ys-btn:hover,.btn:active,.ys-btn:active{transform:none;} }

/* —— 標籤 pill —— */
.ys-pill{font-family:var(--ys-mono);font-size:11px;letter-spacing:.04em;background:var(--ys-paper-2);
  color:var(--ys-royal);padding:6px 11px;border-radius:var(--ys-r-pill);display:inline-block;}

/* —— 表單 —— */
.ys-input,.ys-select,.ys-textarea{width:100%;font-family:var(--ys-sans);font-size:14px;padding:10px 12px;
  border:1px solid var(--ys-line);border-radius:12px;background:#fff;color:var(--ys-ink);}
.ys-input:focus,.ys-select:focus,.ys-textarea:focus{outline:none;border-color:var(--ys-orange);}
.ys-label{display:block;font-size:12px;color:var(--ys-muted);margin:9px 0 4px;}

/* —— 全站基礎 —— */
body{margin:0;}
.ys-side,.ys-side *,.ys-topbar,.ys-topbar *{box-sizing:border-box;}

/* —— 全站 Aurora 漸層背景（html body 提高優先序蓋過各頁 body 底色）—— */
html body{ background-color:var(--ys-paper); }
/* 固定背景層改用 ::before（取代 background-attachment:fixed，
   後者在 Chrome 桌面會讓 backdrop-filter 失效、卡片不模糊）*/
html body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(248,248,244,.12), rgba(238,242,236,.06)),
    url('/assets/bg-landscape.jpg');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}
/* —— 全站磨砂噪點疊層（由 nav.js 注入，蓋在最上層、不擋點擊）—— */
.ys-grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;background-image:var(--ys-noise);background-size:200px 200px;}

/* —— 側邊導覽（寬版深藍，浮動 detached）—— */
.ys-side{position:fixed;top:16px;left:16px;bottom:16px;width:236px;
  background:linear-gradient(168deg,rgba(46,49,44,.62) 0%,rgba(30,32,29,.58) 58%,rgba(20,22,19,.64) 100%);
  -webkit-backdrop-filter:blur(40px) saturate(170%);backdrop-filter:blur(40px) saturate(170%);color:#fff;
  border:1px solid rgba(255,255,255,.10);
  border-radius:26px;display:flex;flex-direction:column;padding:26px 14px 14px;box-shadow:var(--ys-sh-lift);
  z-index:60;transition:width .24s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.4,0,.2,1),box-shadow .24s;}
.ys-side-head{display:flex;align-items:center;gap:11px;padding:6px 8px 22px;}
.ys-side-head .ys-logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:var(--ys-mono);font-weight:700;font-size:15px;letter-spacing:.05em;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.3);}
.ys-side-head .ys-logo img{width:100%;height:100%;object-fit:contain;display:block;}
.ys-side-head .ys-brandname{font-family:var(--ys-serif);font-size:17px;font-weight:600;color:#fff;letter-spacing:.02em;line-height:1.1;}
.ys-nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-right:2px;}
.ys-nav::-webkit-scrollbar{width:0;}
.ys-nav-sect{font-family:var(--ys-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#8aa094;margin:14px 8px 8px;}
.ys-nav-sect:first-child{margin-top:4px;}

/* 搜尋列 */
.ys-search{display:flex;align-items:center;gap:8px;margin:4px 4px 8px;padding:9px 11px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);}
.ys-search svg{width:16px;height:16px;color:#9fb3a7;flex:0 0 auto;}
.ys-search input{flex:1;min-width:0;border:none;background:transparent;outline:none;color:#fff;font-size:13px;font-family:var(--ys-sans);}
.ys-search input::placeholder{color:#8aa094;}

/* 工具：九宮格圖磚 */
.ys-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ys-tile{position:relative;display:flex;flex-direction:column;gap:9px;padding:13px 12px;border-radius:15px;min-height:62px;
  color:#dbe5dd;text-decoration:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:.16s;}
.ys-tile svg{width:21px;height:21px;flex:0 0 auto;}
.ys-tile span{font-size:12.5px;line-height:1.2;}
.ys-tile:hover{background:rgba(255,255,255,.10);color:#fff;}
.ys-tile.on{background:linear-gradient(160deg,rgba(32,42,34,.92),rgba(16,22,17,.94));color:#fff;
  border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);}
.ys-tile .pin{position:absolute;top:6px;right:6px;width:22px;height:22px;padding:0;border:none;cursor:pointer;background:transparent;
  color:rgba(255,255,255,.45);opacity:0;transition:.15s;display:flex;align-items:center;justify-content:center;}
.ys-tile .pin svg{width:14px;height:14px;fill:none;}
.ys-tile:hover .pin{opacity:1;}
.ys-tile .pin:hover{color:#fff;}
.ys-tile .pin.active{opacity:1;color:var(--ys-gold);}
.ys-tile .pin.active svg{fill:var(--ys-gold);}

/* 常用：色點細列 */
.ys-favs{display:flex;flex-direction:column;gap:1px;}
.ys-favs a{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:10px;color:#cdd8d0;font-size:13px;text-decoration:none;transition:.16s;}
.ys-favs a:hover{background:rgba(255,255,255,.08);color:#fff;}
.ys-favs a.on{color:#fff;font-weight:600;}
.ys-favs .dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto;}

/* 資源：圓角盒列 */
.ys-boxes{display:flex;flex-direction:column;gap:7px;}
.ys-box{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;color:#cdd8d0;font-size:13.5px;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);transition:.16s;}
.ys-box svg{width:18px;height:18px;flex:0 0 auto;}
.ys-box:hover{background:rgba(255,255,255,.10);color:#fff;}
.ys-box.on{background:var(--ys-paper);color:var(--ys-ink);font-weight:600;border-color:transparent;box-shadow:0 2px 10px rgba(0,0,0,.22);}
.ys-side-user{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 10px;border-radius:15px;background:rgba(255,255,255,.06);}
.ys-side-user .av{width:33px;height:33px;border-radius:50%;background:var(--ys-blue);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--ys-mono);font-weight:600;font-size:13px;flex:0 0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 7px rgba(42,157,79,.28);}
.ys-side-user .meta{min-width:0;flex:1;}
.ys-side-user .nm{font-size:13px;color:#fff;font-weight:600;line-height:1.25;}
.ys-side-user .em{font-size:10.5px;color:#9bb0a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* —— 行動版頂列 + 遮罩 —— */
.ys-topbar{display:none;position:fixed;top:0;left:0;right:0;height:54px;color:#fff;
  background:linear-gradient(180deg,rgba(20,20,74,.98),rgba(13,13,54,.97));
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  z-index:55;align-items:center;gap:10px;padding:0 14px;box-shadow:0 2px 12px rgba(17,17,68,.28);}
.ys-topbar .ys-burger{width:40px;height:40px;border:none;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:12px;padding:0;flex:0 0 auto;}
.ys-topbar .ys-burger svg{width:22px;height:22px;display:block;}
.ys-topbar .ys-burger:hover{background:rgba(255,255,255,.16);}
.ys-topbar .ys-burger:active{background:rgba(255,255,255,.24);}
.ys-topbar .ys-tb-logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:var(--ys-mono);font-weight:700;font-size:13px;letter-spacing:.05em;color:#fff;}
.ys-topbar .ys-tb-logo img{width:100%;height:100%;object-fit:contain;}
.ys-topbar .ys-tb-title{font-family:var(--ys-serif);font-size:16px;font-weight:600;}
.ys-backdrop{position:fixed;inset:0;background:rgba(17,17,68,.45);z-index:58;opacity:0;pointer-events:none;transition:opacity .28s;}

/* —— 桌機：側欄預設收合（乾淨圖示、置中），滑鼠移入展開 —— */
@media(min-width:1025px){
  .ys-pad{padding-left:104px;}
  .ys-side{width:76px;padding-left:12px;padding-right:12px;overflow:hidden;}
  .ys-side .ys-side-head{justify-content:center;gap:0;}
  .ys-side .ys-side-user{justify-content:center;gap:0;padding:6px 0;background:transparent;}
  /* 收合：文字歸零 */
  .ys-side .ys-brandname,.ys-side .ys-side-user .meta,
  .ys-side .ys-tile span,.ys-side .ys-box span,.ys-side .ys-search input{
    width:0;overflow:hidden;opacity:0;white-space:nowrap;transition:opacity .16s ease;}
  .ys-side .ys-side-user .meta,.ys-side .ys-search input{flex:0 0 0;}
  .ys-side .ys-nav-sect{height:0;margin:7px 0;overflow:hidden;opacity:0;}
  /* 收合＝乾淨圖示：搜尋/圖磚/盒列都去背去框、圖示置中 */
  .ys-side .ys-search{background:transparent;border:none;justify-content:center;gap:0;padding:10px 0;margin:6px 0 4px;}
  .ys-side .ys-tiles{grid-template-columns:1fr;gap:3px;}
  .ys-side .ys-tile{flex-direction:row;justify-content:center;gap:0;padding:11px 0;min-height:0;background:transparent;border-color:transparent;box-shadow:none;}
  .ys-side .ys-tile:hover{background:rgba(255,255,255,.09);}
  .ys-side .ys-tile.on{background:var(--ys-paper);color:var(--ys-ink);box-shadow:none;border-color:transparent;}
  .ys-side .ys-tile .pin{display:none;}
  .ys-side #ys-favs-slot{display:none;}
  .ys-side .ys-box{justify-content:center;gap:0;padding:11px 0;background:transparent;border-color:transparent;box-shadow:none;}
  .ys-side .ys-box:hover{background:rgba(255,255,255,.09);}
  .ys-side .ys-box.on{background:var(--ys-paper);color:var(--ys-ink);box-shadow:none;}
  /* 展開（hover）還原 */
  .ys-side:hover{width:236px;padding-left:14px;padding-right:14px;box-shadow:0 10px 44px rgba(13,13,54,.34);}
  .ys-side:hover .ys-side-head{justify-content:flex-start;gap:11px;}
  .ys-side:hover .ys-side-user{justify-content:flex-start;gap:10px;padding:9px 10px;background:rgba(255,255,255,.06);}
  .ys-side:hover .ys-brandname,.ys-side:hover .ys-side-user .meta,
  .ys-side:hover .ys-tile span,.ys-side:hover .ys-box span,.ys-side:hover .ys-search input{width:auto;opacity:1;}
  .ys-side:hover .ys-side-user .meta,.ys-side:hover .ys-search input{flex:1;}
  .ys-side:hover .ys-nav-sect{height:auto;margin:15px 8px 9px;opacity:1;}
  .ys-side:hover .ys-nav-sect:first-child{margin-top:4px;}
  .ys-side:hover .ys-search{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);justify-content:flex-start;gap:8px;padding:9px 11px;margin:4px 4px 8px;}
  .ys-side:hover .ys-tiles{grid-template-columns:1fr 1fr;gap:8px;}
  .ys-side:hover .ys-tile{flex-direction:column;justify-content:flex-start;gap:9px;padding:13px 12px;min-height:62px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);}
  .ys-side:hover .ys-tile.on{background:linear-gradient(160deg,rgba(32,42,34,.92),rgba(16,22,17,.94));color:#fff;border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);}
  .ys-side:hover #ys-favs-slot{display:block;}
  .ys-side:hover .ys-box{justify-content:flex-start;gap:11px;padding:11px 13px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);}
  .ys-side:hover .ys-box.on{background:var(--ys-paper);color:var(--ys-ink);box-shadow:0 2px 10px rgba(0,0,0,.22);}
}

/* —— 平板 / 手機：側欄收成抽屜 —— */
@media(max-width:1024px){
  .ys-side{top:0;bottom:0;left:0;width:264px;border-radius:0 22px 22px 0;transform:translateX(-112%);}
  body.ys-drawer-open .ys-side{transform:translateX(0);}
  body.ys-drawer-open .ys-backdrop{opacity:1;pointer-events:auto;}
  .ys-topbar{display:flex;}
  .ys-pad{padding-top:54px;}
}

/* ============================================================
   v3 體驗優化：表單統一質感 / 進場動畫 / 帳號選單
   ============================================================ */

/* —— 工具頁表單統一到品牌質感（.app 權重高於各頁內嵌樣式）—— */
.app input[type=text],.app input[type=number],.app input[type=date],.app input[type=email],
.app input[type=tel],.app input[type=url],.app select,.app textarea{
  border-radius:11px;padding:10px 13px;border:1px solid var(--ys-line);
  transition:border-color .15s,box-shadow .15s,background .15s;}
.app input[type=text]:focus,.app input[type=number]:focus,.app input[type=date]:focus,
.app input[type=email]:focus,.app input[type=tel]:focus,.app input[type=url]:focus,
.app select:focus,.app textarea:focus{
  border-color:var(--ys-blue);box-shadow:0 0 0 3px rgba(42,157,79,.18);outline:none;}
.app input[type=checkbox],.app input[type=radio]{accent-color:var(--ys-orange);width:16px;height:16px;}
.app .chk{border-radius:10px;transition:background .14s;padding:6px 8px;margin-left:-8px;}
.app .chk:hover{background:rgba(34,51,130,.05);}

/* —— 進場動畫（尊重 prefers-reduced-motion）—— */
@keyframes ysFade{from{opacity:0;}to{opacity:1;}}
@keyframes ysUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.ys-enter{opacity:0;animation:ysFade .5s ease forwards;}
.ys-up{opacity:0;animation:ysUp .55s cubic-bezier(.4,0,.2,1) forwards;}
.ys-stagger>*{opacity:0;animation:ysUp .55s cubic-bezier(.4,0,.2,1) forwards;}
.ys-stagger>*:nth-child(1){animation-delay:.04s;}
.ys-stagger>*:nth-child(2){animation-delay:.10s;}
.ys-stagger>*:nth-child(3){animation-delay:.16s;}
.ys-stagger>*:nth-child(4){animation-delay:.22s;}
.ys-stagger>*:nth-child(5){animation-delay:.28s;}
.ys-stagger>*:nth-child(6){animation-delay:.34s;}
.ys-stagger>*:nth-child(7){animation-delay:.40s;}
@media(prefers-reduced-motion:reduce){
  .ys-enter,.ys-up,.ys-stagger>*{animation:none;opacity:1;transform:none;}
}

/* —— 帳號下拉選單（首頁頭像 / 側欄使用者卡共用）—— */
.ys-side-user{cursor:pointer;}
.ys-menu{position:fixed;min-width:210px;background:#fff;border-radius:16px;box-shadow:var(--ys-sh-lift);
  border:1px solid var(--ys-line);padding:8px;z-index:9500;opacity:0;transform:translateY(6px) scale(.98);
  transform-origin:bottom left;pointer-events:none;transition:opacity .16s,transform .16s;}
.ys-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.ys-menu .mhead{padding:8px 10px 10px;border-bottom:1px solid var(--ys-line);margin-bottom:6px;}
.ys-menu .mhead .nm{font-size:13px;font-weight:600;color:var(--ys-ink);}
.ys-menu .mhead .em{font-size:11px;color:var(--ys-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ys-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:13.5px;
  color:var(--ys-royal);transition:background .14s,color .14s;text-decoration:none;}
.ys-menu a svg{width:17px;height:17px;}
.ys-menu a:hover{background:var(--ys-paper-2);}
.ys-menu a.danger{color:#c0392b;}
.ys-menu a.danger:hover{background:rgba(192,57,43,.08);}