/* 平台頁面（登入、班級、學習紀錄頁、老師端）
   2026-11 視覺改版：白、暖、透氣；細邊框分隔；狀態一律「圖示＋文字＋顏色」 */
:root{
  /* 底與線 */
  --bg:#FBF8F3; --card:#FFFFFF; --line:#EDE3D6; --soft:#F6F0E6;
  --field:#9C9083;            /* 輸入框外框（對白底 3.1:1） */
  --btn-line:#DCCFBE;         /* 次要按鈕外框 */
  /* 文字 */
  --ink:#2E2A26; --ink-2:#6E655C; --ink-3:#9A9084; /* ink-3 只當裝飾線，不用在文字 */
  /* 主色 */
  --primary:#C2543A; --primary-h:#A8472F; --primary-l:#FBEAE3;
  /* 輔助色（深階／淡底）；綠與黃比 Notion 原色稍深，讓小字對比達 4.5:1 */
  --green:#367156; --green-l:#E6F2EA;
  --honey:#7E611B; --honey-l:#FBF0D9;
  --sky:#3A6E93;   --sky-l:#E6F1F9;
  --lilac:#6A5A94; --lilac-l:#EFEBF8;
  /* 卡片頭漸層 */
  --g-honey:linear-gradient(135deg,#F3DFB4,#E9CE96);
  --g-matcha:linear-gradient(135deg,#CFE5D6,#B9D9C6);
  --g-lilac:linear-gradient(135deg,#DDD6F0,#CBC2E6);
  --g-sky:linear-gradient(135deg,#D2E5F1,#BED8EA);
  --g-banner:linear-gradient(100deg,#F9E3D4 0%,#F6EDDD 50%,#E7F0E7 100%);
  /* 菱形織紋（44×44、白線、.6） */
  --weave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.4'%3E%3Cpath d='M22 5 39 22 22 39 5 22Z'/%3E%3Cpath d='M22 14 30 22 22 30 14 22Z'/%3E%3C/g%3E%3C/svg%3E");
  /* 紅黑菱形紋帶（保留大同的文化識別） */
  --band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Crect width='20' height='10' fill='%232E2A26'/%3E%3Cpolygon points='10,1 17,5 10,9 3,5' fill='%23C2543A'/%3E%3Cpolygon points='10,3.6 12.6,5 10,6.4 7.4,5' fill='%232E2A26'/%3E%3C/svg%3E");
  /* 形狀 */
  --r-sm:12px; --r-card:16px; --r-lg:18px;
  --shadow:0 1px 2px rgba(0,0,0,.03);
  --ui:"Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",sans-serif;
  /* 舊變數名稱（程式裡少數地方還在用）指到新色 */
  --accent:var(--primary); --accent-d:var(--primary-h); --accent-l:var(--primary-l);
  --amber:var(--honey); --amber-l:var(--honey-l); --muted:var(--ink-2); --deep:var(--ink-2); --hover:var(--soft);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--ui);font-size:18px;color:var(--ink);background:var(--bg);line-height:1.7}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
[hidden]{display:none!important}
a{color:var(--primary-h)}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}
svg.i,.ab svg,.ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ===== 上方列 ===== */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top-in{max-width:1144px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;gap:16px}
.abrand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:19px;text-decoration:none;color:var(--ink);white-space:nowrap;min-height:44px}
.abrand .logo{width:36px;height:36px;border-radius:10px;background:var(--primary-l);display:grid;place-items:center;flex:none}
.abrand .logo svg{width:22px;height:22px}
.crumb{display:flex;gap:4px;align-items:center;min-width:0;overflow:hidden}
.crumb .sep{color:var(--ink-3);flex:none;display:grid;place-items:center}
.crumb .sep svg{width:16px;height:16px}
.crumb .cp{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:17px;color:var(--ink-2);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.crumb a.cp:hover{background:var(--soft);color:var(--ink)}
.crumb .cp.on{background:var(--primary-l);color:var(--primary-h);font-weight:600}
.top .sp{flex:1}
.who-chip{display:flex;align-items:center;gap:8px;font-size:17px;color:var(--ink-2);min-height:44px;padding:0 6px;border-radius:999px;text-decoration:none;white-space:nowrap}
.who-chip:hover{background:var(--soft)}
.mini-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;flex:none}
.link{background:none;border:none;color:var(--ink-2);cursor:pointer;font-size:17px;min-height:44px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.link:hover{background:var(--soft);color:var(--ink)}

/* ===== 版面 ===== */
.wrap{max-width:1144px;margin:0 auto;padding:24px 32px 80px}
.narrow{max-width:1144px}
.wrap.read{max-width:980px}   /* 文章頁：內文一行約 45 字 */
h1.pg{font-size:30px;line-height:1.35;margin:8px 0 4px}
.sub{color:var(--ink-2);font-size:17px;margin:0 0 24px}

/* ===== 按鈕 ===== */
.ab{border:1px solid var(--btn-line);background:var(--card);border-radius:var(--r-sm);min-height:44px;padding:0 18px;cursor:pointer;font-size:17px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;color:var(--ink);text-decoration:none}
.ab:hover{border-color:var(--field);background:#FFFDFA}
.ab.pri,.ab.dark{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
.ab.pri:hover,.ab.dark:hover{background:var(--primary-h);border-color:var(--primary-h)}
.ab.sm{padding:0 14px;font-size:16px}
.ab.danger{color:var(--primary-h);border-color:#EBC6BB}
.ab.danger:hover{background:var(--primary-l)}
.ab:disabled{opacity:.5;cursor:default}
a.ab{text-decoration:none;color:var(--ink)}
a.ab.dark,a.ab.pri{color:#fff}

/* ===== 狀態標籤（圖示＋文字＋顏色） ===== */
.wk,.tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 12px 3px 10px;font-size:15px;font-weight:700;line-height:1.5;white-space:nowrap}
.wk svg,.tag svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wk.ok{background:var(--green-l);color:var(--green)}
.wk.no{background:var(--honey-l);color:var(--honey)}
.wk.dr{background:var(--sky-l);color:var(--sky)}
.wk.lock{background:var(--primary-l);color:var(--primary-h)}
.wk.arch{background:var(--soft);color:var(--ink-2)}
.tag{background:var(--lilac-l);color:var(--lilac)}

/* ===== 登入 ===== */
.login-bg{min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:var(--bg)}
.login{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);width:min(480px,100%);overflow:hidden}
.login-head{background:var(--weave),var(--g-banner);padding:32px 32px 36px;position:relative}
.login-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--band) repeat-x}
.login-head .logo{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.78);display:grid;place-items:center;margin-bottom:12px}
.login-head .logo svg{width:26px;height:26px}
.login-head .s{font-size:15px;color:var(--ink-2)}
.login-head .t{font-size:28px;font-weight:700;color:var(--ink)}
.seg{display:flex;margin:24px 32px 0;background:var(--soft);border-radius:var(--r-sm);padding:4px}
.seg button{flex:1;border:none;background:none;min-height:44px;border-radius:9px;cursor:pointer;font-size:17px;color:var(--ink-2)}
.seg button.on{background:#fff;color:var(--primary-h);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.login form{padding:24px 32px 32px}
.fld{display:block;margin-bottom:16px}
.fld span{display:block;font-size:16px;color:var(--ink-2);margin-bottom:4px}
.fld input,.fld textarea,.fld select{width:100%;border:1px solid var(--field);border-radius:var(--r-sm);min-height:48px;padding:8px 14px;font-size:19px;background:#fff;outline:none}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-l)}
.chk{display:flex;align-items:center;gap:8px;font-size:17px;margin:4px 0 16px;min-height:44px}
.chk input{width:22px;height:22px;accent-color:var(--primary)}
.login .ab.pri{width:100%;min-height:52px;font-size:19px}
.or{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:15px;margin:16px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.login .ab.qr{width:100%}
.hint{font-size:15px;color:var(--ink-2);margin-top:16px}

/* ===== 學習紀錄頁的頭（橫幅＋頭像） ===== */
.blog-head{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.cover{height:132px;position:relative;background:var(--g-banner)}
.cover::before{content:"";position:absolute;inset:0;background:var(--weave);opacity:.45;mix-blend-mode:screen}
.cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--band) repeat-x}
.profile{display:flex;align-items:flex-start;gap:16px;padding:0 32px 24px;position:relative}
.avatar{width:84px;height:84px;border-radius:50%;color:#fff;font-size:34px;font-weight:700;display:grid;place-items:center;border:5px solid #fff;flex:none;margin-top:-42px;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.who{padding-top:12px;flex:1;min-width:0}
.blog-name{font-size:26px;font-weight:700;line-height:1.35}
.blog-sub{font-size:16px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.profile .act{padding-top:16px}

/* ===== 區塊標題 ===== */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 0 16px;flex-wrap:wrap}
.sec-head h2{font-size:22px;margin:0}
.sec-head .meta{color:var(--ink-2);font-size:16px}

/* ===== 筆記卡片 ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;padding:0;text-align:left;transition:transform .15s,border-color .15s;color:var(--ink)}
.card:hover{transform:translateY(-2px);border-color:#E0D2BF}
.card.draft{border:1.5px dashed #9DC0DA}
.thumb{height:118px;width:100%;position:relative;display:grid;place-items:center;flex:none}
.thumb.g0{background:var(--g-honey)} .thumb.g1{background:var(--g-matcha)} .thumb.g2{background:var(--g-lilac)} .thumb.g3{background:var(--g-sky)}
.thumb:not(.img)::before{content:"";position:absolute;inset:0;background:var(--weave);opacity:.45;mix-blend-mode:screen}
.thumb.img{background-size:cover;background-position:center;background-color:var(--soft)}
.badge{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.78);display:grid;place-items:center;position:relative}
.badge svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.g0 .badge{color:var(--honey)} .g1 .badge{color:var(--green)} .g2 .badge{color:var(--lilac)} .g3 .badge{color:var(--sky)}
.pill{position:absolute;top:12px;left:12px;border-radius:999px;padding:2px 12px;font-size:14px;font-weight:700;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.cb{padding:16px 20px 16px;display:flex;flex-direction:column;flex:1}
.cdate{font-size:15px;color:var(--ink-2)}
.ctitle{font-size:20px;font-weight:700;margin:4px 0 8px;line-height:1.4}
.cex{font-size:16px;color:var(--ink-2);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:16px;font-size:15px;color:var(--ink-2)}

/* ===== 班級卡片 ===== */
.class-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.class-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;padding:0;text-align:left;transition:transform .15s,border-color .15s;color:var(--ink)}
.class-card:hover{transform:translateY(-2px);border-color:#E0D2BF}
.class-card .band{height:96px;position:relative;background:var(--g-honey)}
.class-card .band.c8{background:var(--g-matcha)}
.class-card .band.arch{background:linear-gradient(135deg,#EFE8DD,#E3D9CB)}
.class-card .band::after{content:"";position:absolute;inset:0;background:var(--weave);opacity:.45;mix-blend-mode:screen}
.class-card .ci{padding:16px 20px 20px}
.class-card .cn{font-size:21px;font-weight:700}
.class-card .cm{font-size:16px;color:var(--ink-2);margin-top:2px}
.class-card .stat{display:flex;gap:16px;margin-top:12px;font-size:16px;flex-wrap:wrap;align-items:center}
.class-card .stat b{font-size:20px}

/* ===== 老師：班級頁 ===== */
.class-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ctabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:24px 0 24px;overflow-x:auto}
.ctabs a{min-height:48px;display:inline-flex;align-items:center;padding:0 16px;text-decoration:none;color:var(--ink-2);border-bottom:3px solid transparent;white-space:nowrap;font-size:18px}
.ctabs a:hover{color:var(--ink)}
.ctabs a.on{color:var(--primary-h);border-bottom-color:var(--primary);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;box-shadow:var(--shadow)}
.stat-card .k{font-size:16px;color:var(--ink-2);display:flex;align-items:center;gap:12px}
.stat-card .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.stat-card .v{font-size:28px;font-weight:700;line-height:1.3;margin-top:12px}
.stat-card .v small{font-size:17px;color:var(--ink-2);font-weight:500;margin-left:4px}
.ic.green{background:var(--green-l);color:var(--green)} .ic.honey{background:var(--honey-l);color:var(--honey)}
.ic.sky{background:var(--sky-l);color:var(--sky)} .ic.lilac{background:var(--lilac-l);color:var(--lilac)}
.bar{height:6px;border-radius:99px;background:var(--soft);margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px}
.bar.green i{background:linear-gradient(90deg,#8FC2A6,#4F8E6F)} .bar.honey i{background:linear-gradient(90deg,#EBD08F,#C9A045)}
.bar.sky i{background:linear-gradient(90deg,#A9CBE3,#5E92B8)} .bar.lilac i{background:linear-gradient(90deg,#C9BFE8,#8A7AB8)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.chip{border:1px solid var(--btn-line);background:var(--card);border-radius:999px;min-height:44px;padding:0 18px;cursor:pointer;font-size:16px;color:var(--ink-2)}
.chip:hover{border-color:var(--field)}
.chip.on{background:var(--primary-l);border-color:var(--primary-l);color:var(--primary-h);font-weight:700}
.filters .sp{flex:1}
.search,.searchbar input{border:1px solid var(--field);border-radius:999px;min-height:44px;padding:0 18px 0 44px;font-size:16px;width:240px;outline:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E655C' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center/20px}
.search:focus,.searchbar input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-l)}

.stu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.stu{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;padding:0;text-align:left;transition:transform .15s,border-color .15s;display:flex;flex-direction:column;color:var(--ink)}
.stu:hover{transform:translateY(-2px);border-color:#E0D2BF}
.stu .sthumb{height:88px;position:relative;flex:none}
.stu .sthumb.g0{background:var(--g-honey)} .stu .sthumb.g1{background:var(--g-matcha)} .stu .sthumb.g2{background:var(--g-lilac)} .stu .sthumb.g3{background:var(--g-sky)}
.stu .sthumb:not(.img)::before{content:"";position:absolute;inset:0;background:var(--weave);opacity:.45;mix-blend-mode:screen}
.stu .sthumb.img{background-size:cover;background-position:center}
.stu .sav{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:20px;border:3px solid #fff;position:absolute;left:16px;bottom:-24px}
.stu .sb{padding:32px 16px 16px;display:flex;flex-direction:column;flex:1}
.stu .sn{font-size:19px;font-weight:700;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.stu .sn small{font-size:15px;color:var(--ink-2);font-weight:400}
.stu .lt{font-size:16px;color:var(--ink);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stu .sm{font-size:15px;color:var(--ink-2);display:flex;gap:4px;margin:4px 0 12px}
.stu .wk{align-self:flex-start;margin-top:auto}

.tbl-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow-x:auto;box-shadow:var(--shadow)}
table.prog{border-collapse:collapse;width:100%;font-size:17px;white-space:nowrap}
.prog th,.prog td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left}
.prog th{font-size:15px;color:var(--ink-2);font-weight:500;background:var(--soft);position:sticky;top:0}
.prog td.c,.prog th.c{text-align:center}
.prog tbody tr:hover td{background:#FFFBF5}
.prog .nm{display:flex;align-items:center;gap:8px}
.prog .nm .mini-av{width:30px;height:30px;font-size:14px}
.prog th.cur,.prog td.cur{background:var(--primary-l)}
/* 進度圓點：形狀也不同，不只靠顏色 */
.dot{display:inline-block;width:20px;height:20px;border-radius:50%;vertical-align:middle;position:relative}
.dot.d{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") no-repeat center/14px}
.dot.r{background:#fff;border:2.5px solid var(--sky)}
.dot.r::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--sky)}
.dot.n{background:#fff;border:2px dashed var(--field)}
.legend{display:flex;gap:16px;font-size:15px;color:var(--ink-2);margin:12px 0;flex-wrap:wrap;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}

.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow);margin-bottom:24px;min-width:0}
.box h3{margin:0 0 8px;font-size:20px}
.box p.d{margin:0 0 16px;color:var(--ink-2);font-size:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
textarea.paste{width:100%;min-height:170px;border:1px solid var(--field);border-radius:var(--r-sm);padding:12px 14px;font-size:17px;line-height:1.7;outline:none;resize:vertical}
textarea.paste:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-l)}
.row-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
table.acct{border-collapse:collapse;width:100%;font-size:17px;white-space:nowrap}
.acct th,.acct td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left}
.acct th{font-size:15px;color:var(--ink-2);font-weight:500}
.mono{font-family:"Roboto Mono",ui-monospace,monospace;letter-spacing:.04em}
.teachers li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.teachers{list-style:none;margin:0 0 12px;padding:0}

.teacher-banner{background:var(--lilac-l);color:var(--lilac);border-radius:var(--r-sm);padding:8px 16px;font-size:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.teacher-banner b{color:#55467A}
.teacher-banner .sp{flex:1}

/* ===== 一篇筆記 ===== */
.post-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0 16px}
.post-bar .acts{display:flex;gap:8px;flex-wrap:wrap}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow)}
.post-meta{font-size:15px;color:var(--ink-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.post-title{font-size:30px;line-height:1.4;margin:12px 0 24px}
.post-body{font-size:19px;line-height:1.85}
.post-body h2{font-size:24px;color:var(--primary-h);margin:24px 0 8px}
.post-body img{border-radius:14px;background:linear-gradient(135deg,#F6EDDD,#EFE3CF)}
.post-body li::marker{color:var(--primary)}
.back-link{background:none;border:none;color:var(--ink-2);font-size:17px;cursor:pointer;min-height:44px;padding:0 8px 0 0;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.back-link:hover{color:var(--primary-h)}

/* ===== 登入卡 ===== */
.print-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sheet{background:#fff;width:794px;max-width:100%;margin:0 auto;padding:36px 34px;border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lc{border:1.5px dashed #BDB3A8;border-radius:12px;padding:14px 16px;display:flex;gap:14px;align-items:center;break-inside:avoid;min-height:230px}
.lc .info{flex:1;min-width:0}
.lc .school{font-size:13px;color:var(--ink-2)}
.lc .plat{font-size:15px;font-weight:700;color:var(--primary-h);margin-bottom:6px}
.lc .nm{font-size:22px;font-weight:700;line-height:1.3}
.lc .no{font-size:14px;color:var(--ink-2);margin-bottom:8px}
.lc .kv{font-size:14px;color:var(--ink-2)}
.lc .kv b{display:block;font-size:22px;color:var(--ink);font-family:"Roboto Mono",ui-monospace,monospace;letter-spacing:.06em;line-height:1.3}
.lc .qr{width:118px;text-align:center;font-size:12px;color:var(--ink-2);flex:none}
.lc .qr svg{width:118px;height:118px;display:block}

.atoast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 24px;border-radius:999px;font-size:17px;opacity:0;pointer-events:none;transition:.2s;z-index:120;max-width:90vw;text-align:center}
.atoast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 其他 ===== */
.loading{display:grid;place-items:center;min-height:60vh;color:var(--ink-2);font-size:18px}
.empty{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:32px 24px;text-align:center;color:var(--ink-2)}
.empty b{display:block;color:var(--ink);font-size:20px;margin-bottom:8px}
.msg{border-radius:var(--r-sm);padding:12px 16px;font-size:16px;margin-top:12px}
.msg.err{background:var(--primary-l);color:var(--primary-h)}
.msg.ok{background:var(--green-l);color:var(--green)}
.searchbar{display:flex;gap:12px;align-items:center;margin:0 0 16px}
.searchbar input{flex:1;max-width:440px;width:auto;font-size:17px}
.hits{display:flex;flex-direction:column;gap:12px}
.hit{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;cursor:pointer;text-align:left;font-size:17px;line-height:1.7;color:var(--ink)}
.hit:hover{border-color:#E0D2BF}
.hit .ht{font-weight:700;font-size:19px}
.hit .hd{font-size:15px;color:var(--ink-2)}
mark{background:#FFE79A;color:inherit;border-radius:3px;padding:0 2px}
.note-banner{background:var(--sky-l);color:var(--sky);border-radius:var(--r-sm);padding:12px 16px;font-size:16px;margin:0 0 16px;display:flex;align-items:flex-start;gap:12px}
.note-banner>span{flex:1;min-width:0}
.note-banner svg{margin-top:3px;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.preview-bar{position:sticky;top:0;z-index:25;background:var(--card);border-bottom:1px solid var(--line)}
.preview-bar .in{max-width:1144px;margin:0 auto;padding:8px 32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:64px}
.post-body.doc{font-size:12pt;zoom:1.15;white-space:normal}
.result-tbl{border-collapse:collapse;width:100%;font-size:17px;margin-top:12px}
.result-tbl td,.result-tbl th{padding:6px 12px;border-bottom:1px solid var(--line);text-align:left}
.result-tbl th{font-size:15px;color:var(--ink-2);font-weight:500}
.pick{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:260px;overflow:auto}
.pick label{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-sm);background:var(--soft);cursor:pointer}
.pick input{width:20px;height:20px;accent-color:var(--primary)}
.modal .fld{margin-bottom:12px}
.card-hidden{opacity:.55}

/* 對話框按鈕（樣式定義在 editor.css，這裡統一成新色） */
.pbtn,.sbtn,.dbtn{min-height:44px;border-radius:var(--r-sm)!important}
.pbtn{background:var(--primary)!important;color:#fff}
.pbtn:hover{background:var(--primary-h)!important}
.sbtn{border-color:var(--btn-line)!important}


/* ===== 第三階段 3-1：公開與審核 ===== */
.wk.wait{background:var(--honey-l);color:var(--honey)}
.wk.pub{background:var(--lilac-l);color:var(--lilac)}
.wk.rej{background:var(--primary-l);color:var(--primary-h)}
.cfoot .tags{display:flex;gap:8px;flex-wrap:wrap}
.cfoot{flex-wrap:wrap}
.ctabs .cnt{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;margin-left:8px;border-radius:999px;background:var(--honey-l);color:var(--honey);font-size:14px;font-weight:700}
.sec-head .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.share-box{display:flex;align-items:center;gap:16px;border-radius:var(--r-card);padding:16px 20px;margin:0 0 16px;border:1px solid var(--line);background:var(--card);flex-wrap:wrap}
.share-box>svg{width:24px;height:24px;flex:none}
.share-box .sx{flex:1;min-width:220px;display:flex;flex-direction:column}
.share-box .sx b{font-size:18px}
.share-box .sx span{font-size:16px;color:var(--ink-2)}
.share-box .sa{display:flex;gap:8px;flex-wrap:wrap}
.share-box.s-none>svg{color:var(--ink-2)}
.share-box.s-pending{background:var(--honey-l);border-color:#F1E0B8} .share-box.s-pending>svg,.share-box.s-pending b{color:var(--honey)}
.share-box.s-approved{background:var(--lilac-l);border-color:#DDD6F0} .share-box.s-approved>svg,.share-box.s-approved b{color:var(--lilac)}
.share-box.s-rejected{background:var(--primary-l);border-color:#F2D3C8} .share-box.s-rejected>svg,.share-box.s-rejected b{color:var(--primary-h)}

.wall-box{display:flex;gap:24px;align-items:center}
.wall-box .wl{flex:1;min-width:0}
.wall-box h3{display:flex;align-items:center;gap:8px}
.wall-box h3 svg{color:var(--lilac)}
.url-row{display:flex;gap:8px;flex-wrap:wrap}
.url-row .url{flex:1;min-width:200px;min-height:44px;border:1px solid var(--field);border-radius:var(--r-sm);padding:0 14px;font-size:16px;background:var(--soft);color:var(--ink);font-family:"Roboto Mono",ui-monospace,monospace}
.wall-box .wq{width:150px;flex:none;text-align:center;font-size:14px;color:var(--ink-2)}
.wall-box .wq svg{width:150px;height:150px;display:block;margin-bottom:4px}
.rv-list{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.rv{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rv:last-child{border-bottom:none}
.rv .rvm{flex:1;min-width:200px;display:flex;flex-direction:column;line-height:1.5}
.rv .rvm b{font-size:18px}
.rv .rvm span{font-size:15px;color:var(--ink-2)}
.rv .rva{display:flex;gap:8px;flex-wrap:wrap}

/* 展示牆 QR code 列印（一頁 4 張） */
.wsheet{grid-template-columns:1fr 1fr;gap:16px}
.wc{border:1.5px dashed #BDB3A8;border-radius:12px;padding:20px 16px;text-align:center;break-inside:avoid;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:470px;justify-content:center}
.wc .school{font-size:13px;color:var(--ink-2)}
.wc .wct{font-size:22px;font-weight:700}
.wc .wcs{font-size:16px;font-weight:700;color:var(--primary-h);letter-spacing:.1em}
.wc .wcq svg{width:190px;height:190px;display:block;margin:8px auto}
.wc .wcd{font-size:15px;line-height:1.6;max-width:260px}
.wc .wcu{font-size:10px;color:var(--ink-2);word-break:break-all;font-family:"Roboto Mono",ui-monospace,monospace;margin-top:4px}

/* 公開頁 */
.pub-school{font-size:16px;color:var(--ink-2);white-space:nowrap}
.wall-av{background:#fff!important;border-color:#fff}
.wall-av svg{width:46px;height:46px}
.by{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--ink);font-weight:500}
.by .mini-av{width:28px;height:28px;font-size:14px}
.cb .by{margin-bottom:4px}
@media (max-width:760px){
  .wall-box{flex-direction:column;align-items:stretch}
  .wall-box .wq{align-self:center}
  .pub-school{display:none}
  .rv .rva{width:100%}
  .wsheet{grid-template-columns:1fr}
}
@media print{ .wsheet{grid-template-columns:1fr 1fr;gap:6mm} .wc{min-height:0;height:124mm} }

/* ===== 平板／手機 ===== */
@media (max-width:960px){
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .top-in{padding:0 20px;gap:8px}
  .wrap{padding:16px 20px 64px}
  .abrand .bt{display:none}
  .crumb .cp:not(:last-child),.crumb .sep{display:none}
  .crumb .cp{max-width:none;padding:0 12px}
  .who-chip .wn,.link .wn{display:none}
  .link{padding:0 10px}
  .two{grid-template-columns:1fr}
  .post{padding:24px 20px 32px}
  .post-title{font-size:26px}
  .sheet{grid-template-columns:1fr}
  .profile{flex-wrap:wrap;padding:0 20px 20px}
  .profile .act{width:100%;padding-top:0}
  .profile .act .ab{width:100%}
  .blog-name{font-size:23px}
  .cards{grid-template-columns:1fr}
  .stu-grid{grid-template-columns:1fr}
  .filters .sp{display:none}
  .search{width:100%}
  .stats{gap:12px}
  .stat-card{padding:12px 16px}
  .stat-card .k{font-size:15px;gap:8px;align-items:flex-start}
  .post-body.doc{zoom:1.02}
  h1.pg{font-size:26px}
  .preview-bar .in{padding:8px 20px}
}
@media print{
  .top,.print-bar,.no-print,.atoast{display:none!important}
  body{background:#fff}
  .wrap{padding:0;max-width:none}
  .sheet{border:none;width:auto;padding:0}
  @page{size:A4;margin:12mm}
}

/* ===== 第三階段 3-2：刪除班級 ===== */
.danger-box{border-color:#EBC6BB}
.danger-box h3{color:var(--primary-h)}

/* ===== 第四階段：期末作品集（A4 直式；螢幕上是預覽，列印時每個 .pf-page 接著排） ===== */
.pf-wrap{max-width:calc(210mm + 64px)}
.pf-warn{display:none}
.pf-opts .chk{margin:0;min-height:44px}
.pf-page{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);width:210mm;max-width:100%;margin:0 auto 24px;padding:14mm 14mm 16mm;position:relative;color:#2B2725}
.pf-cover{padding:0;min-height:260mm;display:flex;flex-direction:column;overflow:hidden}
.pf-ban{height:72mm;position:relative;background:var(--weave),var(--g-banner);flex:none}
.pf-ban::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--band) repeat-x}
.pf-cin{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:16mm 14mm 14mm}
.pf-school{font-size:15pt;color:var(--ink-2);letter-spacing:.12em}
.pf-kind{font-size:30pt;font-weight:700;margin-top:6mm;letter-spacing:.08em}
.pf-class{font-size:16pt;color:var(--primary-h);margin-top:4mm;font-weight:700}
.pf-name{font-size:34pt;font-weight:700;margin-top:22mm;letter-spacing:.1em}
.pf-seat{font-size:15pt;color:var(--ink-2);margin-top:2mm;min-height:8mm}
.pf-stats{display:flex;gap:10mm;margin-top:16mm;justify-content:center;flex-wrap:wrap}
.pf-stats div{min-width:36mm;padding:5mm 4mm;border:1px solid var(--line);border-radius:4mm;background:var(--soft)}
.pf-stats b{display:block;font-size:19pt}
.pf-stats span{font-size:11pt;color:var(--ink-2)}
.pf-foot{margin-top:auto;padding-top:12mm;display:flex;flex-direction:column;gap:2mm;font-size:12pt;color:var(--ink-2)}
.pf-toc h2{font-size:20pt;margin:0 0 8mm;padding-bottom:3mm;border-bottom:2px solid var(--primary)}
.pf-toc ol{list-style:none;margin:0;padding:0}
.pf-toc li{display:flex;gap:5mm;align-items:baseline;padding:3mm 0;border-bottom:1px dashed var(--line);font-size:13pt;break-inside:avoid}
.pf-toc .w{flex:none;width:22mm;color:var(--primary-h);font-weight:700}
.pf-toc .t{flex:1;min-width:0}
.pf-toc .dt{flex:none;color:var(--ink-2);font-size:11pt}
.pf-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11pt;color:var(--ink-2)}
.pf-meta .tag{background:var(--primary-l);color:var(--primary-h);font-weight:700;border-radius:999px;padding:1mm 4mm}
.pf-meta .pf-no{margin-left:auto}
.pf-title{font-size:20pt;line-height:1.4;margin:4mm 0 6mm;padding-bottom:3mm;border-bottom:2px solid var(--primary)}
.pf-body{font-size:12pt;white-space:normal}
.pf-body img{max-height:200mm;width:auto;break-inside:avoid}
.pf-body tr,.pf-body li,.pf-body h1,.pf-body h2,.pf-body h3{break-inside:avoid}
.pf-body h1,.pf-body h2,.pf-body h3{break-after:avoid}
.pf-video{display:flex;gap:6mm;align-items:center;border:1px solid var(--line);border-radius:4mm;padding:5mm;margin:4mm 0;background:var(--soft);break-inside:avoid}
.pf-video .qr{width:30mm;height:30mm;flex:none;background:#fff;padding:1.5mm;border-radius:2mm}
.pf-video .qr svg{width:100%;height:100%;display:block}
.pf-video .vx{display:flex;flex-direction:column;gap:1mm;min-width:0;font-size:12pt}
.pf-video .url{font-size:10pt;color:var(--ink-2);word-break:break-all}
@media (max-width:760px){ .pf-page{padding:20px 16px} .pf-cover{padding:0;min-height:0} .pf-name{margin-top:10mm} .pf-stats{gap:3mm;margin-top:8mm} .pf-stats div{min-width:26mm} }
@media print{
  .pf-wrap{max-width:none}
  .pf-warn.on{display:block;border:2px solid #000;padding:6mm;margin:0 0 8mm;font-size:14pt;font-weight:700}
  .pf-page{border:none;border-radius:0;box-shadow:none;width:auto;max-width:none;margin:0;padding:0}
  .pf-cover{height:268mm;min-height:0;break-after:page}
  .pf-ban,.pf-stats div,.pf-meta .tag,.pf-video{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pf-toc{break-after:page}
  .pf-stu + .pf-stu{break-before:page}
  .pf.brk .pf-note + .pf-note{break-before:page}
  .pf:not(.brk) .pf-note + .pf-note{margin-top:10mm;padding-top:8mm;border-top:1px solid #BBB}
}

.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}