.ipa-page {padding:25px 0 75px}
.ipa-hero {background:linear-gradient(118deg,#fff 0%,#fff 62%,#fff0ec 100%);border:1px solid var(--line);padding:27px 30px;border-radius:17px;box-shadow:var(--shadow)}
.ipa-hero-top {display:flex;align-items:center;justify-content:space-between;gap:18px}
.ipa-hero h1 {font-size:32px;font-weight:850;letter-spacing:-1.1px;line-height:1.35}
.ipa-hero h1 span {color:var(--accent)}
.ipa-hero p {font-size:13px;color:#7e8a9d;line-height:1.75;margin-top:6px}
.ipa-hero-icons {display:flex;align-items:center;gap:7px;flex-shrink:0}
.ipa-hero-icons span {display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#fcebea;color:#cc6760;font-size:26px}
.ipa-hero-icons span:nth-child(2) {background:#eff0ff;color:#6673b6;transform:translateY(7px)}
.ipa-hero-icons span:nth-child(3) {background:#e9f5f1;color:#568673;transform:translateY(-5px)}
.ipa-tags {display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.ipa-tags span {font-size:10.5px;color:#627998;background:#f0f4fc;border-radius:20px;padding:5px 9px}
.ipa-editor {background:#fff;border:1px solid var(--line);border-radius:15px;margin-top:19px;padding:23px 26px;box-shadow:var(--shadow)}
.ipa-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.ipa-heading h2 {font-size:19px;letter-spacing:-.5px;font-weight:800}
.ipa-heading p {margin-top:3px;font-size:11.5px;color:#92a0b0}
.ipa-textarea {display:block;resize:vertical;width:100%;min-height:106px;padding:16px 18px;border:1px solid #dce4ef;border-radius:10px;background:#fbfcff;color:#344764;font-size:26px;line-height:1.6;font-family:"Noto Sans","DejaVu Sans","Charis SIL","Doulos SIL","Segoe UI Symbol",sans-serif;outline:0;letter-spacing:.2px}
.ipa-textarea:focus {border-color:#7c9dd2;box-shadow:0 0 0 3px rgba(101,141,213,.12)}
.ipa-editor-toolbar {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px}
.ipa-editor-actions {display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ipa-btn {display:inline-flex;align-items:center;justify-content:center;border:1px solid #dce5f0;background:#fff;color:#536883;padding:8px 11px;border-radius:8px;min-height:35px;font-size:11px;font-weight:760}
.ipa-btn:hover {background:#f1f6ff;border-color:#c4d3e9}
.ipa-btn.primary {background:#3a5da3;color:#fff;border-color:#3a5da3}
.ipa-btn.primary:hover {background:#2d4e90}
.ipa-btn:disabled {opacity:.35;cursor:default}
.ipa-count {font-size:11px;color:#96a2b0}
.ipa-copy-row {display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px}
.ipa-samples {display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid #eef1f6}
.ipa-samples-label {font-size:11px;color:#8191a7;font-weight:760;margin-right:3px}
.ipa-example {background:#f6f8fc;border:1px solid #e7ebf2;border-radius:8px;padding:6px 10px;font-size:11px;color:#516480;display:flex;gap:5px;align-items:center}
.ipa-example:hover {background:#eef3ff;border-color:#bdcceb}
.ipa-example strong {color:#304f87;font-weight:800}
.ipa-collection {background:#fff;border:1px solid var(--line);border-radius:15px;margin-top:20px;padding:23px 26px 28px;box-shadow:var(--shadow)}
.ipa-main-title {display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ipa-main-title h2 {font-size:20px;letter-spacing:-.7px}
.ipa-main-title p {font-size:12px;color:#8c99ab;margin-top:5px}
.ipa-scope-tabs {display:flex;gap:6px;padding:5px;background:#f4f7fc;border-radius:10px;margin-top:17px;width:fit-content}
.ipa-scope {border:0;background:transparent;border-radius:8px;color:#8492a5;font-size:12px;font-weight:760;padding:9px 18px}
.ipa-scope.active {background:#fff;color:#315b9e;box-shadow:0 2px 9px rgba(44,72,122,.12)}
.ipa-categories {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:17px}
.ipa-category {display:flex;align-items:center;gap:11px;min-width:0;min-height:69px;text-align:left;background:#fff;border:1px solid #e8edf4;border-radius:11px;padding:10px 12px}
.ipa-category:hover {border-color:#bad0ee;background:#fcfdff}
.ipa-category.active {border-color:#8daee0;background:#f8fbff;box-shadow:0 0 0 2px #eff5fd inset}
.ipa-category-icon {flex-shrink:0;display:grid;place-items:center;width:43px;height:43px;border-radius:10px;background:var(--ipa-tint,#f2f4fa);font-family:"Noto Sans","DejaVu Sans","Charis SIL","Doulos SIL",sans-serif;font-size:23px;color:#475e80}
.ipa-category-label {display:flex;min-width:0;flex-direction:column;gap:2px}
.ipa-category-label strong {color:#394c6a;font-size:12.5px;font-weight:800}
.ipa-category-label small {color:#9aa6b5;font-size:10px;line-height:1.35;word-break:keep-all}
.ipa-search-row {display:flex;align-items:center;justify-content:space-between;gap:13px;margin-top:22px;flex-wrap:wrap}
.ipa-search-box {display:flex;position:relative;align-items:center;min-width:0;flex:1;max-width:560px}
.ipa-search-icon {position:absolute;left:14px;color:#98a6b8;font-size:21px;pointer-events:none}
.ipa-search {height:45px;border:1px solid #dfe7f1;border-radius:9px;padding:0 38px 0 43px;width:100%;outline:0;background:#fff;font-size:12px;color:#354c6e}
.ipa-search:focus {border-color:#91aedc;box-shadow:0 0 0 3px #eff4fc}
.ipa-search-clear {position:absolute;right:8px;display:grid;place-items:center;border:0;border-radius:50%;width:25px;height:25px;background:#f0f4f9;color:#8792a4;font-size:18px}
.ipa-quick {display:flex;gap:7px;align-items:center}
.ipa-fav-btn {height:43px;border-radius:9px;border:1px solid #e4eaf3;background:#fff;color:#697a93;padding:0 12px;font-size:11px;font-weight:700}
.ipa-fav-btn:hover {background:#f5f8ff}
.ipa-grid-header {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 9px}
.ipa-grid-header h3 {font-size:15px;color:#374e70}
.ipa-grid-header span {font-size:11px;color:#8a98ac}
.ipa-mode-line {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.ipa-mode-buttons {display:flex;align-items:center;border-radius:8px;background:#eff3fa;padding:3px;gap:3px}
.ipa-mode-buttons button {border:0;background:transparent;padding:6px 10px;color:#8796aa;border-radius:6px;font-size:11px;font-weight:700}
.ipa-mode-buttons button.active {background:#fff;color:#335895;box-shadow:0 1px 4px rgba(40,70,110,.12)}
.ipa-mode-hint {color:#8d9aab;font-size:10.5px}
.ipa-grid {display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.ipa-cell {position:relative;border:1px solid #e5eaf3;border-radius:9px;min-width:0;background:#fff;overflow:hidden;transition:border-color .15s,background .15s}
.ipa-cell:hover {border-color:#a9c4e7;background:#f8fbff}
.ipa-symbol {width:100%;min-height:82px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:9px 3px 8px;gap:4px;background:transparent;border:0}
.ipa-symbol:focus-visible,.ipa-symbol:hover {background:#f3f7fd}
.ipa-glyph {font-family:"Noto Sans","DejaVu Sans","Charis SIL","Doulos SIL","Segoe UI Symbol",sans-serif;font-size:31px;line-height:1.35;font-weight:450;white-space:nowrap;max-width:100%;overflow:hidden}
.ipa-combining {color:#586ea1}
.ipa-caption {display:block;max-width:100%;font-size:9.5px;color:#94a0b0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 3px}
.ipa-star {position:absolute;top:0;right:0;display:grid;place-items:center;width:24px;height:24px;border:0;background:transparent;color:#c4ccda;font-size:13px;cursor:pointer}
.ipa-star:hover,.ipa-star.is-fav {color:#dda23c;background:#fff8e9}
.ipa-empty {padding:30px;text-align:center;color:#8290a4;font-size:12px}
.ipa-help {margin-top:19px;border:1px solid var(--line);border-radius:13px;background:#fff;padding:23px}
.ipa-help h2 {font-size:17px}
.ipa-help-items {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.ipa-help-items>div {padding:14px;border-radius:10px;background:#f7f9fd}
.ipa-help-items strong {font-size:12px;color:#375174}
.ipa-help-items p {font-size:11.5px;line-height:1.7;margin-top:7px;color:#7d8da1}
.ipa-note {font-size:11px;color:#8e9baa;margin-top:13px;line-height:1.8}
.ipa-manual {border:1px solid #edd9c5;border-radius:9px;margin-top:14px;padding:10px;background:#fffaf4}
.ipa-manual p {font-size:11px;color:#896d4e}
.ipa-manual textarea {width:100%;margin-top:8px;border:1px solid #e7d4be;border-radius:8px;padding:10px;min-height:70px;resize:vertical;font-size:16px}
.ipa-toast {position:fixed;bottom:22px;left:50%;transform:translate(-50%,10px);opacity:0;visibility:hidden;background:#2a3c57;color:#fff;padding:11px 17px;border-radius:9px;box-shadow:0 10px 26px rgba(37,54,79,.17);transition:opacity .16s,transform .16s,visibility .16s;font-size:12px;z-index:50;max-width:calc(100vw - 26px);text-align:center}
.ipa-toast.show {opacity:1;visibility:visible;transform:translate(-50%,0)}
.ipa-toast.error {background:#9c5456}
[hidden] {display:none!important}
@media(max-width:980px) {.ipa-categories {grid-template-columns:repeat(3,minmax(0,1fr))}.ipa-grid {grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:680px) {.ipa-page {padding:16px 0 47px}.ipa-hero {padding:20px 17px;border-radius:13px}.ipa-hero h1 {font-size:26px}.ipa-hero p {font-size:12px}.ipa-hero-icons {display:none}.ipa-tags {margin-top:10px}.ipa-tags span {font-size:9.5px}
.ipa-editor,.ipa-collection {padding:17px 14px;margin-top:14px;border-radius:12px}.ipa-heading h2 {font-size:17px}.ipa-textarea {font-size:23px;min-height:97px;padding:12px}.ipa-btn {padding:7px 10px;font-size:11px}.ipa-editor-toolbar {margin-top:10px}.ipa-copy-row {margin-top:10px}.ipa-example {font-size:10px;padding:6px 8px}
.ipa-main-title h2 {font-size:18px}.ipa-scope-tabs {width:100%}.ipa-scope {flex:1;padding:9px 8px}.ipa-categories {grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.ipa-category {padding:8px;min-height:61px;gap:8px}.ipa-category-icon {width:37px;height:37px;font-size:21px}.ipa-category-label strong {font-size:11.5px}.ipa-category-label small {font-size:9px}
.ipa-search-row {margin-top:17px;gap:9px}.ipa-search-box {max-width:none;flex-basis:100%}.ipa-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.ipa-symbol {min-height:68px;padding:7px 2px 6px;gap:1px}.ipa-glyph {font-size:25px}.ipa-caption {font-size:8px}.ipa-star {width:23px;height:23px;font-size:12px}.ipa-mode-hint {font-size:10px}.ipa-help {padding:17px}.ipa-help-items {grid-template-columns:1fr;gap:8px}.ipa-help-items>div {padding:12px}}
@media(max-width:375px) {.ipa-grid {grid-template-columns:repeat(4,minmax(0,1fr))}.ipa-hero h1 {font-size:24px}.ipa-caption {font-size:7.5px}}