/* ROP管理系统 - 主样式表 */
/* 2026-06-26 拆分自 index.html */
/* === P计划卡片式UI === */
/* ===== P计划卡片式UI（pac-* 命名空间） ===== */
.pac-cards-wrap { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.pac-card { background:#fff; border:1px solid #fed7aa; border-radius:10px; padding:10px 12px; position:relative; transition:box-shadow .2s; }
.pac-card:hover { box-shadow:0 2px 8px rgba(234,88,12,.08); }
.pac-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.pac-hdr h4 { font-size:12px; font-weight:700; color:var(--orange); margin:0; }
.pac-sts { font-size:10px; padding:1px 7px; border-radius:20px; font-weight:600; white-space:nowrap; }
.pac-sts-draft { background:#fef3c7; color:#92400e; }
.pac-sts-sent { background:#dbeafe; color:#1e40af; }
.pac-sts-confirmed { background:#dcfce7; color:#166534; }
.pac-sts-revise { background:#fce7f3; color:#9d174d; }
/* 卡片主体：左内容 | 右控制（两列布局） */
.pac-body { display:flex !important; flex-direction:row !important; gap:10px; align-items:flex-start !important; width:100%; box-sizing:border-box; }
.pac-l { flex:1 1 0%; min-width:0; max-width:calc(100% - 175px); display:flex; flex-direction:column; gap:3px; }
.pac-r { width:140px; flex-shrink:0; display:flex; flex-direction:column; gap:6px; }
.pac-fld { display:flex; flex-direction:column; gap:2px; }
.pac-fld label { font-size:10px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.3px; }
.pac-fld textarea, .pac-fld select {
padding:6px 8px !important; border:1px solid #e5e7eb !important; border-radius:5px !important;
font-size:13px !important; font-family:inherit; resize:none !important;
background:#fafafa !important; transition:border-color .15s;
min-height:38px !important; max-height:60px !important; height:auto !important;
flex:none !important;
}
.pac-fld textarea { min-height:38px !important; max-height:60px !important; line-height:1.4 !important; height:auto !important; }
.pac-fld select { height:30px; font-size:12px; }
.pac-fld textarea:focus, .pac-fld select:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 2px rgba(234,88,12,.08); }
.pac-footer { display:none; }
.pac-btn-send { background:var(--orange); color:#fff; border:none; border-radius:5px; padding:4px 10px; cursor:pointer; font-size:11px; font-weight:600; width:100%; transition:opacity .15s; }
.pac-btn-send:hover { opacity:.85; }
.pac-btn-del { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; cursor:pointer; font-size:11px; padding:4px 0; border-radius:5px; width:100%; font-weight:500; transition:bg .15s; }
.pac-btn-del:hover { background:#fee2e2; }
.pac-add-btn { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:20px; padding:12px 16px; border:1.5px dashed #fdba74; border-radius:10px; background:#fffbf5; cursor:pointer; color:#ea580c; font-weight:600; font-size:14px; width:100%; transition:background .15s, transform .15s; }
.pac-add-btn:hover { background:#fff7ed; transform: translateY(-1px); }
.pac-reply { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:5px; padding:6px 8px; font-size:12px; color:#166534; line-height:1.4; }
/* ===== AI对话对话框 ===== */
.ai-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.ai-dialog{position:relative;width:520px;max-width:100%;max-height:calc(100vh - 40px);background:#fff;border-radius:14px;box-shadow:0 12px 50px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;animation:aiSlideIn .22s ease}
@keyframes aiSlideIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.ai-dialog-hdr{display:flex;align-items:center;gap:8px;padding:12px 18px;background:var(--primary-gradient);color:#fff;flex-shrink:0}
.ai-dialog-hdr h3{margin:0;font-size:14px;font-weight:700}
.ai-dialog-hdr .ai-module-tag{font-size:10px;background:rgba(255,255,255,.25);padding:2px 8px;border-radius:20px;font-weight:600}
.ai-dialog-hdr .ai-close{cursor:pointer;margin-left:auto;font-size:18px;opacity:.8;transition:opacity .15s}
.ai-dialog-hdr .ai-close:hover{opacity:1}
.ai-dialog-msgs{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px;background:var(--bg);min-height:160px;max-height:calc(100vh - 260px)}
.ai-msg{display:flex;gap:6px;max-width:88%}
.ai-msg-user{margin-left:auto;flex-direction:row-reverse}
.ai-msg-ai{margin-right:auto}
.ai-avatar-sm{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.ai-avatar-sm.user{background:var(--primary-light);color:var(--primary)}
.ai-avatar-sm.ai{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}
.ai-bubble{padding:9px 13px;border-radius:11px;font-size:12.5px;line-height:1.55;white-space:pre-wrap}
.ai-msg-user .ai-bubble{background:var(--primary);color:#fff;border-bottom-right-radius:3px}
.ai-msg-ai .ai-bubble{background:#fff;color:var(--text);border:1px solid var(--border);border-bottom-left-radius:3px}
.ai-bubble .ai-insert-btn{display:inline-block;margin-top:6px;font-size:11px;padding:2px 8px;background:var(--primary-light);color:var(--primary);border:1px solid var(--primary);border-radius:5px;cursor:pointer;font-weight:600}
.ai-bubble .ai-insert-btn:hover{background:var(--primary);color:#fff}
.ai-dialog-input-area{padding:10px 16px;border-top:1px solid var(--border);background:#fff;flex-shrink:0;display:flex;gap:8px;align-items:flex-end}
.ai-dialog-input-area textarea{flex:1;padding:10px 12px;border:1.5px solid var(--border);border-radius:9px;font-size:13px;font-family:inherit;resize:none;min-height:42px;max-height:120px;outline:none;transition:border-color .15s;line-height:1.5}
.ai-dialog-input-area textarea:focus{border-color:var(--primary)}
.ai-dialog-input-area .ai-send-btn{background:var(--primary-gradient);color:#fff;border:none;border-radius:9px;padding:8px 16px;cursor:pointer;font-size:12px;font-weight:600;flex-shrink:0;transition:opacity .15s;margin-bottom:2px}
.ai-dialog-input-area .ai-send-btn:hover{opacity:.85}
.ai-dialog-input-area .ai-send-btn:disabled{opacity:.5;cursor:not-allowed}
.ai-typing{display:flex;gap:3px;padding:9px 12px;background:#fff;border:1px solid var(--border);border-radius:10px;border-bottom-left-radius:3px;width:fit-content}
.ai-typing span{width:5px;height:5px;border-radius:50%;background:var(--text-3);animation:aiBounce .5s infinite alternate;display:inline-block}
.ai-typing span:nth-child(2){animation-delay:.12s}
.ai-typing span:nth-child(3){animation-delay:.24s}
@keyframes aiBounce{to{transform:translateY(-5px);background:var(--primary)}}
/* 浮动AI助手 - 德鲁克教练（电子宠物模式，右侧边走动） */
.drucker-mascot{position:fixed;right:0;bottom:0;z-index:9998;cursor:pointer;user-select:none;transition:opacity .3s;will-change:transform;contain:layout style paint}
.drucker-mascot img{filter:drop-shadow(-2px 2px 6px rgba(0,0,0,.10));will-change:transform;image-rendering:-webkit-optimize-contrast}
.dm-bubble{position:absolute;bottom:92px;right:0;background:linear-gradient(135deg,#f97316,#ea580c);border-radius:14px;padding:8px 14px;font-size:12px;color:#fff;font-weight:600;box-shadow:0 4px 18px rgba(234,88,12,.35);white-space:nowrap;opacity:0;transition:all .3s;pointer-events:auto;transform:translateX(10px)}
.dm-bubble.show{opacity:1;transform:translateX(0)}
.dm-bubble::after{content:'';position:absolute;bottom:-6px;right:16px;border:5px solid transparent;border-top-color:#ea580c}
/* 手臂：idle时CSS transition平滑换姿态，gliding时轻微摆动 */
#dm-arm-l,#dm-arm-r{transform-box:view-box;transition:transform .6s cubic-bezier(.4,0,.2,1)}
#dm-arm-l{transform-origin:15px 38px}
#dm-arm-r{transform-origin:45px 38px}
/* 头部旋转支点 */
#dm-head{transform-box:view-box;transform-origin:30px 33px}
/* 身体状态动画 */
.drucker-mascot.idle .dm-body{animation:dmBreathe 3.5s ease-in-out infinite}
.drucker-mascot.thinking .dm-body{animation:dmThinkRock 2.5s ease-in-out infinite}
.drucker-mascot.gliding .dm-body{animation:dmGlide 1.2s ease-in-out infinite alternate}
@keyframes dmBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes dmThinkRock{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes dmGlide{0%{transform:translateY(0) rotate(-0.5deg)}100%{transform:translateY(-2px) rotate(0.5deg)}}
.ai-confirm-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:10001;align-items:center;justify-content:center}
.ai-confirm-overlay.show{display:flex}
.ai-confirm-box{background:#fff;border-radius:16px;width:480px;max-width:95vw;max-height:70vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:20px 24px}
.ai-confirm-box h3{font-size:16px;font-weight:700;color:#1e293b;margin:0 0 8px}
.ai-confirm-body{font-size:13px;color:#475569;line-height:1.8;background:#f8fafc;border-radius:10px;padding:14px;margin:12px 0;white-space:pre-wrap;max-height:300px;overflow-y:auto}
.ai-confirm-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.btn-cancel-insert{padding:8px 20px;border:1.5px solid #e2e8f0;border-radius:8px;background:#fff;color:#64748b;font-size:13px;cursor:pointer}
.btn-confirm-insert{padding:8px 20px;border:none;border-radius:8px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
/* === 全局样式与主题变量 === */
*{margin:0;padding:0;box-sizing:border-box}
:root{
/* 主色调 - 现代蓝紫渐变 */
--primary:#4f46e5;--primary-light:#eef2ff;--primary-dark:#3730a3;
--primary-gradient:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
/* 功能色 */
--success:#059669;--success-light:#ecfdf5;
--warning:#d97706;--warning-light:#fffbeb;
--danger:#dc2626;--danger-light:#fef2f2;
/* 辅助色 */
--purple:#7c3aed;--purple-light:#faf5ff;
--teal:#0d9488;--teal-light:#f0fdfa;
--orange:#ea580c;--orange-light:#fff7ed;
/* 中性色 */
--bg:#f8fafc;--card-bg:#ffffff;
--border:#e2e8f0;--border-light:#f1f5f9;
--text:#0f172a;--text-2:#475569;--text-3:#94a3b8;
/* 导航栏 */
--nav-bg:#0f172a;--nav-bg-gradient:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);
--nav-text:#cbd5e1;--nav-text-hover:#ffffff;
--nav-active:var(--primary);--nav-active-bg:rgba(79,70,229,.15);
/* 阴影 */
--shadow-sm:0 1px 2px rgba(0,0,0,.04);
--shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
--shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -1px rgba(0,0,0,.04);
--shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -2px rgba(0,0,0,.04);
--shadow-xl:0 20px 25px -5px rgba(0,0,0,.08),0 10px 10px -5px rgba(0,0,0,.03);
/* 动画 */
--transition:all .2s cubic-bezier(.4,0,.2,1);
--transition-slow:all .3s cubic-bezier(.4,0,.2,1);
}
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.step-page{display:none}
.step-page.active{display:block;animation:fadeIn .3s ease}
/* ===== 登录/注册页 ===== */
.login-wrapper{min-height:100vh;background:var(--nav-bg-gradient);display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}
.login-wrapper::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 50%,rgba(79,70,229,.15) 0%,transparent 50%),radial-gradient(circle at 70% 50%,rgba(124,58,237,.1) 0%,transparent 50%);animation:float 20s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(20px,-20px) rotate(1deg)}50%{transform:translate(-15px,15px) rotate(-1deg)}75%{transform:translate(15px,10px) rotate(0.5deg)}}
.login-card{background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border-radius:24px;padding:48px;width:520px;max-width:95vw;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);position:relative;z-index:1;border:1px solid rgba(255,255,255,.2)}
.login-card h1{font-size:24px;font-weight:900;color:var(--nav-bg);text-align:center;margin-bottom:8px;letter-spacing:-0.5px}
.login-card .sub{text-align:center;font-size:14px;color:var(--text-2);margin-bottom:32px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px;letter-spacing:0.3px}
.field input,.field textarea,.field select{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;color:var(--text);background:var(--bg);transition:var(--transition);outline:none;font-family:inherit;font-size:14px;line-height:1.5}
.field input:hover,.field textarea:hover,.field select:hover{border-color:#cbd5e1}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.1);transform:translateY(-1px)}
.field .hint{font-size:12px;color:var(--text-3);margin-top:6px;display:flex;align-items:center;gap:4px}
.btn{padding:12px 24px;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;letter-spacing:0.3px}
.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:0 1px 2px rgba(79,70,229,.2)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(79,70,229,.3)}
.btn-primary:active{transform:translateY(0)}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text-2);font-weight:600}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.btn-success{background:linear-gradient(135deg,var(--success) 0%,#047857 100%);color:#fff;box-shadow:0 1px 2px rgba(5,150,105,.2)}
.btn-success:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(5,150,105,.3)}
.btn-ghost{background:transparent;color:var(--text-2);padding:8px 16px;font-weight:500}
.btn-ghost:hover{color:var(--primary);background:var(--primary-light)}
.btn-full{width:100%}
.btn-lg{padding:14px 32px;font-size:15px;border-radius:14px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important}
/* ===== 首页新布局 ===== */
/* ===== 首页布局 ===== */
.home-wrapper{height:100vh;display:flex;flex-direction:column;background:var(--bg)}
/* 顶部固定区域 - 现代白色背景 */
.home-top{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);padding:10px 32px 8px;box-shadow:var(--shadow);position:fixed;top:0;left:240px;right:0;z-index:100;overflow:hidden;border-bottom:1px solid var(--border-light)}
.home-top-main{display:flex;align-items:center;justify-content:space-between}
.home-top .company-name{font-size:17px;font-weight:800;color:var(--nav-bg);white-space:nowrap;letter-spacing:-0.3px}
.home-top .user-info{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--text-2);flex-shrink:0}
.home-top-tags{display:flex;align-items:center;gap:10px;margin-top:8px}
.home-top-tags span{color:#fff;padding:5px 14px;border-radius:6px;font-size:12px;font-weight:500}
.home-tag-mission{background:#378ADD}
.home-tag-vision{background:#7F77DD}
.home-tag-values{background:#D85A30}
/* 主体布局：左侧导航 + 右侧内容 */
.home-body{display:flex;flex:1;margin-top:72px;margin-left:240px;height:calc(100vh - 72px)}
/* 左侧导航 - 现代深色背景 */
.home-nav{width:240px;background:var(--nav-bg-gradient);border-right:none;padding:0;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:99}
.home-nav::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(79,70,229,.15) 0%,transparent 50%);pointer-events:none}
.nav-section{padding:16px 12px 8px}
.nav-section-title{font-size:10px;font-weight:700;color:rgba(203,213,225,.5);text-transform:uppercase;letter-spacing:1.2px;padding:8px 12px 6px;margin:0}
.nav-item{padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;color:var(--nav-text);cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.nav-item:hover{background:rgba(255,255,255,.08);color:var(--nav-text-hover);transform:translateX(2px)}
.nav-item.active{background:var(--nav-active-bg);color:var(--primary);box-shadow:none}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--primary);border-radius:0 2px 2px 0}
.nav-item .nav-icon{font-size:15px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border-radius:8px;flex-shrink:0;transition:var(--transition)}
.nav-item:hover .nav-icon{background:rgba(255,255,255,.1)}
.nav-item.active .nav-icon{background:rgba(79,70,229,.2);font-size:16px}
/* 导航栏底部品牌 */
/* ===== 个人设置模块 ===== */
.settings-panel{animation:settingsFadeIn .25s ease}
@keyframes settingsFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.settings-tab.active{background:#fff !important;color:var(--primary) !important;box-shadow:var(--shadow-sm)}
input[type="checkbox"]:checked+span{background:var(--primary) !important}
input[type="checkbox"]:checked+span+span{transform:translateX(22px) !important}
.nav-brand{padding:16px 12px;margin-top:auto;border-top:1px solid rgba(255,255,255,.08);text-align:center;font-size:10px;color:rgba(203,213,225,.3);letter-spacing:0.5px;position:relative;z-index:1}
/* 右侧主内容区 */
.home-main{flex:1;overflow-y:auto;padding:8px 28px 32px;background:var(--bg)}
/* 初始化横幅 */
#init-banner{position:fixed;top:72px;left:240px;right:0;z-index:99}
.home-body.has-banner{margin-top:108px !important;height:calc(100vh - 108px) !important}
/* ===== 移动端汉堡菜单按钮 ===== */
.menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;transition:background .15s;-webkit-tap-highlight-color:transparent}
.menu-toggle:hover{background:var(--primary-light)}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--nav-bg);border-radius:2px;transition:all .25s}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* 移动端侧边栏遮罩 */
.mobile-nav-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:98;-webkit-tap-highlight-color:transparent}
/* ===== 微信浏览器全局适配 ===== */
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{-webkit-overflow-scrolling:touch}
/* ===== 移动端响应式 ===== */
@media (max-width: 768px) {
/* 顶部栏全宽 */
.home-top{left:0;padding:8px 16px 6px}
.home-top-main{gap:0}
.home-top .company-name{font-size:15px}
.home-top .user-info{gap:8px;font-size:11px}
.home-top .user-info button{padding:4px 10px;font-size:11px;border-radius:6px}
.home-top-tags{margin-top:4px;gap:6px;flex-wrap:wrap}
.home-top-tags span{font-size:10px;padding:3px 10px}
/* 显示汉堡菜单 */
.menu-toggle{display:flex;flex-shrink:0;margin-right:10px}
/* 侧边栏改为滑出式 */
.home-nav{position:fixed;top:0;left:-280px;bottom:0;width:280px;z-index:99;transition:left .28s cubic-bezier(.4,0,.2,1);box-shadow:none}
.home-nav.open{left:0;box-shadow:4px 0 30px rgba(0,0,0,.25)}
/* 遮罩显示 */
.mobile-nav-overlay{display:none}
.mobile-nav-overlay.show{display:block}
/* 内容区全宽 */
.home-body{margin-left:0;margin-top:64px;height:calc(100vh - 64px)}
.home-main{padding:8px 12px 24px}
/* 卡片布局改单列 */
.action-cards{grid-template-columns:1fr;gap:16px}
.action-card{padding:24px 20px}
.action-card .icon{width:48px;height:48px;font-size:24px;margin-bottom:12px}
.action-card h3{font-size:15px}
.action-card p{font-size:12px}
/* 英雄卡片 */
.hero-card{padding:24px 20px;margin-bottom:20px}
.hero-card h2{font-size:18px}
.hero-card p{font-size:13px}
/* 表格适配 */
.learn-grid{grid-template-columns:1fr;gap:14px}
.learn-card{padding:20px 18px}
.learn-card h3{font-size:14px}
/* 表单适配 */
.identity-form{grid-template-columns:1fr;gap:14px}
.identity-card{padding:20px}
/* 填写区域 */
.fill-row{flex-direction:column}
.guide-panel{width:100%}
.fill-area textarea{min-height:350px;padding:20px;font-size:14px}
/* 步骤页 */
.step-body{padding:24px 12px}
.step-header{padding:10px 16px;font-size:13px}
.step-title-bar h2{font-size:18px}
.step-title-bar p{font-size:13px}
/* 步骤页顶部固定栏全宽 */
.step-wrapper .step-header{position:sticky;top:0}
/* Tab标签 */
.reflect-tabs{flex-wrap:wrap;gap:6px}
.reflect-tab{padding:8px 14px;font-size:12px}
.source-tabs{gap:6px}
.source-tab{padding:8px 12px;font-size:12px}
/* 按钮触控优化 */
.btn{padding:10px 20px;font-size:13px;border-radius:10px}
.btn-lg{padding:12px 24px;font-size:14px}
/* 输入框触控优化 */
.field input,.field textarea,.field select{padding:10px 14px;font-size:13px;border-radius:10px}
.field label{font-size:12px}
/* 模态框适配 */
.ai-dialog{width:100%;max-height:calc(100vh - 60px);border-radius:12px 12px 0 0;margin-top:auto}
.ai-dialog-msgs{max-height:calc(100vh - 280px);padding:10px 12px}
.ai-dialog-hdr{padding:10px 14px;font-size:13px}
.ai-dialog-input-area{padding:8px 12px}
.ai-dialog-input-area textarea{font-size:12px;min-height:38px}
.ai-msg{max-width:90%}
.ai-bubble{font-size:11.5px;padding:7px 10px}
/* 德鲁克助手移动端缩小 */
.drucker-mascot img{width:50px !important;height:60px !important}
.dm-bubble{bottom:74px;font-size:11px;padding:6px 12px}
/* 确认弹窗 */
.ai-confirm-box{width:95vw;max-height:80vh;padding:16px}
.ai-confirm-box h3{font-size:14px}
.ai-confirm-body{font-size:12px;max-height:200px}
/* 初始化横幅 */
#init-banner{top:64px;left:0;right:0;font-size:11px;padding:8px 12px}
.home-body.has-banner{margin-top:100px !important;height:calc(100vh - 100px) !important}
/* 浮动AI对话框全屏 */
.ai-overlay{align-items:flex-end;padding:0}
/* Toast 移动端居中 */
.toast{top:60px;right:12px;left:12px;min-width:auto;font-size:13px;padding:12px 16px;border-radius:10px}
}
/* ===== 微信浏览器专属适配 ===== */
/* 微信环境检测通过class: .wechat-browser */
.wechat-browser .home-body{padding-bottom:env(safe-area-inset-bottom, 20px)}
.wechat-browser .home-nav{padding-bottom:env(safe-area-inset-bottom, 20px)}
.wechat-browser .step-body{padding-bottom:calc(40px + env(safe-area-inset-bottom, 20px))}
/* 微信底部安全区 */
@supports(padding-bottom:env(safe-area-inset-bottom)){
.home-body{padding-bottom:env(safe-area-inset-bottom)}
.step-body{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
}
/* 小屏手机进一步优化 */
@media (max-width: 375px) {
.home-top{padding:6px 10px 4px}
.home-top .company-name{font-size:13px}
.home-nav{width:260px;left:-260px}
.action-card{padding:18px 14px}
.hero-card{padding:18px 14px}
.home-main{padding:6px 8px 20px}
.rop-module-card{padding:16px 14px !important}
}
/* ===== 英雄卡片 ===== */
.hero-card{background:#ffffff;border-radius:20px;padding:40px 36px;margin-bottom:28px;text-align:center;position:relative;overflow:hidden;border:1px solid var(--border-light);box-shadow:var(--shadow-sm)}
.hero-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--primary-gradient)}
.hero-card::after{content:'';position:absolute;top:0;right:0;width:300px;height:300px;background:radial-gradient(circle,rgba(79,70,229,.03) 0%,transparent 70%);pointer-events:none}
.hero-card h2{font-size:22px;font-weight:800;margin-bottom:10px;color:var(--nav-bg);letter-spacing:-0.3px;position:relative}
.hero-card p{font-size:14px;color:var(--text-2);max-width:500px;margin:0 auto;line-height:1.6;position:relative}
/* ===== 操作卡片 ===== */
.action-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px}
.action-card{background:#ffffff;border-radius:20px;padding:36px 32px;cursor:pointer;transition:var(--transition-slow);position:relative;overflow:hidden;border:1px solid var(--border-light);box-shadow:var(--shadow-sm)}
.action-card::before{content:'';position:absolute;top:0;left:0;right:0;height:0;background:var(--primary-gradient);transition:height .3s cubic-bezier(.4,0,.2,1)}
.action-card:hover::before{height:4px}
.action-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:rgba(79,70,229,.15)}
.action-card .icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 20px;transition:var(--transition-slow);background:var(--primary-light);color:var(--primary)}
.action-card:hover .icon{transform:scale(1.08) translateY(-2px);background:var(--primary-gradient);color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.25)}
.action-card h3{font-size:17px;font-weight:800;margin-bottom:10px;color:var(--text);letter-spacing:-0.2px}
.action-card p{font-size:13px;color:var(--text-2);line-height:1.6}
/* ===== 步骤页面通用 ===== */
.step-wrapper{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.step-header{background:rgba(255,255,255,.98);backdrop-filter:blur(10px);padding:14px 32px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border-light)}
.step-header .back{display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:13px;cursor:pointer;padding:8px 12px;border-radius:8px;transition:var(--transition);font-weight:500}
.step-header .back:hover{background:var(--primary-light);color:var(--primary)}
.step-header .progress-mini{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3)}
.step-header .progress-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:var(--transition-slow)}
.step-header .progress-dot.done{background:var(--success);width:8px;height:8px;box-shadow:0 0 0 3px var(--success-light)}
.step-header .progress-dot.current{background:var(--primary);width:24px;height:6px;border-radius:3px;box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.step-body{flex:1;display:flex;flex-direction:column;max-width:960px;width:100%;margin:0 auto;padding:40px 24px;animation:fadeInUp .4s ease}
/* 动画 */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.step-title-bar{text-align:center;margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--border-light)}
.step-title-bar .tag{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:20px;font-size:11px;font-weight:700;margin-bottom:14px;letter-spacing:0.5px}
.step-title-bar h2{font-size:22px;font-weight:800;color:var(--text);margin-bottom:8px;letter-spacing:-0.3px}
.step-title-bar p{font-size:14px;color:var(--text-2);max-width:550px;margin:0 auto;line-height:1.7}
.principle-tip{background:var(--primary-light);border-left:4px solid var(--primary);padding:16px 20px;border-radius:0 12px 12px 0;margin-bottom:32px;font-size:13px;color:var(--primary-dark);line-height:1.7;box-shadow:var(--shadow-sm)}
.principle-tip strong{display:block;margin-bottom:6px;color:var(--primary);font-size:14px}
/* ===== 填写区域 - 左右分栏布局 ===== */
.fill-row{display:flex;gap:24px;align-items:stretch}
.guide-panel{width:260px;flex-shrink:0;background:var(--primary-light);border-radius:16px;padding:24px;border:1px solid rgba(79,70,229,.12);display:flex;flex-direction:column}
.guide-panel h4{font-size:15px;font-weight:800;color:var(--primary);margin-bottom:16px;display:flex;align-items:center;gap:8px;line-height:1.4}
.guide-content{font-size:13px;color:var(--text-2);line-height:1.8}
.guide-content strong{color:var(--primary-dark);display:block;margin-bottom:6px;font-size:14px}
.guide-content p{margin-bottom:10px}
.guide-content ul{padding-left:18px;margin:0}
.guide-content li{margin-bottom:4px;color:var(--text-2)}
.guide-content .think-angle{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(79,70,227,.2)}
.guide-content .think-angle strong{color:var(--purple)}
.fill-area{flex:1;background:var(--card-bg);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border-light)}
.fill-area-header{padding:18px 24px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;background:var(--bg)}
.fill-area-header h4{font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.fill-area-header .word-count{font-size:12px;color:var(--text-3);background:var(--border-light);padding:2px 10px;border-radius:10px}
.fill-area textarea{flex:1;min-height:500px;padding:28px 32px;border:none;outline:none;font-size:15px;line-height:1.8;color:var(--text);resize:none;font-family:inherit;background:transparent;transition:var(--transition)}
.fill-area textarea:focus{background:rgba(79,70,229,.01)}
.fill-area textarea::placeholder{color:var(--text-3);line-height:1.8}
/* 填写区域 - 响应式 */
@media (max-width: 900px) {
.fill-row{flex-direction:column}
.guide-panel{width:100%}
}
.step-footer{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;background:#ffffff;border-radius:16px;box-shadow:var(--shadow);margin-top:24px;border:1px solid var(--border-light)}
/* ===== Tab切换通用 ===== */
/* ===== align样式已在v7.1移除 ===== */
.reflect-tabs{display:flex;gap:10px;margin-bottom:24px}
.reflect-tab{padding:10px 20px;border-radius:10px;border:1.5px solid var(--border);font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);background:#ffffff;color:var(--text-2)}
.reflect-tab:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.reflect-tab.active{border-color:var(--primary) !important;background:var(--primary) !important;color:#fff !important;box-shadow:0 2px 8px rgba(79,70,229,.25)}
.source-tabs{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.source-tab{padding:10px 18px;border-radius:10px;border:1.5px solid var(--border);font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition);background:#ffffff;color:var(--text-2);white-space:nowrap}
.source-tab:hover{border-color:var(--purple);color:var(--purple);background:#faf5ff}
.source-tab.active{border-color:var(--purple) !important;background:var(--purple) !important;color:#fff !important;box-shadow:0 2px 8px rgba(124,58,237,.25)}
/* ===== AI反馈区 ===== */
.ai-feedback{margin-top:20px;background:#ffffff;border-radius:16px;padding:20px 24px;box-shadow:var(--shadow-sm);display:flex;gap:16px;align-items:flex-start;border:1px solid var(--border-light)}
.ai-feedback .ai-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-gradient);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;color:#fff;box-shadow:0 2px 8px rgba(79,70,229,.2)}
.ai-feedback .ai-content{flex:1}
.ai-feedback .ai-content p{font-size:13px;color:var(--text);line-height:1.7;white-space:pre-wrap}
/* ===== 学习中心 ===== */
.learn-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.learn-card{background:#ffffff;border-radius:20px;padding:28px 24px;box-shadow:var(--shadow-sm);cursor:pointer;transition:var(--transition-slow);border:1px solid var(--border-light)}
.learn-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(79,70,229,.15)}
.learn-card .tag{display:inline-flex;padding:4px 12px;border-radius:12px;font-size:11px;font-weight:700;margin-bottom:12px;letter-spacing:0.3px}
.learn-card h3{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--text)}
.learn-card p{font-size:12px;color:var(--text-2);line-height:1.6}
/* ===== 实名界定 ===== */
.identity-card{background:#ffffff;border-radius:20px;padding:32px;box-shadow:var(--shadow-sm);margin-bottom:24px;border:1px solid var(--border-light)}
.identity-card h3{font-size:16px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px;color:var(--text)}
.identity-card h3 .icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--primary-light);color:var(--primary)}
.identity-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* ===== 加载状态 ===== */
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;font-size:15px;color:var(--primary);font-weight:600;gap:16px}
.loading-overlay.hidden{display:none}
.loading-overlay::after{content:'';width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ===== Toast ===== */
.toast{position:fixed;top:72px;right:24px;z-index:9999;padding:14px 20px 14px 16px;border-radius:12px;color:#fff;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);transform:translateX(120%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:10px;min-width:280px}
.toast.show{transform:translateX(0)}
.toast-success{background:linear-gradient(135deg,var(--success) 0%,#047857 100%)}
.toast-error{background:linear-gradient(135deg,var(--danger) 0%,#b91c1c 100%)}
.toast-info{background:var(--primary-gradient)}
.toast-warning{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}
.toast-warning::before{content:'⚠️'}
.toast::before{font-size:18px}
.toast-success::before{content:'✓'}
.toast-error::before{content:'✕'}
.toast-info::before{content:'ℹ'}
/* ===== 动画 ===== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.step-page.active{animation:fadeInUp .4s ease}
/* ===== 反思与总结页面样式 ===== */
#step-knowledge .identity-card {
border-left: 4px solid #2563eb;
margin-bottom: 16px;
}
#step-knowledge .identity-card h3 {
margin-bottom: 12px;
}
/* ===== Tab切换样式覆盖 ===== */
.reflect-tab[style*="border-color:var(--success)"].active{background:var(--success) !important;color:#fff !important}
.reflect-tab[style*="border-color:var(--orange)"].active{background:var(--orange) !important;color:#fff !important}
.reflect-tab[style*="border-color:var(--purple)"].active{background:var(--purple) !important;color:#fff !important}
.reflect-tab[style*="border-color:var(--warning)"].active{background:var(--warning) !important;color:#fff !important}
.reflect-tab[style*="border-color:var(--danger)"].active{background:var(--danger) !important;color:#fff !important}
/* ===== 可视化架构图样式 ===== */
.org-tree-container {
width: 100%;
min-height: 400px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 16px;
padding: 32px;
margin-bottom: 24px;
overflow-x: auto;
position: relative;
}
.org-tree {
display: flex;
flex-direction: column;
align-items: center;
min-width: 600px;
}
.org-level {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 0;
width: 100%;
}
.org-node {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.org-card {
background: white;
border-radius: 12px;
padding: 16px 20px;
min-width: 180px;
max-width: 220px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 2px solid #e2e8f0;
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.org-card:hover {
border-color: #2563eb;
box-shadow: 0 4px 16px rgba(37,99,235,0.15);
transform: translateY(-2px);
}
.org-card.selected {
border-color: #2563eb;
background: #eff6ff;
}
.org-card-ceo {
border-color: #7c3aed;
background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
}
.org-card-employee {
border-color: #16a34a;
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}
.org-name {
font-size: 15px;
font-weight: 700;
color: #0f172a;
margin-bottom: 4px;
}
.org-role {
font-size: 12px;
color: #64748b;
margin-bottom: 2px;
}
.org-dept {
font-size: 11px;
color: #94a3b8;
}
.org-actions {
position: absolute;
top: 8px;
right: 8px;
display: none;
gap: 4px;
}
.org-card:hover .org-actions {
display: flex;
}
.org-action-btn {
width: 24px;
height: 24px;
border-radius: 6px;
border: none;
background: rgba(0,0,0,0.05);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: all 0.2s;
}
.org-action-btn:hover {
background: rgba(0,0,0,0.1);
}
.org-action-btn.add {
color: #16a34a;
}
.org-action-btn.edit {
color: #2563eb;
}
.org-action-btn.delete {
color: #dc2626;
}
/* 添加人员按钮 */
.add-employee-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 180px;
padding: 16px;
border: 2px dashed #cbd5e1;
border-radius: 12px;
background: transparent;
cursor: pointer;
transition: all 0.2s;
color: #64748b;
font-size: 14px;
}
.add-employee-btn:hover {
border-color: #2563eb;
color: #2563eb;
background: #eff6ff;
}
/* 编辑弹窗 */
.edit-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.edit-modal {
background: white;
border-radius: 16px;
padding: 32px;
width: 480px;
max-width: 90vw;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.edit-modal h3 {
font-size: 20px;
font-weight: 700;
color: #0f172a;
margin-bottom: 24px;
}
.edit-modal .field {
margin-bottom: 16px;
}
.edit-modal label {
display: block;
font-size: 13px;
font-weight: 600;
color: #475569;
margin-bottom: 6px;
}
.edit-modal input, .edit-modal select {
width: 100%;
padding: 10px 14px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.edit-modal input:focus, .edit-modal select:focus {
border-color: #2563eb;
}
.edit-modal-actions {
display: flex;
gap: 12px;
margin-top: 24px;
}
/* 空状态 */
.org-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: #94a3b8;
}
.org-empty-state-icon {
font-size: 48px;
margin-bottom: 16px;
}
.org-empty-state-text {
font-size: 15px;
margin-bottom: 24px;
}
/* ============================================
ROP填写页面 - 三种风格方案
使用方法：给 body 添加对应 class
- theme-rop-warm ：方案A 暖色专业
- theme-rop-cool ：方案B 冷色清爽
- theme-rop-classic：方案C 经典商务
============================================ */
/* --- 方案A：暖色专业 --- */
.theme-rop-warm { --rop-bg:#fdf6f0; --rop-card:#ffffff; --rop-primary:#c05621; --rop-primary-light:#fef3e2; --rop-text:#2d3748; --rop-text-2:#718096; --rop-border:#e2d5c9; --rop-shadow:0 2px 8px rgba(192,86,33,.08); }
.theme-rop-warm .step-body { background:var(--rop-bg); }
.theme-rop-warm .fill-area { background:var(--rop-card); border:1px solid var(--rop-border); box-shadow:var(--rop-shadow); }
.theme-rop-warm .fill-area-header { background:var(--rop-primary-light); border-bottom:2px solid var(--rop-primary); }
.theme-rop-warm .fill-area textarea { background:#fffcf8; }
.theme-rop-warm .step-title-bar { background:var(--rop-card); border-radius:12px; padding:24px; box-shadow:var(--rop-shadow); margin-bottom:24px; }
.theme-rop-warm .principle-tip { background:var(--rop-primary-light); border-left-color:var(--rop-primary); color:var(--rop-primary); }
.theme-rop-warm .identity-card { background:var(--rop-card); border:1px solid var(--rop-border); box-shadow:var(--rop-shadow); }
/* --- 方案B：冷色清爽 --- */
.theme-rop-cool { --rop-bg:#f0f5ff; --rop-card:#ffffff; --rop-primary:#2b6cb0; --rop-primary-light:#e6f0ff; --rop-text:#1a202c; --rop-text-2:#5a7099; --rop-border:#cce0ff; --rop-shadow:0 2px 8px rgba(43,108,176,.08); }
.theme-rop-cool .step-body { background:var(--rop-bg); }
.theme-rop-cool .fill-area { background:var(--rop-card); border:1px solid var(--rop-border); box-shadow:var(--rop-shadow); }
.theme-rop-cool .fill-area-header { background:var(--rop-primary-light); border-bottom:2px solid var(--rop-primary); }
.theme-rop-cool .fill-area textarea { background:#fafcff; }
.theme-rop-cool .step-title-bar { background:var(--rop-card); border-radius:12px; padding:24px; box-shadow:var(--rop-shadow); margin-bottom:24px; }
.theme-rop-cool .principle-tip { background:var(--rop-primary-light); border-left-color:var(--rop-primary); color:var(--rop-primary); }
.theme-rop-cool .identity-card { background:var(--rop-card); border:1px solid var(--rop-border); box-shadow:var(--rop-shadow); }
/* --- 方案C：经典商务 --- */
.theme-rop-classic { --rop-bg:#f7fafc; --rop-card:#ffffff; --rop-primary:#1a365d; --rop-primary-light:#ebf4ff; --rop-text:#1a202c; --rop-text-2:#4a5568; --rop-border:#e2e8f0; --rop-shadow:0 1px 4px rgba(0,0,0,.06); }
.theme-rop-classic .step-body { background:var(--rop-bg); }
.theme-rop-classic .fill-area { background:var(--rop-card); border:2px solid var(--rop-border); box-shadow:var(--rop-shadow); }
.theme-rop-classic .fill-area-header { background:var(--rop-primary-light); border-bottom:3px solid var(--rop-primary); }
.theme-rop-classic .fill-area-header h4 { color:var(--rop-primary); font-weight:800; }
.theme-rop-classic .fill-area textarea { background:#fff; border-top:1px solid var(--rop-border); }
.theme-rop-classic .step-title-bar { border-bottom:3px solid var(--rop-primary); padding-bottom:16px; margin-bottom:24px; }
.theme-rop-classic .step-title-bar h2 { color:var(--rop-primary); }
.theme-rop-classic .principle-tip { background:var(--rop-primary-light); border-left-color:var(--rop-primary); color:var(--rop-primary); font-weight:600; }
.theme-rop-classic .identity-card { background:var(--rop-card); border:2px solid var(--rop-border); box-shadow:var(--rop-shadow); }
.theme-rop-classic .identity-card h3 { color:var(--rop-primary); }
/* ROP三栏平行布局样式 */
.rop-month-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
color: var(--text-3);
letter-spacing: -0.2px;
}
.rop-modules-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.rop-module-card {
background: #fff;
border-radius: 14px;
padding: 28px 20px 22px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
text-align: center;
cursor: pointer;
transition: all 0.3s;
border: 2.5px solid #e2e8f0;
}
.rop-module-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}
.rop-module-card:nth-child(1):hover { border-color: #3b82f6; }
.rop-module-card:nth-child(2):hover { border-color: #10b981; }
.rop-module-card:nth-child(3):hover { border-color: #f97316; }
.rop-module-icon { font-size: 42px; margin-bottom: 10px; }
.rop-module-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; color: var(--text); }
.rop-module-card p { font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.rop-module-btn {
background: var(--primary); color: #fff; border: none;
padding: 10px 24px; border-radius: 8px; font-size: 13px;
font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.rop-module-btn:hover { background: var(--primary-dark); }
.rop-submit-area { text-align: center; margin-top: 32px; }
@media (max-width: 1024px) {
.rop-modules-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* 消息中心 v2 */
.msg-filter-tab.active { background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important; }