/* ============================================================================= 卡塞尔学院 · 学院市场 / 个人档案 / 排行榜 共用样式 ----------------------------------------------------------------------------- 设计令牌与组件观感**逐字对齐原站**： · 令牌取自 css/style.css 的 :root · 按钮/面板写法取自 forum.html 的内联样式（它本身就是照 dashboard 复刻的） 不要在本文件里引入新的色相或更大的圆角 —— 之前的版本用了冷蓝黑(#0a0a0f)+亮金 (#c8a96e)+大圆角，与原站暖棕黑(#1a1614)+暗金(#b8944b) 的气质完全相反。 ============================================================================= */ :root { --bg:#1a1614; --surface:#231f1b; --surface-2:#2a2521; --border:#3a3228; --gold:#b8944b; --gold-bright:#d4a853; --gold-dim:#8b6914; --text:#c8c0b4; --text-bright:#e8dfd4; --text-dim:#8a8074; --red:#a04030; --red-bright:#d44535; --green:#5a7a4a; --blue:#4a6a8a; --font-serif:'Georgia','Noto Serif SC','STSong','SimSun','Songti SC',serif; --font-mono:'Courier New','SF Mono','Consolas','Monaco',monospace; --font-ui:'Segoe UI','PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif; --radius-sm:3px; --radius-md:6px; --radius-lg:10px; --shadow-card:0 2px 12px rgba(0,0,0,.5); --shadow-gold:0 0 20px rgba(184,148,75,.15); --header-h:50px; --transition-speed:.35s; } *{margin:0;padding:0;box-sizing:border-box} html{height:100%} body{background:var(--bg);color:var(--text);font-family:var(--font-serif); font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;min-height:100vh} a{color:var(--gold);text-decoration:none} a:hover{color:var(--gold-bright)} .ico{flex:0 0 auto;vertical-align:-2px} .muted{color:var(--text-dim)} .mono{font-family:var(--font-mono)} .hint{font-size:.7rem;color:var(--text-dim);font-family:var(--font-mono)} .wrap{max-width:1180px;margin:0 auto;padding:16px 16px 60px} /* ---------- 顶栏：与 dashboard #topBar 同款材质 ---------- */ .topbar{position:sticky;top:0;z-index:40;height:var(--header-h);display:flex;align-items:center; justify-content:space-between;gap:12px;padding:0 16px; background:linear-gradient(180deg,#231f1b,#1a1614); border-bottom:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.45)} .brand{display:flex;align-items:center;gap:9px;min-width:0} .brand .mark{width:26px;height:26px;flex:0 0 26px;border-radius:50%; background:radial-gradient(circle at 34% 30%,#3a3020,#1c1814); border:1px solid rgba(184,148,75,.45);display:flex;align-items:center;justify-content:center;color:var(--gold-bright)} .brand .t{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;color:var(--gold-bright);white-space:nowrap} .brand .sub{font-family:var(--font-mono);font-size:.6rem;color:var(--text-dim);letter-spacing:.14em} .tb-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end} /* ---------- 按钮 / 控件 ---------- */ .btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer; background:rgba(184,148,75,.07);border:1px solid rgba(184,148,75,.32);border-radius:var(--radius-sm); color:var(--gold);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em; transition:background var(--transition-speed),color var(--transition-speed),border-color var(--transition-speed)} .btn:hover{background:rgba(184,148,75,.16);color:var(--gold-bright);border-color:var(--gold)} .btn.primary{background:linear-gradient(180deg,var(--gold-dim),var(--gold));color:#1a1614; border-color:var(--gold-bright);font-weight:700} .btn.primary:hover{background:linear-gradient(180deg,var(--gold),var(--gold-bright))} .btn.quiet{background:transparent;border-color:var(--border);color:var(--text-dim)} .btn.quiet:hover{color:var(--gold-bright);border-color:var(--gold-dim)} .btn.sm{padding:4px 9px;font-size:.66rem} .btn.danger{background:rgba(160,64,48,.12);border-color:rgba(160,64,48,.5);color:#d48070} .btn.danger:hover{background:rgba(160,64,48,.22);border-color:var(--red-bright);color:#e8a090} .btn:disabled{opacity:.45;cursor:default} select,input[type=text],input[type=number],input[type=password],textarea{ background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm); color:var(--text);font-family:var(--font-ui);font-size:.78rem;padding:7px 10px;outline:none} select:focus,input:focus,textarea:focus{border-color:var(--gold-dim);box-shadow:0 0 0 2px rgba(184,148,75,.1)} label.field{display:block;margin-bottom:10px} label.field>span{display:block;font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim); letter-spacing:.08em;margin-bottom:5px} label.field input,label.field select,label.field textarea{width:100%} /* ---------- 面板 ---------- */ .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md); box-shadow:var(--shadow-card);padding:16px} .panel-title{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;color:var(--gold); display:flex;align-items:center;gap:7px;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--border)} .panel-title .right{margin-left:auto;font-size:.68rem;color:var(--text-dim);letter-spacing:.04em} .empty{padding:44px 16px;text-align:center;color:var(--text-dim);font-family:var(--font-mono);font-size:.76rem;line-height:2} /* ---------- 卡片网格（对齐任务大厅的密排三列） ---------- */ .grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))} .card{background:rgba(35,31,27,.72);border:1px solid rgba(184,148,75,.16);border-radius:var(--radius-md); padding:13px 14px;display:flex;flex-direction:column;gap:8px; transition:border-color var(--transition-speed),background var(--transition-speed)} .card:hover{border-color:rgba(184,148,75,.4);background:rgba(42,37,33,.85)} .card-top{display:flex;align-items:flex-start;gap:8px} .card-name{font-family:var(--font-serif);font-size:.92rem;color:var(--text-bright);line-height:1.4;flex:1 1 auto} .card-desc{font-size:.76rem;color:var(--text-dim);line-height:1.75;font-family:var(--font-ui); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .card-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px; border-top:1px solid rgba(184,148,75,.1);flex-wrap:wrap} .card-foot .spacer{margin-left:auto} /* ---------- 小标签 / 评级徽章 ---------- */ .chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:var(--radius-sm); background:rgba(184,148,75,.06);border:1px solid rgba(184,148,75,.18); font-family:var(--font-mono);font-size:.64rem;letter-spacing:.04em;color:var(--text-dim)} .chip.gold{color:var(--gold);border-color:rgba(184,148,75,.34)} .chip.red{color:#c08070;border-color:rgba(160,64,48,.4)} .chip.green{color:#8aa87a;border-color:rgba(90,122,74,.4)} .chip.blue{color:#7d9cba;border-color:rgba(74,106,138,.45)} .grade{flex:0 0 auto;width:20px;height:20px;border-radius:var(--radius-sm);display:flex; align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.68rem;font-weight:700} .grade.S{color:#e8c86a;border:1px solid rgba(212,168,83,.55);background:rgba(212,168,83,.1)} .grade.A{color:#b892d8;border:1px solid rgba(155,89,182,.5);background:rgba(155,89,182,.1)} .grade.B{color:#7d9cba;border:1px solid rgba(74,106,138,.55);background:rgba(74,106,138,.1)} .grade.C{color:var(--text-dim);border:1px solid var(--border);background:rgba(138,128,116,.08)} .grade.N{color:var(--text-dim);border:1px solid var(--border)} .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);display:inline-block;flex:0 0 5px} /* 物品稀有度徽章 —— 配色对齐原站 js/mission-hub.js 的 RARITY_COLORS （普通=灰 / 精良=绿 / 稀有=蓝 / 史诗=紫）。 不要再用 .grade 的重映射来显示稀有度：那会让 SSR 显示成 "S"，与评级体系混淆。 */ .rar{flex:0 0 auto;min-width:26px;height:20px;padding:0 5px;border-radius:var(--radius-sm); display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.02em} .rar-N {color:var(--text-dim);border:1px solid rgba(138,128,116,.42);background:rgba(138,128,116,.12)} .rar-R {color:#8aab7a;border:1px solid rgba(90,122,74,.5);background:rgba(90,122,74,.12)} .rar-SR {color:#7d9cba;border:1px solid rgba(74,106,138,.55);background:rgba(74,106,138,.12)} .rar-SSR{color:#b892d8;border:1px solid rgba(155,89,182,.55);background:rgba(155,89,182,.12)} /* ---------- 标签栏（对齐任务大厅顶部 tab） ---------- */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto} .tab{padding:8px 15px;cursor:pointer;font-family:var(--font-mono);font-size:.73rem;letter-spacing:.06em; color:var(--text-dim);white-space:nowrap;text-align:center; display:inline-flex;align-items:center;gap:6px;transition:color var(--transition-speed); /* ⚠️ 必须显式重置：标签常用