.atlas-tools-main { max-width: 1400px; min-height: calc(100vh - 177px); padding-bottom: 42px; }
.atlas-tools-intro { align-items: center; border-bottom: 1px solid #d8e1e4; display: flex; justify-content: space-between; min-height: 142px; }
.atlas-tools-intro span { color: var(--atlas-blue); display: block; font-size: 10px; font-weight: 850; letter-spacing: .15em; }
.atlas-tools-intro h1 { color: #102129; font-size: 34px; font-weight: 850; margin: 7px 0 0; }
.atlas-tools-status { align-items: center; background: #fff; border: 1px solid #d7e0e3; border-radius: 6px; display: flex; gap: 9px; min-height: 44px; padding: 0 14px; }
.atlas-tools-status i { color: var(--atlas-teal); }
.atlas-tools-status span { color: #53666e; font-size: 9px; }
.atlas-tools-workspace { align-items: start; display: grid; gap: 18px; grid-template-columns: 244px minmax(0,1fr); padding-top: 22px; }
.atlas-tools-nav, .atlas-tools-panels { background: #fff; border: 1px solid #d6e0e3; border-radius: 8px; box-shadow: 0 14px 36px rgba(24,53,63,.07); }
.atlas-tools-nav { display: grid; overflow: hidden; padding: 8px; }
.atlas-tools-nav button { align-items: center; background: transparent; border: 0; border-radius: 6px; color: #52656d; display: grid; font-size: 12px; font-weight: 750; gap: 10px; grid-template-columns: 28px 1fr; min-height: 48px; padding: 0 10px; text-align: left; }
.atlas-tools-nav button i { color: #839299; font-size: 14px; text-align: center; }
.atlas-tools-nav button:hover { background: #f3f6f7; color: #172b33; }
.atlas-tools-nav button.is-active { background: var(--atlas-blue-soft); color: #174f9d; }
.atlas-tools-nav button.is-active i { color: var(--atlas-blue); }
.atlas-tools-panels { min-height: 560px; overflow: hidden; }
.atlas-tool-panel { display: none; }
.atlas-tool-panel.is-active { display: block; }
.atlas-tool-panel > header { border-bottom: 1px solid #e4eaec; min-height: 82px; padding: 18px 22px; }
.atlas-tool-panel > header span { color: var(--atlas-blue); display: block; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.atlas-tool-panel > header h2 { color: #172a32; font-size: 21px; font-weight: 850; margin: 5px 0 0; }
.atlas-tool-form, .atlas-editor-grid, .atlas-password-controls, .atlas-password-result, .atlas-qr-layout { padding: 22px; }
.atlas-tool-panel label { color: #43565e; display: grid; font-size: 11px; font-weight: 750; gap: 8px; }
.atlas-tool-panel input[type="text"], .atlas-tool-panel textarea { background: #fbfcfc; border: 1px solid #cfdadd; border-radius: 6px; color: #172a32; font: 13px/1.65 "Cascadia Code", Consolas, monospace; outline: 0; padding: 11px 12px; width: 100%; }
.atlas-tool-panel input[type="text"]:focus, .atlas-tool-panel textarea:focus { border-color: #7ba4dc; box-shadow: 0 0 0 3px rgba(36,103,212,.1); }
.atlas-tool-panel textarea { min-height: 270px; resize: vertical; }
.atlas-editor-grid { display: grid; gap: 14px; grid-template-columns: repeat(2,minmax(0,1fr)); padding-bottom: 12px; }
.atlas-tool-actions { align-items: center; border-top: 1px solid #e8edef; display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px; }
.atlas-tool-actions button, #atlas-password-generate, #atlas-qr-generate, .atlas-password-result button { background: #fff; border: 1px solid #cad6da; border-radius: 6px; color: #31474f; font-size: 11px; font-weight: 750; min-height: 38px; padding: 0 12px; }
.atlas-tool-actions button:hover, #atlas-password-generate:hover, #atlas-qr-generate:hover, .atlas-password-result button:hover { border-color: var(--atlas-blue); color: var(--atlas-blue); }
.atlas-action-status { color: #6d7d83; font-size: 11px; margin-left: auto; }
.atlas-totp-result { align-items: center; background: var(--atlas-night); border-radius: 8px; color: #fff; display: flex; justify-content: space-between; margin-top: 18px; min-height: 116px; padding: 20px 24px; }
.atlas-totp-result strong { font: 850 44px/1 "Cascadia Code", Consolas, monospace; letter-spacing: .12em; }
.atlas-totp-result span { color: #a9bec3; font-size: 11px; }
.atlas-totp-progress { background: #dce5e7; border-radius: 3px; height: 5px; margin-top: 12px; overflow: hidden; }
.atlas-totp-progress span { background: var(--atlas-gold); display: block; height: 100%; transition: width .2s linear; width: 0; }
.atlas-password-controls { align-items: center; display: grid; gap: 16px; grid-template-columns: minmax(260px,1fr) repeat(4,auto); }
.atlas-password-controls label:first-child { gap: 8px; grid-template-columns: auto 34px minmax(120px,1fr); }
.atlas-password-controls label:not(:first-child) { align-items: center; display: flex; white-space: nowrap; }
.atlas-password-result { border-top: 1px solid #e8edef; display: grid; gap: 9px; grid-template-columns: minmax(0,1fr) auto auto; }
.atlas-qr-layout { display: grid; gap: 28px; grid-template-columns: minmax(0,1fr) 260px; }
.atlas-qr-layout textarea { min-height: 180px; }
#atlas-qr-generate { background: var(--atlas-night); color: #fff; margin-top: 12px; min-width: 112px; }
.atlas-qr-output { align-items: center; background: #f5f8f8; border: 1px dashed #bac8cc; border-radius: 8px; display: flex; height: 240px; justify-content: center; width: 240px; }
.atlas-qr-output > i { color: #9babad; font-size: 55px; }
.atlas-qr-output canvas { max-height: 220px; max-width: 220px; }
@media (max-width: 900px) { .atlas-tools-workspace { grid-template-columns: 1fr; }.atlas-tools-nav { display: flex; overflow-x: auto; }.atlas-tools-nav button { flex: 0 0 auto; min-width: 130px; }.atlas-password-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }.atlas-password-controls label:first-child { grid-column: 1 / -1; } }
@media (max-width: 767px) { .atlas-tools-main { padding-left: 12px; padding-right: 12px; }.atlas-tools-intro { min-height: 112px; }.atlas-tools-intro h1 { font-size: 27px; }.atlas-tools-status { display: none; }.atlas-tools-workspace { padding-top: 14px; }.atlas-editor-grid { grid-template-columns: 1fr; }.atlas-tool-panel textarea { min-height: 210px; }.atlas-totp-result { display: grid; gap: 9px; justify-content: center; text-align: center; }.atlas-totp-result strong { font-size: 36px; }.atlas-password-controls { grid-template-columns: 1fr; }.atlas-password-controls label:first-child { grid-column: auto; }.atlas-password-result { grid-template-columns: 1fr 1fr; }.atlas-password-result input { grid-column: 1 / -1; }.atlas-qr-layout { grid-template-columns: 1fr; }.atlas-qr-output { margin: 0 auto; }.atlas-tool-panel > header, .atlas-tool-form, .atlas-editor-grid, .atlas-password-controls, .atlas-password-result, .atlas-qr-layout, .atlas-tool-actions { padding-left: 15px; padding-right: 15px; } }

.atlas-tools-main { max-width: 1480px; }
.atlas-tools-intro span,.atlas-tool-panel > header span { letter-spacing: 0; }
.atlas-tools-intro h1 { font-size: 36px; }
.atlas-tools-status span { font-size: 12px; }
.atlas-tools-nav button { font-size: 13px; }
.atlas-tool-panel > header h2 { font-size: 23px; }
.atlas-tool-panel label { font-size: 13px; }
.atlas-tool-panel input[type="text"],.atlas-tool-panel textarea { font-size: 14px; }
.atlas-tool-actions button,#atlas-password-generate,#atlas-qr-generate,.atlas-password-result button { font-size: 12px; }
.atlas-action-status,.atlas-totp-result span { font-size: 12px; }
.atlas-totp-result strong { letter-spacing: 0; }
@media (max-width: 767px) { .atlas-tools-intro h1 { font-size: 30px; }.atlas-tools-nav button { font-size: 13px; } }