:root { --ink:#1d1d1f; --muted:#6b6b70; --line:#deddd8; --paper:#f5f3ee; --accent:#2f6f61; --danger:#a93d3d; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
body { color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input { font:inherit; }
a { color:inherit; }

.operator-shell { min-height:100vh; display:grid; place-items:center; padding:32px; background:radial-gradient(circle at 15% 15%,#dceae5 0,transparent 34%),var(--paper); }
.operator-card { width:min(720px,100%); background:#fff; border:1px solid var(--line); border-radius:24px; padding:48px; box-shadow:0 24px 70px rgba(44,48,46,.1); }
.eyebrow { color:var(--accent); font-size:13px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
h1 { font-size:clamp(34px,5vw,52px); letter-spacing:-.04em; line-height:1.08; margin:16px 0; }
.lede { color:var(--muted); font-size:18px; line-height:1.75; max-width:620px; }
.operator-actions { display:flex; gap:12px; flex-wrap:wrap; margin:30px 0; }
.primary-link,.secondary-link { padding:13px 20px; border-radius:10px; text-decoration:none; font-weight:700; }
.primary-link { background:var(--ink); color:#fff; }
.secondary-link { border:1px solid var(--line); background:#fafafa; }
.privacy-note { display:flex; flex-direction:column; gap:6px; background:#f0f7f4; color:#31564d; padding:16px 18px; border-radius:12px; font-size:14px; }

.simulation-page { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,520px); background:#fff; }
.sim-brand { padding:64px clamp(32px,7vw,100px); background:#171817; color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.sim-mark { display:flex; align-items:center; gap:12px; font-weight:750; font-size:20px; }
.dot-grid { width:30px; height:30px; background:radial-gradient(circle,#fff 2px,transparent 3px); background-size:10px 10px; opacity:.95; }
.sim-brand-copy { max-width:520px; }
.sim-brand h1 { font-size:clamp(42px,6vw,74px); margin-bottom:20px; }
.sim-brand p { color:#bfc2be; font-size:18px; line-height:1.7; }
.sim-disclaimer { font-size:12px; color:#8d918c; }
.login-panel { padding:48px clamp(28px,6vw,72px); display:flex; flex-direction:column; justify-content:center; }
.login-panel h2 { font-size:34px; margin:0 0 8px; letter-spacing:-.03em; }
.login-panel>p { color:var(--muted); margin:0 0 30px; }
.field { display:flex; flex-direction:column; gap:8px; margin:16px 0; font-size:14px; font-weight:650; }
.field input { width:100%; border:1px solid #cacac7; border-radius:9px; padding:14px; outline:none; background:#fff; }
.field input:focus { border-color:#2f6f61; box-shadow:0 0 0 3px #dbeae5; }
.login-button { width:100%; border:0; border-radius:9px; padding:15px; margin-top:12px; color:#fff; background:#252624; font-weight:750; cursor:pointer; }
.login-button:disabled { opacity:.65; cursor:wait; }
.safe-hint { margin-top:24px; padding-top:20px; border-top:1px solid #ecebe7; color:#858580; font-size:12px; line-height:1.6; }
.lesson { background:#f2f7f4; border:1px solid #d2e1db; border-radius:16px; padding:28px; }
.lesson-badge { display:inline-block; color:#fff; background:var(--accent); border-radius:999px; padding:6px 10px; font-size:12px; font-weight:750; }
.lesson h2 { font-size:30px; }
.lesson ul { padding-left:20px; color:#4f5d58; line-height:1.9; }

.ts-page { min-height:100vh; background:#fff; color:#242424; display:flex; flex-direction:column; align-items:center; position:relative; padding:40px 24px 82px; font-family:Arial,Helvetica,sans-serif; }
.ts-content { width:432px; max-width:100%; display:flex; flex-direction:column; align-items:center; }
.ts-logo { margin-top:0; height:54px; display:flex; align-items:center; }
.ts-logo img { display:block; width:166px; height:auto; }
.ts-dotmark { width:30px; height:30px; display:grid; grid-template-columns:repeat(3,7px); grid-template-rows:repeat(3,7px); gap:4px; }
.ts-dotmark i { display:block; width:7px; height:7px; border-radius:50%; background:#282828; }
.ts-dotmark i:nth-child(1),.ts-dotmark i:nth-child(3),.ts-dotmark i:nth-child(7),.ts-dotmark i:nth-child(9){background:#bebebe}
.ts-form { width:100%; margin-top:38px; display:grid; gap:14px; }
.ts-input { width:100%; height:56px; border:3px solid #252525; border-radius:6px; padding:0 15px; font-size:22px; color:#252525; background:#f8f7f5; outline:none; }
.ts-input::placeholder { color:#777; opacity:1; }
.ts-input:focus { box-shadow:0 0 0 2px rgba(0,0,0,.08); }
.ts-primary { height:56px; border:0; border-radius:5px; color:#fff; background:#4d4c4b; font-size:19px; font-weight:700; cursor:pointer; }
.ts-primary:hover { background:#3f3e3d; }
.ts-primary:disabled { opacity:.65; cursor:wait; }
.ts-or { margin:32px 0 28px; color:#696969; font-size:16px; }
.ts-providers { width:100%; display:grid; gap:14px; }
.ts-provider { height:56px; border:1px solid #d7d5d2; border-radius:5px; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.07); display:grid; grid-template-columns:46px 1fr 46px; align-items:center; font-size:19px; color:#252525; cursor:pointer; }
.ts-provider:hover { background:#fafafa; border-color:#c8c6c3; }
.provider-icon { grid-column:1; justify-self:end; width:28px; display:grid; place-items:center; }
.ts-provider>span:last-child { grid-column:2; text-align:center; }
.google-icon { font-weight:800; font-size:24px; background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 44%,#fbbc05 0 67%,#ea4335 0 83%,#4285f4 0); color:transparent; background-clip:text; }
.microsoft-icon { width:23px; height:23px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.microsoft-icon i:nth-child(1){background:#f25022}.microsoft-icon i:nth-child(2){background:#7fba00}.microsoft-icon i:nth-child(3){background:#00a4ef}.microsoft-icon i:nth-child(4){background:#ffb900}
.brand-icon { display:block; width:24px; height:24px; }
.apple-brand-icon { width:22px; height:22px; }
.passkey-brand-icon { width:27px; height:27px; }
.ts-first { margin:69px 0 0; font-size:16px; color:#737373; }
.ts-first strong { color:#292929; }.ts-first span { text-decoration:underline; }
.ts-terms { position:absolute; left:20px; right:20px; bottom:48px; margin:0; text-align:center; color:#6d6d6d; font-size:15px; line-height:1.45; }
.ts-password-form { margin-top:62px; text-align:center; }
.ts-password-form h1 { margin:0; font-size:27px; letter-spacing:-.5px; }
.ts-password-form p { margin:-5px 0 15px; color:#6d6d6d; }
.ts-back { border:0; background:transparent; color:#666; text-decoration:underline; padding:8px; cursor:pointer; }
.ts-lesson { width:100%; margin-top:72px; background:#f2f7f4; border:1px solid #d2e1db; border-radius:12px; padding:30px; }
.ts-lesson h1 { font-size:27px; line-height:1.2; letter-spacing:-.4px; margin:18px 0 12px; }
.ts-lesson p { color:#4f5d58; line-height:1.65; }.ts-lesson ul { padding-left:21px; color:#4f5d58; line-height:1.8; }
.ts-activated { width:100%; margin-top:72px; text-align:center; }
.activated-check { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 22px; border-radius:50%; background:#e7f3ed; color:#287259; font-size:30px; font-weight:700; }
.ts-activated h1 { margin:0 0 12px; font-size:28px; letter-spacing:-.5px; }
.ts-activated p { margin:0 auto 28px; max-width:340px; color:#686868; line-height:1.65; }
.ts-activated .ts-primary { width:100%; }

.cf-body { background:#f4f5f7; color:#172b4d; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
.cf-page { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px 28px; background:linear-gradient(135deg,#f7f8fa 0,#eef2f7 100%); }
.cf-card { width:min(400px,100%); background:#fff; border-radius:4px; padding:38px 40px 32px; box-shadow:0 7px 18px rgba(9,30,66,.15); text-align:center; }
.cf-brand { display:flex; justify-content:center; align-items:center; gap:9px; margin-bottom:30px; color:#1868db; letter-spacing:.08em; font-size:17px; }
.cf-mark { position:relative; display:block; width:28px; height:28px; transform:rotate(-12deg); }
.cf-mark i { position:absolute; left:3px; width:22px; height:8px; border-radius:8px 2px; background:#1868db; transform:skew(-23deg); }
.cf-mark i:first-child { top:5px; }.cf-mark i:last-child { top:15px; transform:skew(-23deg) rotate(180deg); opacity:.72; }
.cf-card h1 { margin:0 0 8px; font-size:24px; line-height:1.3; letter-spacing:-.02em; }
.cf-subtitle { margin:0 0 26px; color:#5e6c84; font-size:14px; }
.cf-form { display:grid; gap:8px; text-align:left; }
.cf-form label { color:#42526e; font-size:13px; font-weight:600; }
.cf-form input { height:44px; border:2px solid #dfe1e6; border-radius:3px; padding:0 11px; background:#fafbfc; color:#172b4d; outline:none; }
.cf-form input:focus { border-color:#4c9aff; background:#fff; }
.cf-primary { height:42px; margin-top:8px; border:0; border-radius:3px; background:#0c66e4; color:#fff; font-weight:600; cursor:pointer; }
.cf-primary:hover { background:#0055cc; }
.cf-divider { display:flex; align-items:center; gap:12px; margin:22px 0; color:#6b778c; font-size:11px; font-weight:700; }
.cf-divider::before,.cf-divider::after { content:""; height:1px; flex:1; background:#dfe1e6; }
.cf-sso { width:100%; height:42px; margin-bottom:10px; display:grid; grid-template-columns:32px 1fr 32px; align-items:center; border:0; border-radius:3px; background:#fff; color:#172b4d; box-shadow:0 1px 3px rgba(9,30,66,.25); font-weight:600; cursor:pointer; }
.cf-sso>span { grid-column:1; justify-self:center; }.cf-sso:not(:has(.microsoft-icon))::after { content:""; }.cf-sso .microsoft-icon { width:19px; height:19px; }
.cf-sso { text-align:center; }.cf-links { margin:22px 0 0; font-size:13px; }.cf-links a { color:#0c66e4; text-decoration:none; }
.cf-back { margin:8px auto 0; border:0; background:none; color:#0c66e4; cursor:pointer; }
.cf-lesson { text-align:left; }.cf-lesson>span { display:inline-block; padding:5px 9px; border-radius:999px; background:#e9f2ff; color:#0c66e4; font-size:12px; font-weight:700; }
.cf-lesson h1 { margin:18px 0 12px; }.cf-lesson p,.cf-lesson li { color:#42526e; line-height:1.65; }.cf-lesson ul { padding-left:20px; }
.cf-page footer { margin-top:30px; text-align:center; color:#6b778c; font-size:12px; }.cf-page footer strong { color:#42526e; letter-spacing:.09em; }.cf-page footer p { margin:8px 0 0; }

.admin-shell { width:100%; min-height:100vh; background:#f3f2ee; padding:24px; }
.admin-wrap { width:100%; max-width:none; min-width:0; margin:0; position:relative; }
.admin-header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:12px 0 28px; }
.admin-header h1 { margin:8px 0 0; font-size:42px; }
.admin-header p { color:var(--muted); }
.reset-button { border:1px solid #d8b5b5; background:#fff5f5; color:#9b3535; border-radius:9px; padding:11px 15px; font-weight:700; cursor:pointer; }
.reset-button:hover { background:#fce8e8; }
.reset-button:disabled { opacity:.55; cursor:wait; }
.delete-button { border:1px solid #d8b5b5; background:#fff; color:#9b3535; border-radius:8px; padding:10px 14px; font-weight:700; cursor:pointer; }
.delete-button:hover { background:#fff5f5; }
.delete-button:disabled { opacity:.45; cursor:not-allowed; }
.admin-nav { display:flex; gap:6px; margin:0 110px 24px 0; padding:5px; width:max-content; border:1px solid var(--line); border-radius:10px; background:#fff; }
.admin-nav a { padding:9px 14px; border-radius:7px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:700; }
.admin-nav a.active { background:#31564d; color:#fff; }
.logout { border:1px solid var(--line); background:#fff; border-radius:9px; padding:10px 14px; cursor:pointer; }
.admin-logout { position:absolute; top:0; right:0; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.metric { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; }
.metric span { color:var(--muted); font-size:13px; }
.metric strong { display:block; font-size:32px; margin-top:8px; }
.table-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow-x:auto; overflow-y:hidden; }
.admin-shell .table-card table { min-width:1320px; }
.table-tools { display:flex; justify-content:space-between; gap:12px; padding:18px; border-bottom:1px solid var(--line); }
.table-tools input { width:min(320px,100%); padding:10px 12px; border:1px solid var(--line); border-radius:8px; }
.export-button { border:0; background:#e8f0ed; color:#31564d; border-radius:8px; padding:10px 14px; font-weight:700; cursor:pointer; }
.export-button:disabled { opacity:.6; cursor:wait; }
.participant-add { display:grid; grid-template-columns:1fr minmax(320px,430px) auto; gap:14px; align-items:center; margin-bottom:18px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.participant-add>div { display:flex; flex-direction:column; gap:4px; }.participant-add span { color:var(--muted); font-size:13px; }
.participant-add textarea { min-width:0; resize:vertical; padding:11px 13px; border:1px solid var(--line); border-radius:8px; line-height:1.5; }
.admin-error { margin:-8px 0 16px; color:var(--danger); font-size:14px; }
.admin-notice { margin:-8px 0 16px; color:#287259; font-size:14px; }
.template-card { margin-bottom:18px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.template-heading,.campaign-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.template-heading>div,.campaign-bar>div:first-child { display:flex; flex-direction:column; gap:5px; }
.template-heading span,.campaign-bar small { color:var(--muted); font-size:13px; }
.template-form { display:grid; grid-template-columns:1fr 2fr; gap:14px; margin-top:18px; }
.template-form label { display:flex; flex-direction:column; gap:7px; color:#50504d; font-size:13px; font-weight:700; }
.template-form label:nth-child(n+3) { grid-column:span 1; }
.template-form input,.template-form textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px; background:#fafaf8; font:inherit; font-weight:400; resize:vertical; }
.template-save { justify-self:start; }
.secondary-button,.send-button { border:1px solid var(--line); border-radius:8px; padding:10px 14px; background:#fff; font-weight:700; cursor:pointer; }
.send-button { border-color:#31564d; background:#31564d; color:#fff; }
.secondary-button:disabled,.send-button:disabled { opacity:.45; cursor:not-allowed; }
.email-preview { width:min(680px,100%); margin:20px auto 0; padding:32px; border:1px solid #e2e1dd; border-radius:12px; box-shadow:0 10px 35px rgba(0,0,0,.07); color:#363636; }
.email-preview img { display:block; width:165px; height:auto; margin:0 auto 30px; }
.email-preview small { color:#888; }.email-preview h2 { font-size:20px; margin:12px 0 28px; }.email-preview h3 { font-size:19px; margin:22px 0 8px; }.email-preview p { color:#555; line-height:1.65; }
.email-preview button { width:100%; margin-top:20px; padding:13px; border:0; border-radius:6px; background:#3b6dd8; color:#fff; font-weight:750; }
.campaign-bar { margin-bottom:18px; padding:16px 20px; background:#eaf1ef; border:1px solid #d2dfdb; border-radius:14px; }
.campaign-bar>div:last-child { display:flex; gap:10px; flex-wrap:wrap; }
.smtp-status { align-self:flex-start; padding:4px 8px; border-radius:999px; background:#f3dfc5; color:#7b5226; font-size:11px; font-weight:800; }
.check-cell { width:46px; text-align:center; padding-left:16px; padding-right:8px; }
.check-cell input { width:16px; height:16px; accent-color:#31564d; }
.table-select { appearance:auto !important; display:inline-block; width:18px !important; height:18px !important; margin:0; accent-color:#31564d; vertical-align:middle; cursor:pointer; }
.ip-cell { width:150px; max-width:150px; }
.input-cell { width:68px; max-width:68px; }
.strength-cell { width:52px; max-width:52px; }
.suspicious-cell { width:72px; max-width:72px; }
.time-cell { width:158px; max-width:158px; overflow:visible; font-size:12px; }
table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px; }
th,td { padding:11px 10px; border-bottom:1px solid #eeede9; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
th:nth-child(2),td:nth-child(2) { width:220px; max-width:220px; }
th { color:var(--muted); background:#fafaf8; font-size:12px; }
.status { display:inline-flex; align-items:center; gap:6px; }
.status::before { content:""; width:7px; height:7px; border-radius:50%; background:#c9c9c5; }
.status.yes::before { background:#3f8a72; }
.status.risk::before { background:#c65a4b; }
.admin-login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(420px,100%); background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px; box-shadow:0 16px 48px rgba(0,0,0,.08); }
.error { color:var(--danger); font-size:13px; margin-top:12px; }

@media (max-width:800px) {
  .simulation-page { grid-template-columns:1fr; }
  .sim-brand { min-height:330px; padding:36px 28px; }
  .login-panel { min-height:560px; }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .table-card { overflow:auto; }
  .admin-header { align-items:start; flex-direction:column; }
  .participant-add { grid-template-columns:1fr; }
  .template-form { grid-template-columns:1fr; }.template-form label:nth-child(n+3){grid-column:auto}.campaign-bar,.template-heading{align-items:flex-start;flex-direction:column}
  .admin-logout { position:static; float:right; margin-bottom:18px; }
  .admin-nav { margin-right:0; clear:both; }
}
@media (max-width:520px) { .operator-card{padding:30px 24px}.admin-shell{padding:12px}.metrics{grid-template-columns:1fr 1fr}.metric{padding:16px} }
@media (max-width:520px) { .ts-page{padding-top:24px}.ts-logo{font-size:28px}.ts-form{margin-top:30px}.ts-first{margin-top:48px}.ts-terms{position:static;margin-top:auto;padding-top:60px}.ts-input{font-size:19px}.ts-provider{font-size:17px} }
@media (max-width:520px) { .cf-page{padding:20px 12px}.cf-card{padding:30px 22px}.cf-page footer{margin-top:20px} }
@media (prefers-reduced-motion:no-preference) { .operator-card,.login-panel { animation:rise .45s ease-out; } @keyframes rise { from{opacity:0;transform:translateY(10px)} } }

/* Confluence Server / SecSign-inspired security simulation */
.legacy-body { margin:0; min-width:320px; background:#fff; color:#172b4d; font:14px Arial,Helvetica,sans-serif; }
.legacy-page { min-height:100vh; display:flex; flex-direction:column; }
.legacy-header { height:40px; background:#0049B0; color:#fff; box-shadow:0 1px 2px rgba(9,30,66,.35); }
.legacy-nav { width:100%; height:40px; margin:0; display:flex; align-items:center; padding:0 20px 0 0; gap:2px; box-sizing:border-box; }
.legacy-site,.legacy-nav-link,.legacy-icon-link { height:38px; display:flex; align-items:center; border-radius:3px; color:#fff; text-decoration:none; }
.legacy-site { gap:8px; padding:0; font-size:16px; letter-spacing:0; }.legacy-site:hover,.legacy-nav-link:hover,.legacy-icon-link:hover { background:rgba(255,255,255,.15); }
.legacy-nav-link { padding:0 10px; font-size:14px; font-weight:400; }.legacy-nav-spacer { flex:1; }
.legacy-site + .legacy-nav-link { margin-left:-2px; padding-left:0; }
.legacy-confluence-logo { display:block; width:176px; height:33px; object-fit:contain; }
.legacy-search { height:28px; width:180px; display:flex; align-items:center; padding:0 8px; margin-right:4px; border-radius:3px; background:rgba(9,30,66,.28); }.legacy-search span { font-size:18px; margin-right:5px; }.legacy-search input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:#fff; font-size:13px; }.legacy-search input::placeholder{color:#deebff}.legacy-icon-link { width:30px; height:30px; justify-content:center; border-radius:50%; font-size:15px; font-weight:700; }
.legacy-main { flex:1; padding:64px 20px 40px; }.legacy-login { width:360px; max-width:100%; margin:0 auto; text-align:center; }
.legacy-login h1 { margin:0 0 30px; color:#172b4d; font-size:24px; font-weight:400; letter-spacing:0; }.legacy-login h1 span { font-weight:600; }
.legacy-form { text-align:left; }.legacy-form>label:not(.legacy-remember) { display:block; margin:0 0 6px; color:#172b4d; font-weight:600; }.legacy-form>input { width:100%; height:40px; margin:0 0 18px; padding:8px 10px; border:1px solid #7a869a; border-radius:3px; background:#fff; color:#172b4d; outline:none; }.legacy-form>input:focus { border-color:#4c9aff; box-shadow:0 0 0 1px #4c9aff; }
.legacy-remember { display:flex; align-items:center; gap:4px; margin:-2px 0 18px; color:#42526e; font-weight:400; }.legacy-remember input { width:16px; height:16px; accent-color:#0052cc; }
.legacy-login-button { width:100%; height:40px; border:0; border-radius:3px; background:#0052cc; color:#fff; font-weight:700; cursor:pointer; }.legacy-login-button:hover { background:#0065ff; }
.legacy-forgot { display:block; margin:18px 0; color:#0052cc; text-decoration:none; }.legacy-secsign { display:flex; align-items:center; justify-content:center; gap:7px; margin:26px 0 20px; color:#5e6c84; font-weight:700; }.legacy-shield { width:26px; height:30px; display:grid; place-items:center; border-radius:5px 5px 12px 12px; background:#43a047; color:#fff; font-size:15px; }
.legacy-switch { width:100%; min-height:38px; padding:8px 12px; border:1px solid #c1c7d0; border-radius:3px; background:#f4f5f7; color:#42526e; font-weight:600; cursor:pointer; }.legacy-switch:hover { background:#ebecf0; }
.legacy-lesson { padding:24px; border:1px solid #b3d4ff; border-radius:4px; background:#deebff; text-align:left; }.legacy-lesson>span { display:inline-block; padding:4px 8px; border-radius:3px; background:#0052cc; color:#fff; font-size:12px; font-weight:700; }.legacy-lesson h2 { margin:16px 0 10px; font-size:22px; }.legacy-lesson p,.legacy-lesson li { color:#344563; line-height:1.65; }.legacy-lesson ul { padding-left:20px; margin-bottom:0; }
.legacy-footer { padding:20px; border-top:1px solid #dfe1e6; color:#6b778c; text-align:center; font-size:12px; }.legacy-footer p { margin:0 0 12px; }.legacy-footer a { color:#0052cc; text-decoration:none; }.legacy-footer strong { color:#42526e; letter-spacing:.14em; }
@media (max-width:620px) { .legacy-header{height:auto}.legacy-nav{height:auto;min-height:40px;padding:4px 8px 4px 0}.legacy-search{display:none}.legacy-site{font-size:15px}.legacy-main{padding-top:42px}.legacy-footer{line-height:1.7} }

/* SecSign plugin card proportions and treatment from the reference page */
.legacy-main { padding-top:60px; background:#fff; }
.legacy-login { width:100%; max-width:270px; box-sizing:border-box; margin:0 auto; padding:40px 5px 20px; border-radius:5px; background:linear-gradient(180deg,#0849ef 0%,#033bbb 100%); box-shadow:0 10px 30px rgba(0,0,0,.4); color:#fff; }
.legacy-login h1 { padding:0 10px 20px; margin:0; color:#fff; font-size:18px; font-weight:400; }
.legacy-login h1 span { font-weight:700; }
.legacy-stage { width:100%; }
.legacy-form { min-height:200px; text-align:center; padding-top:10px; }
.legacy-form>label:not(.legacy-remember) { display:none; }
.legacy-form>input { display:block; width:90%; max-width:220px; height:40px; box-sizing:border-box; margin:0 auto 18px; padding:10px 12px; border:0; border-radius:5px; color:#656565; font-size:14px; font-weight:400; text-align:center; background:#fff; outline:0; }
.legacy-form>input:focus { box-shadow:0 0 0 2px rgba(255,255,255,.75); }
.legacy-form>input + label + input { margin-top:10px; }
.legacy-remember { display:block; width:90%; margin:10px auto 20px; color:#fff; text-align:center; font-size:13px; font-weight:400; }
.legacy-remember input { accent-color:#fff; vertical-align:-2px; }
.legacy-login-button { display:block; width:90%; height:35px; margin:20px auto 0; border:1px solid #fff; border-radius:27px; background:transparent; color:#fff; font-size:14px; font-weight:400; }
.legacy-login-button:hover { background:#fff; color:#099be0; }
.legacy-forgot { margin:20px 0 0; color:#fff; font-size:13px; }
.legacy-secsign { margin:20px auto 0; color:#fff; font-size:13px; }
.legacy-shield { width:40px; height:40px; border-radius:5px; background:rgba(255,255,255,.95); color:#0849ef; }
.legacy-switch { display:block; width:auto; max-width:300px; min-height:30px; margin:10px auto 0; padding:5px 12px; border:0; background:transparent; color:#099be0; font-size:13px; font-weight:400; text-decoration:underline; }
.legacy-switch:hover { background:transparent; color:#3572b0; }
.legacy-lesson { margin:0 10px; padding:20px; border:1px solid rgba(255,255,255,.7); border-radius:5px; background:rgba(255,255,255,.92); color:#34495e; text-align:left; }
.legacy-lesson>span { color:#099be0; background:transparent; padding:0; }.legacy-lesson h2 { color:#34495e; font-size:20px; }.legacy-lesson p,.legacy-lesson li { color:#34495e; }
.legacy-footer { background:#f1f2f5; }