:root {
  --deep: #193b34;
  --green: #668c00;
  --teal: #009e8d;
  --lime: #a8cf00;
  --gold: #ffd800;
  --ink: #20342f;
  --muted: #65756f;
  --line: #dfe8e3;
  --soft: #f4f8f5;
  --shadow: 0 12px 35px rgba(25, 59, 52, .09);
}

.eyebrow,
.category b,
.breadcrumb button { color: var(--teal); }

.primary {
  border-color: var(--lime);
  background: linear-gradient(135deg, var(--lime), #8fbd00);
  color: #203500;
}

.secondary { border-color: #b9cdc4; color: var(--deep); }
.login-brand {
  background: linear-gradient(145deg, #fff, #eff8ec);
  color: var(--ink);
  border-right: 1px solid var(--line);
}
.login-brand:after { background: #00a79012; border-color: #a8cf001c; }
.login-brand img { width: 170px; height: 170px; background: transparent; border-radius: 0; padding: 0; object-fit: contain; }
.login-brand .eyebrow { color: var(--teal); }
.login-brand p { color: #546860; }
.login-points span { background: #fff; border-color: #d7e7d3; color: #3b5149; }
.environment { background: #fff5bd; color: #5f5600; }
.demo-roles button:hover { border-color: var(--lime); background: #f7fbe9; }
.demo-roles button>b { background: var(--deep); }
.microsoft-login { width: 100%; margin-top: 10px; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; text-align: left; border: 1px solid #aebfca; background: #fff; color: #263c47; border-radius: 9px; padding: 10px 13px; font-weight: 900; }
.microsoft-login>b { display: grid; place-items: center; width: 34px; height: 34px; background: #f1f5f7; border-radius: 6px; color: #1778b5; font-size: 1.2rem; }
.microsoft-login span { display: grid; gap: 2px; }
.microsoft-login small { color: var(--muted); font-size: .68rem; font-weight: 500; }
.microsoft-login:hover { border-color: #1778b5; background: #f8fbfd; }

.topbar {
  background: #fff;
  color: var(--ink);
  border-bottom: 4px solid var(--gold);
  box-shadow: 0 3px 14px rgba(25, 59, 52, .08);
}
.topbar>img { width: 105px; height: 58px; object-fit: contain; background: transparent; border-radius: 0; padding: 0; }
.top-brand small,
.account small { color: var(--muted); }
.issued-id-note { margin: 12px 0 8px; padding: 10px 12px; border-radius: 10px; background: #f3f8ee; color: #31584b; font-size: 13px; line-height: 1.6; }

.device-policy { margin: 20px 0; padding: 22px; border: 1px solid #dce8e2; border-radius: 18px; background: #fff; }
.device-policy>div:first-child { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.device-policy>div:first-child span { font-size: 30px; }
.device-policy h2 { margin: 0; font-size: 20px; }
.device-policy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.device-policy-grid article { padding: 16px; border-radius: 14px; background: #f5f8f6; }
.device-policy-grid article:nth-child(2) { background: #eff8e0; }
.device-policy-grid b,.device-policy-grid span { display: block; }
.device-policy-grid b { margin-bottom: 7px; color: #173f35; }
.device-policy-grid span { color: #587069; font-size: 13px; line-height: 1.7; }
@media (max-width: 760px) { .device-policy-grid { grid-template-columns: 1fr; } }

.admin-flow-tabs { display:flex; align-items:center; gap:10px; margin:18px 0 22px; }
.admin-flow-tabs button { flex:1; min-height:64px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #dce7e2; border-radius:14px; background:#fff; color:#536a63; font-weight:700; }
.admin-flow-tabs button b { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#edf2ef; }
.admin-flow-tabs button.active { border-color:#95bd35; background:#f2f8e5; color:#173f35; box-shadow:0 6px 18px rgba(38,79,64,.09); }
.admin-flow-tabs button.active b { background:#a8d421; color:#173f35; }
.admin-flow-tabs>i { color:#8aa098; font-style:normal; }
.admin-card-list { display:grid; gap:14px; }
.admin-card-list>article { padding:18px; border:1px solid #dfe9e4; border-radius:16px; background:#fbfdfc; }
.admin-card-head,.office-row { display:flex; align-items:center; gap:14px; }
.admin-card-head>div,.office-row>div { flex:1; }
.admin-card-head b,.admin-card-head small,.office-row b,.office-row small { display:block; }
.admin-card-head small,.office-row small { margin-top:4px; color:#6b7e78; }
.office-row { margin:14px 0 10px 46px; padding:13px; border-radius:12px; background:#fff; }
.office-row>span { font-size:24px; }
.add-office { margin-left:46px; color:#245d4e; background:transparent; border:1px dashed #9fbdb4; }
.account-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0 20px; }
.account-steps article { padding:14px; border-radius:12px; background:#f4f8f6; }
.account-steps b,.account-steps span { display:block; }
.account-steps span { margin-top:6px; color:#647871; font-size:13px; }
.stop-chip { display:inline-block; padding:5px 9px; border-radius:999px; background:#f2e8e8; color:#8b3e3e; font-size:12px; font-weight:700; }
.permission-note { display:flex; gap:12px; margin-top:16px; padding:16px 18px; border-left:4px solid #d6a222; background:#fff8e5; }
.permission-note b { white-space:nowrap; color:#654c0b; }
.permission-note span { color:#735f2f; }
.admin-doc-note { display:flex; gap:16px; margin:18px 0; padding:16px 18px; border-radius:14px; background:#eef6f2; border:1px solid #d5e6de; }
.admin-doc-note b { min-width:210px; color:#173f35; }
.admin-doc-note span { color:#526d64; line-height:1.8; }
.admin-modal { width:min(720px,calc(100vw - 28px)); }
.admin-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }
.admin-form-grid label { display:flex; flex-direction:column; gap:7px; color:#314f46; font-weight:700; }
.admin-form-grid input,.admin-form-grid select { width:100%; min-height:44px; border:1px solid #cfded8; border-radius:10px; padding:9px 11px; background:#fff; font:inherit; }
.admin-form-grid .wide,.admin-form-grid fieldset { grid-column:1/-1; }
.admin-form-grid fieldset { display:flex; flex-wrap:wrap; gap:12px 20px; padding:14px; border:1px solid #d8e4df; border-radius:12px; }
.admin-form-grid fieldset label { flex-direction:row; align-items:center; font-weight:600; }
.admin-form-grid fieldset input { width:20px; min-height:20px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.admin-warning,.history-box { display:flex; flex-direction:column; gap:7px; padding:15px; border-radius:12px; background:#fff0ed; color:#743c31; }
.admin-warning.safe { background:#eef7e6; color:#31583d; }
.history-box { background:#f3f7f5; color:#3a5950; }
.proxy-tabs { display:flex; gap:8px; margin:18px 0; padding:6px; border-radius:14px; background:#eaf1ed; }
.proxy-tabs button { flex:1; min-height:46px; border:0; border-radius:10px; background:transparent; color:#536b63; font-weight:700; }
.proxy-tabs button.active { background:#fff; color:#173f35; box-shadow:0 4px 12px rgba(31,66,55,.1); }
.proxy-work { padding:22px; border:1px solid #dce7e2; border-radius:18px; background:#fff; }
.proxy-steps { display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.proxy-steps b { flex:1; padding:11px 8px; border-radius:10px; background:#eef2f0; color:#708079; text-align:center; font-size:13px; }
.proxy-steps b.active { background:#eaf6d5; color:#315626; }
.proxy-steps i { color:#8ca099; font-style:normal; }
.proxy-dates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.proxy-dates label,.proxy-setting-grid label { display:flex; flex-direction:column; gap:7px; color:#345148; font-weight:700; }
.proxy-dates input,.proxy-setting-grid input { min-height:44px; padding:8px 11px; border:1px solid #ceded7; border-radius:10px; font:inherit; }
.proxy-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:270px; padding:30px; border:2px dashed #9dbcb2; border-radius:16px; background:#f7fbf9; text-align:center; }
.proxy-drop>span { font-size:42px; }
.proxy-drop>b { margin-top:8px; font-size:20px; color:#173f35; }
.proxy-drop p,.proxy-drop small { color:#647970; }
.proxy-drop button { margin:12px 0; background:#a8d421; color:#173f35; font-weight:800; }
.proxy-summary { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.proxy-summary>* { padding:8px 11px; border-radius:9px; background:#f1f6f3; }
.proxy-summary b { background:#e9f5d7; color:#315b2a; }
.proxy-validation { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; padding:13px 15px; border-radius:11px; }
.proxy-validation.ok { background:#eaf7ef; color:#245d42; }
.proxy-validation.error { background:#fff0ed; color:#8a4035; }
.proxy-validation span { font-size:13px; }
.proxy-table th,.proxy-table td { white-space:nowrap; }
.proxy-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; margin-top:16px; }
.proxy-setting-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.proxy-setting-grid .wide { grid-column:1/-1; }
.stamp-safe { grid-column:1/-1; display:flex; align-items:center; gap:14px; padding:16px; border-radius:13px; background:#f3f7f5; }
.stamp-safe>span { display:grid; place-items:center; width:54px; height:54px; border:2px solid #b44; border-radius:50%; color:#b44; font-weight:800; }
.stamp-safe>img { width:64px; height:64px; object-fit:contain; padding:4px; background:#fff; border:1px solid #d7e1dc; border-radius:8px; }
.stamp-safe>div { flex:1; }
.stamp-safe b,.stamp-safe small { display:block; }
.stamp-safe small { color:#63766f; margin-top:4px; }
.migration-safety { display:flex; gap:12px; margin-top:16px; padding:14px 17px; border-radius:12px; background:#fff8e7; color:#6a5628; }
.azure-check-status { margin:16px 0; padding:17px 19px; border:1px solid #cfe4d9; border-radius:14px; background:#f1f9f5; }
.azure-check-status>div { display:flex; align-items:center; gap:10px; color:#194f3e; }
.azure-check-status>div span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#3a8b68; color:#fff; font-weight:800; }
.azure-check-status ul { margin:12px 0 0 36px; padding:0; color:#4d695f; line-height:1.8; }
.proxy-modal { width:min(820px,calc(100vw - 28px)); max-height:90vh; overflow:auto; }
.notice-sheet { position:relative; margin:18px auto; padding:38px 46px; max-width:640px; min-height:690px; border:1px solid #bcc9c4; background:#fff; color:#222; box-shadow:0 8px 24px rgba(20,48,39,.12); }
.notice-sheet h3 { margin:28px 0; text-align:center; font-size:24px; letter-spacing:.08em; }
.notice-date { text-align:right; }
.notice-person { margin:26px 0; font-size:18px; }
.notice-company { margin-left:auto; width:max-content; max-width:65%; line-height:1.8; }
.notice-sheet>p:not(.notice-person) { margin-top:44px; line-height:1.9; }
.notice-sheet table { width:100%; margin-top:25px; border-collapse:collapse; }
.notice-sheet th,.notice-sheet td { padding:12px; border:1px solid #718079; }
.notice-sheet th { width:55%; background:#f0f4f2; text-align:left; }
.notice-sheet td { text-align:right; font-weight:800; }
.notice-stamp { position:absolute; right:54px; bottom:52px; display:grid; place-items:center; width:54px; height:54px; border:2px solid #b34a45; border-radius:50%; color:#b34a45; font-weight:800; }
.preview-note { padding:12px 14px; border-radius:10px; background:#fff8e7; color:#6d5929; }
.output-check { display:grid; gap:9px; margin:18px 0; padding:17px; border-radius:12px; background:#eef7f2; color:#315c4b; }
.output-check>* { display:block; }
.account-automation { display:flex; flex-wrap:wrap; gap:9px; margin:14px 0; }
.account-automation button { background:#eef5f1; color:#245747; border:1px solid #cfe0d9; }
.automation-note { display:flex; gap:14px; margin:12px 0 18px; padding:15px 17px; border-left:4px solid #76a61d; background:#f3f8e9; color:#34543d; }
.automation-note b { min-width:220px; }
.automation-note span { line-height:1.75; }
.automation-note.manual,.automation-note.map { border-radius:12px; }
@media (max-width: 850px) { .admin-flow-tabs { align-items:stretch; } .admin-flow-tabs>i,.proxy-steps i { display:none; } .account-steps { grid-template-columns:repeat(2,1fr); } .proxy-steps { display:grid; grid-template-columns:repeat(2,1fr); } .proxy-setting-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px) { .admin-flow-tabs,.proxy-tabs { flex-direction:column; } .admin-flow-tabs button,.proxy-tabs button,.account-automation button { width:100%; } .account-steps,.admin-form-grid,.proxy-dates,.proxy-setting-grid,.proxy-steps { grid-template-columns:1fr; } .admin-card-head,.office-row { align-items:flex-start; flex-wrap:wrap; } .office-row,.add-office { margin-left:0; } .permission-note,.admin-doc-note,.migration-safety,.proxy-validation,.automation-note { flex-direction:column; align-items:flex-start; } .admin-doc-note b,.automation-note b { min-width:0; } .modal-actions,.proxy-actions { flex-direction:column-reverse; } .modal-actions button,.proxy-actions button { width:100%; } .proxy-work { padding:15px; } .notice-sheet { padding:25px 20px; min-height:620px; } .notice-company { max-width:80%; font-size:12px; } }
.top-search {
  width: min(390px, 32vw);
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--teal);
}
.top-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}
.top-actions>button { border-color: #c8d8d0; background: #fff; color: var(--deep); }
.top-actions .install { background: var(--lime); color: #203500; border-color: var(--lime); }
.account>b { background: #edf6d9; color: var(--green); }

.sidebar { background: var(--deep); color: #fff; border-right: 0; }
.sidebar>button,
.side-bottom button { color: #d9ebe5; }
.sidebar>button small { display: block; margin: 4px 0 0 25px; color: #a9c0b8; font-size: .67rem; font-weight: 500; }
.sidebar>button:hover,
.sidebar>button.active { background: #ffffff18; color: #fff; }
.sidebar>button.active { box-shadow: inset 4px 0 var(--gold); }
.side-bottom small { color: #afc6be; }
.hero { background: linear-gradient(135deg, #fff, #eef8ec); }
.category>span,
.tool-icon,
.steps b { background: #edf6e5; }
.status.windows { background: #e6f3cd; color: #547b00; }
.status.pilot { background: #e0f5f1; color: #007a6e; }
.status.proxy { background: #e9f1ff; color: #245e91; }
.tool-card>a.current-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #aac0b6;
  background: #fff;
  color: var(--green);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.tool-card>a.current-tool:hover { border-color: var(--lime); background: #f7fbe9; }
.home-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 12px; }
.home-tool-grid .tool-card { grid-template-columns: 52px 1fr; }
  .home-tool-grid .tool-card>button,
  .home-tool-grid .tool-card>a { grid-column: 2; justify-self: start; }
.empty-search { padding: 34px; border: 1px dashed #b8c9c1; border-radius: 12px; background: #fff; color: var(--muted); text-align: center; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 14px; }
.settings-grid article { display: grid; grid-template-columns: 58px 1fr; gap: 15px; align-items: start; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.settings-grid article>span { display: grid; place-items: center; width: 54px; height: 54px; background: #edf6e5; border-radius: 12px; font-size: 1.7rem; }
.settings-grid h2 { margin: 2px 0 7px; font-size: 1.08rem; }
.settings-grid p { margin: 0 0 10px; color: var(--muted); line-height: 1.65; }
.settings-grid em { display: inline-block; color: var(--green); background: #eef7db; padding: 5px 8px; border-radius: 14px; font-size: .7rem; font-style: normal; font-weight: 900; }
.settings-grid button { grid-column: 2; justify-self: start; border: 1px solid #b9cdc4; background: #fff; color: var(--deep); border-radius: 8px; padding: 9px 13px; font-weight: 800; }
.settings-note { margin-top: 16px; display: grid; gap: 4px; padding: 15px 18px; border-left: 5px solid var(--gold); background: #fff9dc; }
.settings-note span { color: #665f39; }
.sample-pill { margin-left: auto; background: #fff1a9; color: #665900; border-radius: 20px; padding: 7px 11px; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.pilot-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: 0 5px 18px rgba(25,59,52,.04); }
.content,.pilot-panel { min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-head h2 { margin: 0 0 5px; }
.panel-head p { margin: 0; color: var(--muted); }
.panel-head>button,.data-table button,.publish-list button { border: 1px solid var(--lime); background: var(--lime); color: #203500; border-radius: 8px; padding: 9px 13px; font-weight: 900; }
.filter-row { display: flex; gap: 10px; margin-bottom: 16px; }
.filter-row input,.filter-row select { min-height: 42px; border: 1px solid #c8d7d0; border-radius: 8px; padding: 9px 12px; background: #fff; }
.filter-row input { flex: 1; }
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.data-table th,.data-table td { border-bottom: 1px solid var(--line); padding: 13px 11px; text-align: left; }
.data-table th { background: var(--soft); color: #52665e; font-size: .76rem; }
.data-table td { font-size: .86rem; }
.data-table button { background: #fff; color: var(--green); border-color: #b8cdbf; }
.ok-chip,.wait-chip,.new-chip { display: inline-block; border-radius: 15px; padding: 5px 8px; font-size: .7rem; font-weight: 900; }
.ok-chip { background: #e6f3cd; color: #547b00; }
.wait-chip { background: #fff1c5; color: #7a6000; }
.new-chip { background: #fff0a0; color: #675700; }
.role-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.role-summary article { display: grid; gap: 6px; padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); }
.role-summary span { color: var(--muted); font-size: .76rem; }
.role-summary strong { color: var(--teal); font-size: 1.5rem; }
.security-strip { margin-top: 16px; padding: 13px 15px; background: #edf7f4; border-left: 5px solid var(--teal); color: #31574e; }
.publish-list { display: grid; gap: 9px; }
.publish-list>div { display: grid; grid-template-columns: 1fr 170px minmax(210px,auto); gap: 15px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 15px; }
.publish-list span { color: var(--muted); }
.publish-list label { font-size: .82rem; font-weight: 800; }
.feature-release-panel { display: grid; gap: 18px; }
.release-office-select { display: grid; gap: 7px; max-width: 620px; font-weight: 900; }
.release-office-select select { border: 1px solid #b8cbc2; border-radius: 9px; background: #fff; padding: 12px; color: var(--ink); font: inherit; }
.release-summary { display: flex; align-items: center; gap: 16px; padding: 13px 16px; border-radius: 10px; background: #edf7f4; }
.release-summary b { min-width: 82px; color: var(--teal); font-size: 1.6rem; }
.release-summary small { display: block; color: var(--muted); font-size: .7rem; }
.release-summary span { color: var(--muted); }
.release-feature small { display: block; margin-top: 4px; color: var(--muted); }
.release-feature.waiting { background: #f6f7f6; }
.release-feature.waiting>div,.release-feature.waiting>span,.release-feature.waiting>label { opacity: .68; }
.release-feature input { width: 18px; height: 18px; vertical-align: middle; accent-color: var(--teal); }
.release-feature input:disabled { cursor: not-allowed; }
.settings-office-select { display:grid; gap:7px; max-width:720px; margin:0 0 18px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; font-weight:900; }
.settings-office-select select { border:1px solid #b8cbc2; border-radius:9px; padding:12px; background:#fff; font:inherit; }
.connected-staff-head,.connected-staff-row { display:grid; grid-template-columns:minmax(140px,1.2fr) minmax(160px,1.35fr) 90px 120px 85px minmax(130px,1fr) 75px 70px; gap:8px; align-items:center; }
.connected-staff-head { padding:10px 8px; color:var(--muted); font-size:.75rem; }
.connected-staff-row { padding:10px 8px; border-top:1px solid var(--line); }
.connected-staff-row input,.connected-staff-row select { min-width:0; width:100%; border:1px solid #bfd0c8; border-radius:7px; padding:9px; background:#fff; font:inherit; }
.connected-staff-row .danger-button { padding:9px 8px; }
@media(max-width:1000px){.connected-staff-head{display:none}.connected-staff-row{grid-template-columns:1fr 1fr}.connected-staff-row .danger-button{grid-column:1/-1}}
@media(max-width:620px){.connected-staff-row{grid-template-columns:1fr}}
.notice-list { display: grid; gap: 10px; }
.notice-list article { display: grid; grid-template-columns: 130px 1fr auto; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.notice-list time { color: var(--muted); font-size: .78rem; }
.notice-list b { font-size: .96rem; }
.notice-list p { margin: 5px 0 0; color: var(--muted); }
.empty-pilot { display: grid; justify-items: center; text-align: center; padding: 55px 25px; }
.empty-pilot>span { font-size: 2.6rem; }
.empty-pilot p { color: var(--muted); }
.empty-pilot button { border: 1px solid #b8cdbf; background: #fff; color: var(--green); border-radius: 8px; padding: 10px 14px; font-weight: 900; }
.home-overview { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin: 16px 0 8px; }
.home-overview article { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 20px; }
.overview-title { display: flex; align-items: center; gap: 10px; }
.overview-title>span { display: grid; place-items: center; width: 42px; height: 42px; background: #edf6e5; border-radius: 10px; font-size: 1.3rem; }
.overview-title div { display: grid; gap: 2px; }
.overview-title small { color: var(--muted); }
.home-notice h3 { margin: 17px 0 7px; }
.home-notice p { color: var(--muted); line-height: 1.6; }
.home-notice button { border: 0; background: transparent; color: var(--teal); padding: 4px 0; font-weight: 900; }
.progress-row { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0 7px; font-size: .82rem; }
.progress-row b { color: var(--green); }
.progress-bar { height: 9px; overflow: hidden; background: #e5ece8; border-radius: 10px; }
.progress-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--teal),var(--lime)); border-radius: 10px; }
.migration-summary ul { margin: 14px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.8; font-size: .8rem; }
.setting-form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.form-section-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.form-section-title h2 { margin: 0 0 5px; }
.form-section-title p { margin: 0; color: var(--muted); }
.form-section-title>button { border: 1px solid var(--lime); background: var(--lime); color: #203500; border-radius: 8px; padding: 10px 15px; font-weight: 900; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(220px,1fr)); gap: 15px; }
.form-grid label { display: grid; gap: 7px; color: #40554d; font-size: .8rem; font-weight: 900; }
.form-grid label.wide { grid-column: 1/-1; }
.form-grid input,.pattern-list input { width: 100%; min-height: 43px; border: 1px solid #c7d6cf; border-radius: 8px; padding: 9px 11px; background: #fbfdfc; color: var(--ink); }
.pattern-list { display: grid; gap: 10px; }
.pattern-list>div { display: grid; grid-template-columns: 150px repeat(3,minmax(150px,1fr)); gap: 12px; align-items: end; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.pattern-list label { display: grid; gap: 5px; color: var(--muted); font-size: .72rem; }
.add-pattern { justify-self: start; border: 1px dashed #9db9ad; background: #fff; color: var(--teal); border-radius: 8px; padding: 10px 14px; font-weight: 900; }
.stamp-layout { display: grid; grid-template-columns: 1fr 250px; gap: 24px; }
.stamp-preview { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 230px; background: var(--soft); border: 1px dashed #b8c9c1; border-radius: 12px; text-align: center; }
.stamp-preview>span { display: grid; place-items: center; width: 74px; height: 74px; border: 4px double #bb3b35; border-radius: 50%; color: #bb3b35; font-size: 1.6rem; font-weight: 900; }
.stamp-preview>img { width: 110px; height: 110px; object-fit: contain; padding: 6px; background: #fff; border: 1px solid #d7e1dc; border-radius: 10px; }
.stamp-preview small { color: var(--muted); }
.stamp-preview button { border: 1px solid #b8cdbf; background: #fff; color: var(--green); border-radius: 8px; padding: 8px 12px; font-weight: 900; }
.stamp-preview::after { content: "または画像をここへドラッグ＆ドロップ"; color: var(--muted); font-size: .78rem; }
.stamp-preview.drag-over { background:#e7f7f2; border-color:#008f73; outline:3px solid #bce8dc; }
.stamp-file-button { cursor: pointer; border: 1px solid #b8cdbf; background: #fff; color: var(--green); border-radius: 8px; padding: 8px 12px; font-weight: 900; }
.demo-master-button { margin-left: auto; white-space: nowrap; }
.hq-only { margin-left: auto; padding: 7px 11px; border-radius: 20px; background: #193b34; color: #fff; font-size: .7rem; font-weight: 900; white-space: nowrap; }
.manual-alert { display: grid; gap: 5px; padding: 17px 20px; margin-bottom: 15px; background: #fff7c9; border-left: 6px solid var(--gold); border-radius: 0 10px 10px 0; }
.manual-alert span { color: #635c36; }
.manual-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.manual-index { position: sticky; top: 100px; display: grid; gap: 5px; padding: 17px; background: var(--deep); border-radius: 12px; }
.manual-index b { color: #fff; margin-bottom: 5px; }
.manual-index a { color: #dcebe5; text-decoration: none; padding: 9px 10px; border-radius: 7px; font-size: .8rem; }
.manual-index a:hover { background: #ffffff18; }
.manual-content { display: grid; gap: 13px; }
.manual-content>section { scroll-margin-top: 105px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.manual-content>section>span { display: inline-block; color: var(--teal); background: #e6f6f2; border-radius: 15px; padding: 5px 8px; font-size: .68rem; font-weight: 900; }
.manual-content h2 { margin: 10px 0 15px; }
.manual-content ol,.manual-content ul { line-height: 1.75; }
.manual-content ol p { margin: 3px 0 8px; color: var(--muted); }
.manual-content button,.official-link { display: inline-flex; border: 1px solid #b7cabf; background: #fff; color: var(--green); border-radius: 8px; padding: 9px 13px; font-weight: 900; text-decoration: none; }
.manual-note { padding: 12px 14px; margin: 13px 0; background: #fff2cf; color: #695a31; border-radius: 8px; }
.manual-flow { display: grid; grid-template-columns: 80px auto 1fr auto 1fr; gap: 9px; align-items: center; padding: 13px; margin: 9px 0; border: 1px solid #cfe5dc; background: #f3faf7; border-radius: 9px; }
.manual-flow.danger { border-color: #f0c6c3; background: #fff5f4; }
.manual-flow i { color: var(--muted); }
.backup-diagram { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px; margin: 12px 0; background: var(--soft); border-radius: 10px; text-align: center; }
.danger-button { color: #a33b35!important; border-color: #e1aaa6!important; }
.ng-list li { margin: 6px 0; padding: 8px 10px; background: #fff3f2; border-radius: 7px; color: #7b3833; }
.manual-content dl { display: grid; grid-template-columns: 130px 1fr; margin: 0; }
.manual-content dt,.manual-content dd { margin: 0; padding: 11px; border-bottom: 1px solid var(--line); }
.manual-content dt { font-weight: 900; color: var(--deep); }
.system-map { padding: 24px; background: linear-gradient(180deg,#f9fcfa,#eef6f2); border: 1px solid var(--line); border-radius: 16px; text-align: center; }
.map-goal { padding: 22px; background: linear-gradient(135deg,var(--deep),#28584e); color: #fff; border-radius: 13px; }
.map-goal>span { display: inline-block; padding: 4px 9px; background: var(--gold); color: #4b4300; border-radius: 15px; font-size: .68rem; font-weight: 900; }
.map-goal h2 { margin: 11px 0 7px; font-size: 1.25rem; }
.map-goal p { margin: 0; color: #dcebe5; }
.map-arrow { padding: 12px 5px; color: var(--teal); font-weight: 900; }
.map-users,.map-modules,.map-foundation { display: grid; gap: 10px; }
.map-users { grid-template-columns: repeat(4,1fr); }
.map-modules,.map-foundation { grid-template-columns: repeat(3,1fr); }
.map-users article,.map-modules article,.map-foundation article { display: grid; gap: 6px; justify-items: center; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.map-users article>span,.map-modules article>span,.map-foundation article>span { font-size: 1.45rem; }
.map-users small,.map-modules small,.map-foundation small { color: var(--muted); font-size: .68rem; line-height: 1.5; }
.map-core { width: min(720px,100%); margin: auto; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px; border-radius: 12px; }
.map-core>span { font-size: 2rem; }
.map-core div { display: grid; gap: 5px; text-align: left; }
.map-core small { color: #dcebe5; }
.login-core { background: #006f64; color: #fff; }
.portal-core { background: var(--deep); color: #fff; }
.map-backup { display: flex; justify-content: center; align-items: center; gap: 15px; }
.map-backup article { min-width: 280px; display: flex; align-items: center; gap: 13px; text-align: left; padding: 17px; background: #fff; border: 2px solid #b9d5c9; border-radius: 11px; }
.map-backup article>span { font-size: 1.8rem; }
.map-backup article div { display: grid; gap: 4px; }
.map-backup small { color: var(--muted); }
.transition-map,.map-principles { margin-top: 16px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.release-steps { display: flex; align-items: center; justify-content: center; gap: 8px; }
.release-steps article { flex: 1; display: grid; gap: 5px; justify-items: center; padding: 14px 8px; background: var(--soft); border: 2px solid transparent; border-radius: 10px; text-align: center; }
.release-steps article>b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #dfe8e3; }
.release-steps article.done { border-color: var(--green); }
.release-steps article.done>b { background: var(--green); color: #fff; }
.release-steps article.active { border-color: var(--teal); background: #eef9f6; }
.release-steps article.active>b { background: var(--teal); color: #fff; }
.release-steps small { color: var(--muted); font-size: .67rem; }
.release-steps>i { color: var(--muted); }
.map-legend { display: flex; justify-content: center; gap: 18px; margin-top: 16px; font-size: .75rem; color: var(--muted); }
.map-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; }
.done-dot { background: var(--green); }.active-dot { background: var(--teal); }.future-dot { background: #cbd6d1; }
.map-principles>div { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; }
.map-principles article { display: grid; gap: 7px; padding: 14px; background: var(--soft); border-radius: 9px; }
.map-principles span { color: var(--muted); font-size: .72rem; line-height: 1.5; }

@media (max-width: 900px) {
  .topbar>img { width: 82px; height: 50px; }
  .top-brand b { font-size: .96rem; }
  .top-search { margin-left: auto; width: min(300px, 40vw); }
  .home-tool-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .role-summary { grid-template-columns: repeat(2,1fr); }
  .publish-list>div { grid-template-columns: 1fr; gap: 7px; }
  .home-overview { grid-template-columns: 1fr; }
  .pattern-list>div { grid-template-columns: 1fr 1fr; }
  .stamp-layout { grid-template-columns: 1fr; }
  .manual-layout { grid-template-columns: 1fr; }
  .manual-index { position: static; grid-template-columns: repeat(4,1fr); }
  .map-users { grid-template-columns: repeat(2,1fr); }
  .map-principles>div { grid-template-columns: repeat(2,1fr); }
  .release-steps { overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; }
  .release-steps article { min-width: 145px; }
}

@media (max-width: 560px) {
  .topbar>img { display: block; width: 58px; }
  .top-brand { display: none; }
  .top-search { margin-left: 0; width: auto; flex: 1; padding: 8px 10px; }
  .top-actions .install { display: none; }
  .top-actions { gap: 4px; }
  .top-actions .account { display: none; }
  .panel-head,.filter-row { align-items: stretch; flex-direction: column; }
  .panel-head>button { width: 100%; }
  .role-summary { grid-template-columns: 1fr; }
  .notice-list article { grid-template-columns: 1fr; gap: 7px; }
  .sample-pill { display: none; }
  .form-section-title { align-items: stretch; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label.wide { grid-column: auto; }
  .pattern-list>div { grid-template-columns: 1fr; }
  .manual-index { grid-template-columns: 1fr 1fr; }
  .manual-flow { grid-template-columns: 1fr; text-align: center; }
  .backup-diagram,.map-backup { flex-direction: column; }
  .map-users,.map-modules,.map-foundation,.map-principles>div { grid-template-columns: 1fr; }
  .map-backup article { min-width: 0; width: 100%; }
  .system-map { padding: 14px; }
}

.admin-summary { display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:12px 14px; border-radius:12px; background:#f2f8f4; }
.admin-summary b { display:flex; align-items:baseline; gap:5px; color:#2f6e56; font-size:22px; }
.admin-summary small { font-size:12px; font-weight:700; }
.admin-summary span { margin-left:auto; color:#697d76; font-size:13px; }
.empty-office { margin:14px 0 4px 44px; padding:14px; border:1px dashed #cbdad4; border-radius:10px; color:#70827c; }
.admin-help { margin:0; padding:12px 14px; border-radius:10px; background:#f2f7ee; color:#52665f; font-size:13px; }
.account-table td:first-child b,.account-table td:first-child small,.account-table td:nth-child(5) small { display:block; }
.account-table td small { margin-top:4px; color:#6b7e78; }
@media (max-width:620px){.admin-summary{align-items:flex-start;flex-wrap:wrap}.admin-summary span{width:100%;margin-left:0}.empty-office{margin-left:0}}
[data-role="staff"] #settingsButton{display:none!important}
/* 本部管理：操作履歴 */
.admin-history-panel{margin-top:18px}
.history-count{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:8px 14px;border-radius:999px;background:#eef8e7;color:#426d00;font-weight:800}
.admin-history-panel .data-table td:first-child{white-space:nowrap}
.empty-history{margin:18px 0 0;padding:18px;border:1px dashed #cbd9cf;border-radius:14px;background:#f8fbf8;color:#607067}
.account-issue-modal{width:min(860px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto}
.admin-form-grid label small{font-weight:500;line-height:1.5;color:#6c7d76}
.tool-permission-fieldset{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}
.tool-permission-fieldset label{min-height:62px;padding:10px 12px;border:1px solid #d7e4de;border-radius:12px;background:#fbfdfb}
.tool-permission-fieldset label:has(input:checked){border-color:#8dbb36;background:#f3fae8}
.tool-permission-fieldset label span{display:flex;flex-direction:column;gap:2px}
.tool-permission-fieldset label b{color:#183c32}
.tool-permission-fieldset label small{font-size:12px;color:#6a7b74}
.account-review{padding:18px;border:2px solid #95c11f;border-radius:14px;background:#f7fce9}
.account-review[hidden]{display:none}
.account-review h3{margin:0 0 12px;color:#203b32}
.account-review dl{display:grid;gap:8px;margin:0 0 14px}
.account-review dl div{display:grid;grid-template-columns:110px 1fr;gap:10px;padding-bottom:8px;border-bottom:1px solid #dfe8ce}
.account-review dt{font-weight:800;color:#53645d}.account-review dd{margin:0;overflow-wrap:anywhere;color:#1b3a31}
@media(max-width:760px){.admin-history-panel .data-table{min-width:680px}.history-count{min-width:auto}}
@media(max-width:620px){.tool-permission-fieldset{grid-template-columns:1fr}.account-review dl div{grid-template-columns:1fr;gap:2px}}
.settings-group-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:26px 0 10px}.settings-group-title b{font-size:1.1rem}.settings-group-title span{color:var(--muted);font-size:.88rem}.button-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid #b8cdbf;background:#fff;color:var(--green);border-radius:8px;padding:8px 12px;font-weight:900}
.settings-progress{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,2fr) auto;align-items:center;gap:16px;margin:18px 0 8px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:13px}.settings-progress>div:first-child{display:flex;flex-direction:column;gap:3px}.settings-progress span{color:var(--muted);font-size:.82rem}.settings-progress>div:nth-child(2){height:10px;overflow:hidden;background:#e7eee9;border-radius:999px}.settings-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#a4d300);border-radius:inherit}.settings-progress strong{color:var(--green);font-size:1.1rem}.master-reference{display:flex;flex-direction:column;gap:5px;margin:0 0 18px;padding:14px 16px;border-left:4px solid var(--green);background:#eef7f3;border-radius:8px}.master-reference span{color:var(--muted);font-size:.86rem;line-height:1.6}
@media(max-width:720px){.settings-progress{grid-template-columns:1fr auto}.settings-progress>div:nth-child(2){grid-column:1/-1;grid-row:2}.master-reference{padding:12px}}