:root { font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif; color:#24344b; background:#f6f8fc; font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; --navy:#172b4d; --ink:#1e2f4c; --muted:#8290a5; --blue:#4268d8; --blue2:#3458c9; --line:#e7eaf2; --surface:#fff; --bg:#f6f8fc; }
* { box-sizing:border-box; }
html,body,#app { margin:0; min-height:100%; }
body { overflow-x:hidden; }
button,input,select,textarea { font:inherit; }
button { color:inherit; cursor:pointer; transition:background .17s,transform .17s,box-shadow .17s; }
button:hover { transform:translateY(-1px); }
button:disabled { opacity:.55; cursor:not-allowed; transform:none; }
input,select { color:#273754; }
input:focus,select:focus,button:focus-visible,[contenteditable]:focus { outline:2px solid #a8b8f7; outline-offset:2px; }
a { color:var(--blue); }
.icon { flex-shrink:0; vertical-align:middle; }
.app-layout { display:flex; min-height:100vh; }
.sidebar { position:fixed; left:0; top:0; bottom:0; width:254px; padding:30px 19px 20px; background:#fff; border-right:1px solid #edf0f5; display:flex; flex-direction:column; z-index:10; box-shadow:5px 0 35px rgba(14,35,68,.02); }
.brand { display:flex; align-items:center; gap:11px; padding:2px 7px; white-space:nowrap; }
.brand-mark { color:white; width:42px; height:42px; background:linear-gradient(145deg,#376bd4,#1a3b83); display:flex; align-items:center; justify-content:center; border-radius:13px; box-shadow:0 7px 15px rgba(36,83,171,.2); }
.brand-copy { display:flex; flex-direction:column; gap:1px; }
.brand-copy b { font:800 16px 'DM Sans',sans-serif; letter-spacing:.2px; color:#192b48; }
.brand-copy span { font-size:10px; color:#9ba6b6; font-weight:700; letter-spacing:.4px; }
.nav-section-label { font-size:10px; font-weight:900; letter-spacing:1.6px; color:#abb4c2; padding:0 14px; margin-top:43px; margin-bottom:12px; }
.sidebar-nav { display:flex; flex-direction:column; gap:6px; }
.nav-link,.category-nav-link { border:0; background:transparent; width:100%; text-align:left; display:flex; align-items:center; gap:12px; padding:12px 13px; font-size:13px; font-weight:700; color:#64738a; border-radius:10px; }
.nav-link:hover,.category-nav-link:hover { background:#f4f7fd; }
.nav-link.selected { background:#ecf1ff; color:#315bc5; }
.nav-link.selected .icon { stroke:#3760d2; }
.nav-link em,.category-nav-link em { font-style:normal; font-size:11px; color:#aab5c4; margin-left:auto; font-weight:800; }
.nav-divider { height:1px; background:#edf0f5; margin:24px 9px 0; }
.nav-label-with-action { display:flex; align-items:center; justify-content:space-between; margin-top:25px; padding-right:9px; }
.round-mini { display:flex; align-items:center; justify-content:center; border:0; background:#edf2ff; color:#3f66c7; width:26px; height:26px; border-radius:8px; }
.category-nav-link { padding:9px 14px; font-size:12px; gap:11px; }
.category-nav-link.active { background:#f0f4ff; color:#315bc5; }
.cat-indicator { width:8px; height:8px; border:2px solid #8da8e6; border-radius:3px; transform:rotate(45deg); }
.nav-hint { color:#9ba5b3; font-size:12px; padding:12px; }
.sidebar-footer { margin-top:auto; }
.footer-mini-card { display:flex; gap:9px; background:#f5f8ff; border-radius:12px; padding:12px 10px; align-items:flex-start; }
.footer-mini-ico { color:#6887dc; }
.footer-mini-card strong,.footer-mini-card span { display:block; }
.footer-mini-card strong { font-size:10.5px; }
.footer-mini-card span { color:#95a3b9; font-size:9.5px; margin-top:3px; line-height:1.5; }
.profile { margin-top:18px; display:flex; align-items:center; width:100%; padding:10px 2px; background:none; border:0; gap:9px; text-align:left; }
.avatar,.top-avatar { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#e4e9f8; color:#4667ad; font-weight:900; }
.profile-text { min-width:0; flex:1; }
.profile-text strong,.profile-text small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-text strong { font-size:11px; color:#344360; }
.profile-text small { font-size:9.5px; color:#a0acbd; margin-top:2px; }
.profile>.icon { color:#9babbd; }
.main-content { flex:1; min-width:0; margin-left:254px; }
.topbar { height:77px; background:#fff; border-bottom:1px solid #e8edf4; display:flex; align-items:center; justify-content:space-between; padding:0 44px; }
.topbar-left,.topbar-right { display:flex; align-items:center; gap:22px; }
.topbar-left>div { display:flex; flex-direction:column; }
.topbar-overline { font-size:9px; color:#9fadc0; font-weight:900; letter-spacing:1.6px; }
.topbar-left strong { font-size:15px; margin-top:3px; }
.topbar-right { gap:15px; }
.today-date { font-size:12px; color:#9cabbc; font-weight:700; }
.icon-button,.small-icon,.text-icon-button { border:0; background:transparent; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; color:#8b9aaf; }
.icon-button { width:36px; height:36px; }
.icon-button:hover,.small-icon:hover,.text-icon-button:hover { background:#f0f3f8; }
.top-avatar { width:34px; height:34px; }
.mobile-menu { display:none; }
.content-container { max-width:1390px; padding:32px 44px 20px; margin:auto; }
.hero { min-height:226px; background:linear-gradient(108deg,#1c335a 0%,#203c6b 53%,#2e5694 100%); border-radius:17px; display:flex; justify-content:space-between; overflow:hidden; position:relative; box-shadow:0 14px 25px rgba(31,56,106,.09); }
.hero:after { content:''; position:absolute; width:500px; height:500px; border-radius:50%; border:1px solid rgba(255,255,255,.055); right:-180px; top:-240px; box-shadow:0 0 0 88px rgba(255,255,255,.018),0 0 0 170px rgba(255,255,255,.018); }
.hero-copy { padding:31px 38px 30px; position:relative; z-index:1; }
.hero-kicker { color:#a2c4ff; letter-spacing:1.6px; font-size:9px; font-weight:900; }
.sparkle { color:#e2c785; padding-right:4px; font-size:15px; }
.hero h1 { color:white; font-size:27px; line-height:1.5; margin:8px 0 9px; letter-spacing:-1.1px; }
.hero h1 span { color:#c5d6ff; }
.hero p { margin:0; color:#b9c9e6; font-size:11.5px; line-height:1.7; font-weight:600; }
.hero-button { display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:10px 17px; background:#fff; border:0; border-radius:8px; color:#25497d; font-weight:900; font-size:11px; }
.hero-button:hover { background:#f1f5ff; }
.hero-art { width:36%; position:relative; min-width:230px; }
.hero-paper { position:absolute; width:167px; height:176px; border-radius:13px; background:#fff; top:54px; left:30px; transform:rotate(-12deg); box-shadow:0 15px 24px rgba(4,19,57,.16); padding:23px; }
.hero-paper-back { left:105px; top:37px; transform:rotate(15deg); opacity:.58; background:#d6e3ff; }
.hero-paper>span { display:block; height:8px; background:#e8eef7; border-radius:7px; margin-top:11px; }
.hero-paper>span:nth-child(3) { width:75%; }
.hero-paper>span:nth-child(4) { width:89%; }
.hero-note-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; color:#4c6fd5; background:#e7eeff; }
.hero-paper i { position:absolute; right:-15px; top:45px; color:#f8c75f; background:#fff; border-radius:50%; width:33px; height:33px; display:flex; justify-content:center; align-items:center; box-shadow:0 4px 13px #13315c24; }
.hero-dot { width:8px; height:8px; background:#9baeff; position:absolute; border-radius:50%; }
.dot-a { left:48px; top:30px; }.dot-b { left:260px; top:168px; }
.stats-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:22px; }
.stat { display:flex; align-items:center; gap:15px; min-height:83px; padding:17px 21px; border:1px solid #e9edf5; background:white; border-radius:13px; box-shadow:0 4px 14px rgba(32,56,92,.02); }
.stat-icon { display:flex; width:43px; height:43px; align-items:center; justify-content:center; border-radius:12px; }
.stat-icon.blue { color:#5478d8; background:#eef3ff; }.stat-icon.amber { color:#d49d40; background:#fff7e6; }.stat-icon.mint { color:#35a19a; background:#eaf9f6; }
.stat strong { display:block; font-size:22px; line-height:1.15; color:#213650; font-weight:900; }
.stat span:not(.stat-icon) { font-size:11px; color:#94a3b5; margin-top:3px; display:block; }
.library-section { padding:28px 0; }
.section-heading,.section-heading>.heading-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-heading h2 { font-size:20px; margin:5px 0 4px; color:#253551; letter-spacing:-.65px; }
.section-heading p { margin:0; font-size:11.5px; color:#95a2b4; }
.section-eyebrow { font-size:10px; letter-spacing:1.4px; font-weight:900; color:#7492c4; }
.btn { border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 15px; border-radius:9px; font-size:12px; font-weight:800; white-space:nowrap; }
.btn.primary { background:#456bda; color:white; border-color:#456bda; box-shadow:0 4px 10px #4268d822; }.btn.primary:hover { background:#3156c0; }
.btn.subtle { background:#fff; color:#66768d; border-color:#e3e8f2; }.btn.subtle:hover { background:#f4f7fb; }
.btn.danger { color:#d14c5e; background:#fff2f3; border-color:#ffc9cf; }
.filter-area { margin-top:22px; border:1px solid #e8edf5; border-radius:13px; background:white; padding:17px 18px 14px; }
.search-input-wrap { display:flex; align-items:center; gap:11px; background:#f8f9fc; border:1px solid #e9ecf3; border-radius:9px; padding:0 14px; height:45px; color:#8b9ab0; }
.search-input-wrap:focus-within { border-color:#9bb1e9; box-shadow:0 0 0 3px #dde7ff88; }
.search-input-wrap input { flex:1; outline:0; border:0; background:none; height:100%; font-size:12px; min-width:0; }
.search-input-wrap input::placeholder { color:#a1adbd; }
.search-input-wrap kbd { font-size:15px; border:1px solid #dfe5f0; color:#9da9b8; width:25px; height:25px; border-radius:5px; text-align:center; line-height:23px; }
.category-filter { display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.filter-chip { background:#fff; color:#8592a5; border:1px solid #e5e9f1; border-radius:7px; font-size:11px; font-weight:800; padding:7px 12px; }
.filter-chip.chosen { color:#3d60c6; background:#ecf1ff; border-color:#d6e1ff; }
.list-meta { display:flex; align-items:center; justify-content:space-between; padding:20px 1px 12px; color:#9aa8b9; font-size:11px; }
.list-meta b { color:#4668ca; }
.cards-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.tip-card { background:white; border:1px solid #e8edf4; border-radius:13px; min-height:185px; padding:20px 18px 17px; display:flex; flex-direction:column; cursor:pointer; transition:transform .2s, box-shadow .2s,border-color .2s; }
.tip-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(32,54,86,.08); border-color:#d7e1f6; }
.card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:5px; min-width:0; }
.pill-cat { display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px; color:#7085ad; font-size:10px; padding:5px 7px; border-radius:5px; background:#f0f4fc; font-weight:800; min-width:0; }
.slash { color:#b8c4d5; padding:0 1px; }.small-icon { width:27px; height:27px; flex-shrink:0; }.favorite-toggle.is-fav svg { fill:#ffc85b; stroke:#e6aa37; }.danger-hover:hover { color:#d35464; }
.tip-card h3 { font-size:14px; margin:13px 0 7px; color:#283b54; line-height:1.5; letter-spacing:-.25px; overflow-wrap:anywhere; }
.card-excerpt { color:#91a0b2; font-size:11px; line-height:1.7; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-bottom { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:700; color:#a1afbf; }
.card-bottom>span,.card-bottom>div,.mini-info { display:flex; align-items:center; gap:6px; }.card-bottom>div { gap:13px; }.mini-info { color:#91a0b5; }.muted { color:#b0bac9; }
.empty-state { background:white; min-height:275px; padding:42px 20px; text-align:center; border:1px dashed #dfe6f1; border-radius:13px; display:flex; flex-direction:column; align-items:center; }
.empty-icon { width:58px; height:58px; border-radius:15px; display:flex; align-items:center; justify-content:center; color:#7992d4; background:#f0f4ff; }
.empty-state h3 { font-size:15px; color:#334562; margin:16px 0 3px; }.empty-state p { font-size:11px; line-height:1.8; color:#9aa7b8; margin:0 0 16px; }
.main-footer { border-top:1px solid #e6eaf0; margin-top:15px; padding:18px 0; font-size:10px; font-weight:800; color:#afbac9; }.main-footer span { color:#c7cfda; padding:0 5px; }
.mobile-tabs,.mobile-scrim { display:none; }
.demo-banner { padding:11px 16px; margin-bottom:18px; border:1px solid #f2dc98; color:#8f6d1b; background:#fff9e8; display:flex; align-items:center; flex-wrap:wrap; gap:8px; border-radius:10px; font-size:12px; }
.demo-banner button { background:none; border:0; color:#ad7a1d; font-size:12px; font-weight:900; text-decoration:underline; padding:0; }
/* Modal shells */
.modal-backdrop { position:fixed; inset:0; z-index:50; background:rgba(24,39,66,.55); padding:30px; display:flex; justify-content:center; align-items:center; backdrop-filter:blur(3px); }
.dialog { width:min(700px,100%); max-height:min(92vh,900px); display:flex; flex-direction:column; overflow:hidden; border-radius:17px; background:white; box-shadow:0 32px 100px #101d383b; position:relative; }
.dialog-header { display:flex; align-items:flex-start; justify-content:space-between; padding:27px 30px 19px; border-bottom:1px solid #eef0f5; }
.dialog-header h2 { font-size:23px; margin:5px 0 4px; }.dialog-header p { color:#94a2b5; font-size:12px; margin:0; }
.categories-dialog { width:min(670px,100%); }.cat-manager-body { overflow:auto; flex:1; padding:18px 30px 6px; }
.cat-group { margin-bottom:13px; border:1px solid #e9edf5; border-radius:10px; overflow:hidden; }
.cat-group-head { display:flex; justify-content:space-between; align-items:center; background:#f5f8fe; padding:12px 16px; }
.category-name,.inline-actions { display:flex; gap:8px; align-items:center; }.category-name { color:#516d9c; }.category-name b { font-size:12px; color:#334966; }.category-name small { margin-left:6px; font-size:10px; color:#9caabc; }
.text-icon-button { width:29px; height:29px; }.text-icon-button.delete:hover { color:#cf4a58; background:#fff0f3; }
.sub-list { padding:6px 14px 12px; }.sub-row { display:flex; justify-content:space-between; align-items:center; padding:4px 3px 4px 15px; font-size:12px; color:#607189; }.sub-row>span { display:flex; align-items:center; gap:7px; }.sub-row .icon { color:#a6b3c5; }
.add-sub-form { display:flex; gap:8px; margin:8px 2px 0; }.add-sub-form input,.add-category-form input { border:1px solid #e1e7f1; border-radius:7px; background:#fff; padding:10px 11px; min-width:0; font-size:12px; flex:1; }.add-sub-form button { display:flex; align-items:center; gap:4px; white-space:nowrap; border:1px solid #dfe7f4; color:#5f7bba; background:#f7f9fe; border-radius:7px; padding:7px 12px; font-size:11px; font-weight:800; }
.add-category-form { display:flex; gap:10px; padding:15px 30px; border-top:1px solid #ecf0f5; }
.dialog-note { color:#a0a9b8; font-size:10.5px; padding:0 30px 21px; display:flex; align-items:center; gap:5px; }.cat-empty { text-align:center; padding:25px; color:#8da3c6; font-size:11px; }
/* Tip detail */
.detail-dialog { width:min(830px,100%); max-height:min(93vh,980px); }
.detail-toolbar { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #edf0f5; min-height:67px; padding:11px 25px; gap:9px; }
.detail-top-actions { display:flex; align-items:center; gap:7px; }.btn-back { background:none; border:0; padding-left:0; color:#8594a8; }
.detail-scroll { overflow:auto; padding:26px 36px 32px; }
.detail-category { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:#5980be; font-weight:800; font-size:11px; }
.detail-category>span { display:inline-flex; gap:4px; align-items:center; }
.detail-title { font-size:27px; color:#1e2e49; line-height:1.4; margin:14px 0 10px; overflow-wrap:anywhere; }
.detail-metadata { font-size:11px; color:#98a6b8; display:flex; align-items:center; gap:7px; }.detail-divider { height:1px; margin:25px 0; background:#edf1f6; }
.rich-content { font-size:13px; color:#3b4e69; line-height:1.9; overflow-wrap:anywhere; }
.rich-content p { margin:0 0 13px; }.rich-content h1,.rich-content h2,.rich-content h3 { line-height:1.45; color:#263b59; }.rich-content h2 { font-size:19px; margin:19px 0 11px; }.rich-content h3 { font-size:16px; }.rich-content ul,.rich-content ol { padding-left:24px; }.rich-content li { margin-bottom:6px; }.rich-content blockquote { margin:10px 0; background:#f4f7fe; border-left:3px solid #7295d8; padding:10px 14px; color:#5b7296; }.rich-content img { max-width:100%; height:auto; border-radius:8px; box-shadow:0 3px 8px #09172a19; margin:7px 0; }
.rich-content table { border-collapse:collapse; margin:14px 0; width:100%; max-width:100%; }.rich-content td,.rich-content th { border:1px solid #dce4f0; padding:8px; text-align:left; font-size:12px; }.rich-content th { background:#eef3fc; }
.rich-content a { color:#426bda; overflow-wrap:anywhere; }.muted-small { color:#9eabba; font-size:12px; }
.detail-extra { margin-top:26px; padding-top:20px; border-top:1px solid #edf1f6; }.detail-extra h3 { margin:0 0 12px; display:flex; align-items:center; gap:8px; color:#3f536f; font-size:14px; }.extra-count { font-size:10px; background:#eef3ff; padding:2px 7px; color:#5c76b5; border-radius:9px; }
.related-links,.attachment-list { display:flex; flex-direction:column; gap:8px; }
.link-item,.attachment-item { display:flex; align-items:center; padding:11px 13px; gap:10px; background:#fafbfe; border:1px solid #e9edf4; border-radius:9px; text-decoration:none; width:100%; text-align:left; font-size:12px; color:#4d6596; }
.link-item>span:nth-child(2) { flex:1; overflow-wrap:anywhere; }.link-item-icon,.attachment-icon { background:#edf3fc; color:#6984ba; border-radius:7px; display:flex; align-items:center; justify-content:center; width:35px; height:35px; flex-shrink:0; }
.attachment-item .file-copy { min-width:0; flex:1; }.attachment-item b,.attachment-item small { display:block; }.attachment-item b { font-size:12px; color:#40516b; overflow-wrap:anywhere; }.attachment-item small { font-size:10px; color:#a2acbb; padding-top:3px; }
.detail-bottom { margin-top:26px; }.delete-tip-button { display:flex; align-items:center; gap:7px; color:#c76a73; font-size:11px; border:0; background:none; padding:7px 0; font-weight:800; }
.history-shade { position:absolute; inset:0; display:flex; justify-content:flex-end; background:#0f1d304d; z-index:2; }.history-panel { background:white; width:min(390px,100%); height:100%; box-shadow:-10px 0 30px #0f1d3020; display:flex; flex-direction:column; }.history-head { padding:25px 23px; border-bottom:1px solid #e9eef4; display:flex; justify-content:space-between; }.history-head h3 { font-size:21px; margin:7px 0 3px; }.history-head p { font-size:11px; color:#9cabbc; margin:0; }.history-body { overflow:auto; padding:19px; flex:1; }.revision-card { border:1px solid #e7edf6; border-radius:10px; padding:15px; margin-bottom:12px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }.revision-kicker { font-size:10px; color:#5375bd; font-weight:800; }.revision-card strong { font-size:13px; color:#334562; }.revision-card p { font-size:11px; color:#8b9aad; margin:0; }.revision-card small { color:#acb7c4; font-size:10px; margin:2px 0 5px; }.history-empty { color:#a4b0c1; font-size:12px; text-align:center; margin:90px auto; line-height:1.8; }
/* Rich tip editor */
.editor-backdrop { padding:14px; }.editor-dialog { width:min(1180px,100%); height:min(96vh,1100px); max-height:none; }.editor-topbar { padding:18px 27px; background:white; border-bottom:1px solid #e8edf5; display:flex; align-items:center; justify-content:space-between; gap:10px; }.editor-topbar h2 { font-size:19px; margin:4px 0 0; }.editor-actions { display:flex; gap:8px; }.editor-scroll { padding:24px 27px 40px; overflow:auto; flex:1; }.editor-layout { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:24px; }.editor-main { min-width:0; }
.field-label { display:flex; flex-direction:column; gap:7px; font-weight:900; font-size:12px; color:#405372; margin-bottom:18px; }.field-label em,.editor-label-row em { color:#e66868; font-style:normal; }.field-label input,.field-label select { width:100%; min-width:0; border:1px solid #dfe6ef; background:#fff; padding:12px; border-radius:8px; font-size:12px; font-weight:600; outline:0; }.field-label input::placeholder { color:#afbbca; }.field-label input:focus,.field-label select:focus { border-color:#94aae4; box-shadow:0 0 0 3px #eaf0ff; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.editor-label-row { display:flex; gap:5px; align-items:center; color:#405372; font-size:12px; font-weight:900; margin:2px 0 9px; }.editor-label-row span { margin-left:auto; font-size:10px; color:#a2aebf; font-weight:500; }
.text-editor { border:1px solid #dfe6f0; border-radius:9px; overflow:hidden; }.editor-toolbar { background:#f9fbfe; display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:7px; border-bottom:1px solid #e9eef5; }.editor-toolbar button { min-width:30px; height:29px; padding:3px 7px; border:0; border-radius:6px; background:transparent; font-size:11px; font-weight:800; color:#596d88; }.editor-toolbar button:hover { color:#2f5aba; background:#e8efff; }.tool-separator { width:1px; height:19px; background:#dee5f0; margin:0 5px; }.toolbar-color { display:flex; align-items:center; gap:3px; font-size:15px; font-weight:900; color:#5772a8; padding:3px 7px; }.toolbar-color input { width:23px; height:23px; padding:0; border:0; cursor:pointer; background:none; }
.edit-content { min-height:270px; padding:16px; outline:0; font-size:13px; color:#334963; line-height:1.85; background:#fff; }.edit-content:empty:before { content:attr(data-placeholder); white-space:pre-line; color:#b0bbca; pointer-events:none; }.edit-content:focus { outline:0; }.edit-content img { cursor:default; }
.editor-section { margin-top:24px; padding-top:18px; border-top:1px solid #ebeff4; }.editor-section-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }.editor-section-header h3 { margin:0; display:flex; gap:7px; align-items:center; font-size:13px; color:#405572; }.editor-section-header p { margin:5px 0 0; color:#a0acba; font-size:11px; }
.editor-link-row { display:flex; gap:7px; align-items:center; margin:11px 0; }.editor-link-row input { border:1px solid #dfe6ef; border-radius:7px; padding:10px; font-size:11px; flex:1; width:10px; }.editor-link-row input:nth-child(2) { flex:1.5; }
.editor-files { margin-top:12px; }.editor-file-row { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #e6edf6; background:#fafbff; border-radius:9px; margin-bottom:7px; }.editor-file-row>span:nth-child(2) { flex:1; min-width:0; }.editor-file-row b,.editor-file-row small { display:block; font-size:11px; overflow-wrap:anywhere; }.editor-file-row small { font-size:10px; color:#9eaabb; }.editor-subhint { color:#a9b5c3; font-size:11px; padding:5px 0; }
.editor-help { align-self:start; }.help-card { background:#f2f6ff; border:1px solid #e3ebfc; border-radius:11px; padding:20px; }.help-icon { background:#e0eaff; color:#5275c7; display:flex; align-items:center; justify-content:center; width:39px; height:39px; border-radius:11px; }.help-card h3 { font-size:14px; margin:18px 0 8px; }.help-card p,.help-card li { color:#8497b6; font-size:11px; line-height:1.75; }.help-card ul { padding-left:17px; margin-bottom:0; }.help-mini { font-size:10px; color:#8e9cb0; padding:15px 3px; display:flex; gap:7px; line-height:1.6; }
/* Login */
.login-page { min-height:100vh; display:grid; grid-template-columns:48% 52%; background:#fff; }.login-left { position:relative; padding:37px 50px; background:linear-gradient(145deg,#183057,#203c69); min-height:680px; overflow:hidden; display:flex; flex-direction:column; }.login-brand .brand-copy b { color:white; }.login-brand .brand-copy span { color:#adbfdf; }.login-brand .brand-mark { background:#ffffff21; border:1px solid #ffffff39; box-shadow:none; }
.login-graphic { position:relative; flex:1; display:flex; align-items:center; justify-content:center; }.graphic-circle { position:absolute; border:1px solid #ffffff17; border-radius:50%; width:510px; height:510px; }.circle-two { width:350px; height:350px; }.login-book { position:relative; width:350px; padding:30px; background:white; box-shadow:20px 30px 55px #081b37aa; transform:rotate(-5deg); border-radius:14px; }.login-book-top { display:flex; justify-content:space-between; color:#6986ba; font-size:10px; font-weight:900; letter-spacing:1px; }.login-book h2 { font-size:25px; color:#274165; line-height:1.5; margin:30px 0 25px; }.fake-line { width:90%; height:10px; background:#edf1f8; margin-top:9px; border-radius:9px; }.fake-line.shorter { width:64%; }.fake-card { background:#f0f5ff; border:1px solid #e7eefb; color:#4d70b3; display:flex; align-items:center; gap:10px; padding:15px; border-radius:9px; font-size:11px; margin-top:28px; }.login-bottom { text-align:center; letter-spacing:1.2px; font-size:10px; color:#7492c1; font-weight:900; }
.login-right { display:flex; align-items:center; justify-content:center; padding:48px 36px; }.login-panel { width:min(380px,100%); }.login-eyebrow { letter-spacing:1.5px; color:#5e7ecc; font-size:10px; font-weight:900; }.login-panel h1 { font-size:26px; letter-spacing:-1px; color:#243852; margin:13px 0 7px; }.login-panel>p { font-size:13px; color:#9dabbc; margin:0 0 30px; }.auth-switch { display:flex; gap:8px; background:#f3f6fb; padding:5px; border-radius:9px; margin-bottom:23px; }.auth-switch button { flex:1; border:0; border-radius:7px; padding:10px 5px; font-weight:800; font-size:12px; background:transparent; color:#92a2b5; }.auth-switch button.selected { background:white; box-shadow:0 2px 9px #24395b14; color:#365cc0; }
#auth-form label { display:flex; flex-direction:column; gap:8px; font-size:12px; color:#4f5e73; font-weight:800; margin-bottom:18px; }#auth-form input { padding:13px 12px; border:1px solid #dfe6f0; border-radius:8px; font-size:13px; width:100%; }.login-submit { width:100%; margin-top:5px; padding:13px; }.auth-separator { color:#aab4c1; font-size:10px; text-align:center; margin:23px 0 16px; position:relative; }.auth-separator:before { content:''; height:1px; background:#e9edf4; position:absolute; top:50%; width:100%; left:0; }.auth-separator span { position:relative; background:white; padding:0 13px; }.preview-button { width:100%; border:1px solid #e1e7f1; background:white; color:#71829d; padding:12px; justify-content:center; }.login-note { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:27px!important; font-size:11px!important; color:#9eafbd!important; }.login-note .icon { color:#70aa92; }
.loading-page { height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; }.loading-page .brand { margin-bottom:10px; }.loading-page>p { color:#8797ad; font-size:12px; }.loader { display:block; width:30px; height:30px; border-radius:50%; border:3px solid #e7edfa; border-top-color:#446dda; animation:spin .75s linear infinite; }@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:110; padding:12px 17px; border-radius:10px; background:#253e62; color:white; display:flex; align-items:center; gap:9px; box-shadow:0 11px 27px #152c4d45; max-width:calc(100vw - 30px); font-size:12px; font-weight:800; line-height:1.5; }.toast.error { background:#b54952; }
@media(max-width:1200px) { .cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.hero-art { width:29%; }.topbar { padding:0 30px; }.content-container { padding:25px 30px; } }
@media(max-width:900px) { .sidebar { transform:translateX(-100%); transition:transform .22s; z-index:80; }.sidebar.open { transform:translateX(0); }.mobile-scrim.visible { display:block; position:fixed; inset:0; z-index:70; background:#1c284b88; }.main-content { margin-left:0; }.mobile-menu { display:inline-flex; }.topbar { padding:0 22px; }.content-container { padding:20px 22px; }.hero-art { width:36%; }.editor-layout { grid-template-columns:1fr; }.editor-help { display:none; } }
@media(max-width:650px) { body { background:#f6f8fc; }.topbar { height:60px; padding:0 17px; }.topbar-left { gap:8px; }.topbar-left strong { font-size:13px; }.topbar-overline { font-size:8px; }.today-date { display:none; }.topbar-right { gap:5px; }.top-avatar { display:none; }.content-container { padding:15px 14px 90px; }.hero { min-height:192px; border-radius:12px; }.hero-copy { padding:23px 20px; }.hero-kicker { font-size:8px; }.hero h1 { font-size:21px; margin:8px 0; }.hero p { font-size:10px; }.desktop-only { display:none; }.hero-art { display:none; }.hero-button { margin-top:14px; font-size:10px; padding:9px 12px; }
 .stats-row { gap:8px; margin-top:13px; }.stat { padding:12px 7px; border-radius:10px; gap:6px; min-height:73px; flex-direction:column; align-items:center; text-align:center; }.stat-icon { width:27px; height:27px; border-radius:8px; }.stat-icon svg { width:16px; height:16px; }.stat strong { font-size:16px; }.stat span:not(.stat-icon) { font-size:9px; }.library-section { padding:23px 0; }.section-heading { align-items:flex-end; }.section-heading h2 { font-size:17px; }.section-heading p { font-size:10px; }.heading-actions .btn.subtle { display:none; }.heading-actions .btn { padding:9px 10px; font-size:10px; }.section-eyebrow { font-size:9px; }.filter-area { margin-top:17px; padding:12px; }.search-input-wrap { height:43px; }.search-input-wrap input { font-size:11px; }.search-input-wrap kbd { display:none; }.category-filter { flex-wrap:nowrap; overflow-x:auto; margin-right:-12px; padding-right:12px; scrollbar-width:none; }.category-filter::-webkit-scrollbar { display:none; }.filter-chip { flex:0 0 auto; }.list-meta { padding:15px 1px 10px; }.cards-grid { grid-template-columns:1fr; gap:10px; }.tip-card { min-height:164px; padding:15px 16px; }.tip-card h3 { font-size:13px; margin-top:10px; }.card-excerpt { font-size:10px; }.card-bottom { padding-top:10px; }.main-footer { text-align:center; margin-top:9px; }
 .mobile-tabs { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:20; background:white; border-top:1px solid #e6eaf0; padding:7px 7px calc(7px + env(safe-area-inset-bottom)); justify-content:space-around; box-shadow:0 -5px 20px #1527430d; }.mobile-tabs button { border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:3px; color:#9faab9; font-size:9px; font-weight:800; padding:4px 5px; min-width:46px; }.mobile-tabs button.current { color:#4068ce; }.mobile-tabs .center-tab { background:#426ada; border-radius:13px; color:white; width:43px; height:43px; transform:translateY(-9px); display:flex; align-items:center; justify-content:center; box-shadow:0 5px 14px #4168ce44; }
 .modal-backdrop { padding:0; align-items:flex-end; }.dialog { max-height:94dvh; border-radius:17px 17px 0 0; width:100%; }.dialog-header { padding:19px 18px 15px; }.dialog-header h2 { font-size:19px; }.dialog-header p { font-size:10px; }.cat-manager-body { padding:15px 13px 5px; }.add-category-form { padding:13px; }.dialog-note { padding:0 15px 18px; font-size:9px; }.add-category-form .btn { padding:10px; font-size:10px; }.add-sub-form button { padding:6px 9px; }.detail-dialog { height:94dvh; }.detail-toolbar { padding:9px 13px; gap:5px; flex-wrap:wrap; }.detail-top-actions { gap:3px; }.detail-top-actions .btn { font-size:10px; padding:8px; }.detail-scroll { padding:22px 19px 90px; }.detail-title { font-size:22px; }.detail-metadata { font-size:10px; flex-wrap:wrap; }.rich-content { font-size:12px; }.history-panel { width:min(360px,96%); }
 .editor-backdrop { padding:0; }.editor-dialog { height:100dvh; max-height:none; border-radius:0; }.editor-topbar { padding:14px 13px; }.editor-topbar h2 { font-size:16px; }.editor-actions { gap:4px; }.editor-actions .btn { padding:8px 10px; font-size:11px; }.editor-scroll { padding:18px 13px 80px; }.field-row { grid-template-columns:1fr 1fr; gap:9px; }.field-label { font-size:11px; }.field-label input,.field-label select { font-size:11px; padding:11px 7px; }.editor-label-row span { font-size:9px; }.editor-toolbar { padding:6px 3px; }.editor-toolbar button { min-width:28px; }.tool-separator { margin:0 2px; }.edit-content { padding:13px; min-height:260px; }.editor-section-header h3 { font-size:12px; }.editor-section-header p { font-size:9px; }.editor-section-header .btn { padding:8px; font-size:10px; }.editor-link-row { flex-wrap:wrap; }.editor-link-row input { flex:1 1 30%; }.editor-link-row input:nth-child(2) { flex:2 1 45%; }
 .login-page { grid-template-columns:1fr; }.login-left { min-height:90px; padding:22px; }.login-graphic,.login-bottom { display:none; }.login-right { padding:38px 25px; min-height:calc(100vh - 90px); align-items:flex-start; }.login-panel h1 { font-size:22px; }
 .toast { bottom:calc(84px + env(safe-area-inset-bottom)); width:max-content; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* B안: clean, high contrast, responsive card layout */
:root { --navy:#111111;--ink:#111111;--muted:#333333;--blue:#2563eb;--blue2:#1d4ed8;--line:#dce2ea;--bg:#ffffff; color:#111111; background:#ffffff; }
body, .main-content {background:#fff!important;color:#111!important;}
.sidebar,.topbar,.filter-area,.tip-card,.dialog,.editor-dialog {background:#fff!important;}
.sidebar {box-shadow:none!important;border-right:1px solid #e5e7eb!important;}
.topbar {border-bottom:1px solid #e5e7eb!important;}
.content-container {max-width:1360px!important;}
.section-heading h2,.topbar-left strong,.tip-card h3,.detail-title,.rich-content,.rich-content p,.rich-content li,.rich-content h1,.rich-content h2,.rich-content h3,.field-label,.editor-label-row,.contact-panel h3 {color:#111!important;}
.section-heading p,.section-eyebrow,.topbar-overline,.list-meta,.list-meta span,.card-excerpt,.card-bottom,.detail-metadata,.dialog-header p,.muted,.muted-small,.nav-link,.category-nav-link,.field-label input::placeholder,.field-label select,.editor-subhint,.login-panel>p,.login-note {color:#333!important;}
.tip-card {border:1px solid #dce2ea!important;border-radius:14px!important;min-height:185px!important;padding:19px!important;box-shadow:none!important;}
.tip-card:hover {border-color:#2563eb!important;box-shadow:0 6px 18px #1111110a!important;}
.tip-card h3 {font-size:16px!important;font-weight:800!important;}
.card-excerpt {font-size:12px!important;line-height:1.65!important;}
.card-bottom {font-size:11px!important;color:#333!important;border-top:1px solid #e5e7eb;padding-top:12px!important;}
.pill-cat {color:#1d4ed8!important;background:transparent!important;padding:0!important;font-size:11px!important;}
.search-input-wrap {background:#f3f5f8!important;border-color:#e2e5eb!important;}
.search-input-wrap input,.search-input-wrap input::placeholder {color:#333!important;}
.filter-chip {color:#111!important;background:#fff!important;border-radius:999px!important;border:1px solid #d1d5db!important;font-size:12px!important;}
.filter-chip.chosen {background:#2563eb!important;border-color:#2563eb!important;color:#fff!important;}
.btn.primary,.mobile-tabs .center-tab {background:#2563eb!important;color:#fff!important;border-color:#2563eb!important;}
.btn.subtle {color:#111!important;border-color:#d1d5db!important;}
.cards-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;}
.detail-category {color:#1d4ed8!important;}
.detail-scroll {color:#111!important;}
.rich-content {font-size:14px!important;line-height:1.85!important;}
.contact-panel {margin-top:28px;background:#f3f5f8;border-radius:12px;padding:20px;}
.contact-panel h3,.contact-editor h3 {font-size:15px;margin:0 0 17px;display:flex;align-items:center;gap:8px;color:#111;}
.contact-grid,.contact-input-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 20px;}
.contact-grid>div {display:flex;flex-direction:column;gap:6px;min-width:0;}
.contact-grid span {color:#333;font-size:12px;}
.contact-grid strong {color:#111;font-size:14px;overflow-wrap:anywhere;}
.contact-editor {border-top:1px solid #e5e7eb;margin-top:23px;padding-top:23px;}
.contact-input-grid .field-label {margin-bottom:4px;}
.field-label input,.field-label select {color:#111!important;font-size:13px!important;}
.login-page .login-left {background:#111827!important;}
.login-panel h1,#auth-form label {color:#111!important;}
@media(max-width:650px){.cards-grid {grid-template-columns:1fr!important;gap:12px!important;}.tip-card {min-height:155px!important;padding:17px!important;}.tip-card h3 {font-size:15px!important;}.card-excerpt {font-size:12px!important;}.contact-input-grid {grid-template-columns:1fr!important;}.contact-grid {gap:13px;}.content-container {padding-bottom:95px!important;}}

/* 2026 refresh: reading-first monochrome UI with restrained blue accents */
:root {font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',system-ui,sans-serif;--ink:#111827;--muted:#374151;--blue:#2563eb;--line:#e5e7eb;}
button,input,[contenteditable] {font-family:inherit;}
.editor-dialog {width:min(1050px,100%)!important;background:#fff!important;border:1px solid #e6e8ee;box-shadow:0 20px 72px #10182820;border-radius:20px;}
.editor-topbar {padding:24px 32px!important;border-bottom:1px solid #eef0f3!important;}
.editor-topbar h2 {font-size:23px!important;font-weight:800;letter-spacing:-.6px;color:#101828;}
.editor-topbar .section-eyebrow {letter-spacing:1.7px;font-size:10px!important;color:#2563eb!important;}
.editor-actions .btn {height:40px;min-width:76px;padding:9px 16px;font-size:13px;}
.editor-actions .btn.primary {box-shadow:none!important;}
.editor-scroll {padding:28px 34px 38px!important;}
.editor-layout {display:block!important;}
.editor-main {max-width:none;}
.form-section-basic {display:grid;gap:14px;margin-bottom:30px;}
.inline-field {display:grid;grid-template-columns:102px minmax(0,1fr);align-items:center;gap:15px;min-width:0;position:relative;}
.inline-field>label {color:#111827;font-size:14px;font-weight:750;letter-spacing:-.2px;white-space:nowrap;}
.inline-field>input {height:47px;width:100%;border:1px solid #dce2eb;background:#fff;border-radius:12px;padding:0 16px;color:#111;font-size:14px;font-weight:500;outline:0;transition:border-color .15s,box-shadow .15s;}
.inline-field>input::placeholder {color:#687384;opacity:1;}
.inline-field>input:focus {border-color:#2563eb;box-shadow:0 0 0 3px #2563eb12;}
.inline-field-grid {display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.inline-field-grid .inline-field {grid-template-columns:102px minmax(0,1fr);}
.picker {position:relative;min-width:0;}
.picker-trigger {width:100%;height:47px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;border-radius:12px;border:1px solid #dce2eb;background:#fff;font-size:14px;font-weight:600;color:#505c6d;text-align:left;transition:.16s;border-color:.16s;}
.picker-trigger.has-selection {color:#111827;font-weight:750;}
.picker-trigger:hover {background:#f8fafc;border-color:#93b4ff;}
.picker-trigger[aria-expanded=true]{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb10;}
.picker-trigger:disabled{cursor:not-allowed;background:#f7f8fa;color:#9ca3af;}
.picker-trigger>span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.picker-options {position:absolute;top:calc(100% + 8px);right:0;left:0;max-height:290px;overflow-y:auto;z-index:130;background:white;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 16px 40px #15233622;padding:8px;}
.picker-options[hidden],.color-menu[hidden],.image-size-controls[hidden],.image-resize-grip[hidden]{display:none!important;}
.picker-head {padding:9px 11px 11px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f3f6;margin-bottom:5px;}
.picker-head b {font-size:12px;color:#111827;}
.picker-head small {font-size:11px;color:#475569;}
.picker-option {border:0;border-radius:9px;background:#fff;text-align:left;display:flex;align-items:center;width:100%;padding:11px 10px;gap:10px;color:#111827;font-weight:600;font-size:13px;transition:background .15s;}
.picker-option:hover {background:#f2f5fb;transform:none;}
.picker-option.selected {background:#eff5ff;color:#1d4ed8;}
.picker-option>.icon {margin-left:auto;}
.picker-option-bullet {width:16px;height:16px;border-radius:5px;border:1.5px solid #cbd5e1;flex:0 0 auto;}
.picker-option.selected .picker-option-bullet {background:#2563eb;border-color:#2563eb;box-shadow:inset 0 0 0 4px #fff;}
.picker-empty{padding:15px 11px;font-size:12px;color:#475569;line-height:1.5;}
.form-section-content {position:relative;}
.editor-content-heading {display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;}
.editor-content-heading h3 {font-size:15px;font-weight:800;color:#111827;letter-spacing:-.3px;margin:0;}
.editor-content-heading>span {font-size:12px;color:#374151;}
.text-editor {border-radius:14px;border:1px solid #dce2eb;overflow:visible;position:relative;background:#fff;}
.editor-toolbar {background:#fafbfd!important;border-bottom:1px solid #e7ebf0;gap:5px;padding:10px 12px;border-radius:14px 14px 0 0;}
.editor-toolbar button {min-width:34px;height:34px;font-size:12px;color:#263445!important;border:0;border-radius:8px;}
.editor-toolbar button:hover,.color-trigger:hover{background:#e9effa!important;color:#1d4ed8!important;}
.tool-separator {height:22px;margin:0 6px;}
.edit-content {min-height:280px;padding:19px 21px!important;font-size:14px!important;color:#111827!important;line-height:1.9;background:#fff;border-radius:0 0 14px 14px;outline:none!important;}
.edit-content:focus{box-shadow:inset 0 0 0 1px #94b9ff;}
.edit-content:empty:before {color:#64748b!important;}
.rich-content img {max-width:100%!important;height:auto!important;display:block;border-radius:10px;object-fit:contain;margin:12px 0;cursor:pointer;}
.edit-content img.selected-editor-image {outline:2px solid #2563eb;outline-offset:3px;}
.color-picker-wrap {position:relative;display:inline-flex;}
.editor-toolbar .color-trigger {display:inline-flex;align-items:center;justify-content:center;gap:4px;border:0;border-radius:8px;background:transparent;padding:3px 6px!important;min-width:52px;height:34px;color:#1f2937!important;}
.color-a {font-size:17px;font-weight:900;position:relative;line-height:1;}
.color-indicator {width:8px;height:8px;border-radius:50%;background:#2563eb;align-self:flex-end;margin-bottom:4px;}
.color-menu {position:absolute;z-index:140;left:-65px;top:calc(100% + 11px);width:264px;background:#fff;box-shadow:0 16px 45px #11182720;border:1px solid #e2e8f0;border-radius:14px;padding:14px;}
.color-menu-title {display:flex;justify-content:space-between;gap:8px;align-items:center;color:#111827;font-size:13px;font-weight:800;margin-bottom:11px;}
.color-menu-title>span{font-size:10px;color:#64748b;font-weight:500;}
.color-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
.editor-toolbar .color-choice {display:flex;align-items:center;flex-direction:column;gap:6px;height:73px;padding:10px 5px!important;border:1px solid #e5e7eb!important;background:#fff;border-radius:11px;color:#111827!important;font-size:12px;font-weight:700;}
.editor-toolbar .color-choice:hover {background:#f6f9ff!important;border-color:#93b4ff!important;}
.color-circle {width:25px;height:25px;border-radius:8px;border:1px solid #1111110e;box-shadow:0 2px 5px #11111112;}
.image-size-controls {display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-bottom:1px solid #dbe7f9;background:#f2f6ff;padding:10px 14px;color:#111827;}
.image-size-heading {display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;white-space:nowrap;}
.image-size-presets {display:flex;gap:4px;}
.image-size-presets button {border:1px solid #c8d7f1;border-radius:8px;background:white;padding:6px 9px;font-size:11px;font-weight:750;color:#111827;}
.image-size-presets button:hover {background:#dbeafe;}
.image-size-slider-label {display:flex;align-items:center;gap:6px;margin-left:auto;color:#111827;font-size:11px;font-weight:800;}
.image-size-slider-label input {width:104px;accent-color:#2563eb;}
.image-size-close {border:0;background:transparent;display:flex;align-items:center;color:#374151;}
.image-resize-grip {position:fixed;z-index:200;display:block;width:24px;height:24px;border-radius:8px;background:#2563eb;border:3px solid white;box-shadow:0 2px 9px #11182744;cursor:nwse-resize;touch-action:none;}
.image-resize-grip:before {content:'';position:absolute;inset:6px 5px 5px 6px;border-right:1px solid white;border-bottom:1px solid white;}
.contact-editor {border:1px solid #e3e7ee;background:#f9fafc;border-radius:16px;padding:23px!important;margin-top:28px!important;}
.section-title-new{display:flex;align-items:center;gap:11px;margin-bottom:21px;}
.section-icon {background:#eaf1ff;color:#2563eb;border-radius:11px;display:flex;align-items:center;justify-content:center;width:37px;height:37px;flex:none;}
.section-title-new h3 {margin:0;font-size:15px;font-weight:850;color:#111827;}
.section-title-new p {margin:4px 0 0;color:#374151;font-size:12px;}
.contact-input-grid {display:grid;grid-template-columns:1fr 1fr;gap:18px!important;}
.contact-field {display:flex;flex-direction:column;gap:8px;min-width:0;}
.contact-field-label {display:flex;align-items:center;gap:9px;font-size:13px;font-weight:750;color:#111827;}
.contact-field-icon {width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;color:#2563eb;background:#e8effe;border-radius:8px;}
.contact-field input {width:100%;height:45px;background:#fff;border:1px solid #dce2eb;border-radius:10px;padding:0 13px;color:#111827;font-size:13px;font-weight:550;outline:0;}
.contact-field input::placeholder {color:#6b7280;}
.contact-field input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb13;}
.editor-section {margin-top:26px!important;padding-top:24px!important;}
.editor-section-header h3 {font-size:15px!important;color:#111827!important;}
.editor-section-header p,.editor-subhint,.save-footnote {color:#374151!important;font-size:12px!important;}
.save-footnote {display:flex;align-items:center;gap:8px;padding-top:27px;margin-top:26px;border-top:1px solid #e5e7eb;}
@media(max-width:900px){.editor-dialog{height:100dvh;max-height:none;border-radius:0!important;}.editor-scroll{padding:19px 18px 60px!important;}.editor-topbar{padding:16px 18px!important;}.editor-topbar h2{font-size:20px!important;}}
@media(max-width:690px){
  .inline-field-grid{grid-template-columns:1fr;gap:12px;}
  .inline-field,.inline-field-grid .inline-field{grid-template-columns:85px minmax(0,1fr);gap:8px;}
  .inline-field>label{font-size:13px;}
  .inline-field>input,.picker-trigger{height:43px;font-size:13px!important;}
  .editor-toolbar{gap:3px;padding:7px 6px;}
  .editor-toolbar button{min-width:31px;padding:4px;}
  .editor-content-heading>span{font-size:10px;}
  .contact-editor{padding:17px!important;}
  .contact-input-grid{grid-template-columns:1fr!important;gap:17px!important;}
  .image-size-controls{gap:9px;}
  .image-size-slider-label{margin-left:0;flex:1;justify-content:flex-end;}
  .image-size-slider-label input{width:110px;}
  .color-menu{left:auto;right:-58px;width:245px;}
  .edit-content{font-size:14px!important;padding:16px!important;min-height:260px;}
}
@media(max-width:380px){.editor-topbar h2{font-size:17px!important;}.editor-actions .btn{min-width:auto;padding:8px 10px;}.inline-field,.inline-field-grid .inline-field{grid-template-columns:76px minmax(0,1fr);}.editor-toolbar button{min-width:28px;padding:3px;}}
/* Avoid scrolling the underlying cards while editing in the mobile app. */
body:has(.editor-backdrop){overflow:hidden;}