@font-face{font-family:Sarabun;font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Sarabun-Regular.ttf') format('truetype')}@font-face{font-family:Sarabun;font-style:normal;font-weight:600 800;font-display:swap;src:url('fonts/Sarabun-SemiBold.ttf') format('truetype')}
:root{--blue:#0f3d7a;--blue-hover:#0a3064;--orange:#f97316;--ink:#172b46;--muted:#52637a;--line:#dce3ec;--surface:#fff;--background:#f5f7fa;--focus:#c65a05;--danger:#b42318;--radius:12px;color-scheme:light;font-family:'Sarabun','Leelawadee UI',Tahoma,sans-serif;color:var(--ink);background:var(--background);font-size:16px;line-height:1.6}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:var(--blue)}button:disabled{opacity:.55;cursor:wait}input:disabled,textarea:disabled{background:#edf0f4;cursor:not-allowed}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1{font-size:1.875rem;line-height:1.4;letter-spacing:-.02em}h2{font-size:1.2rem;line-height:1.5}h3{font-size:1rem;line-height:1.55}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}img{max-width:100%}.shell{width:min(1220px,calc(100% - 64px));margin-inline:auto}.topbar{background:var(--blue);color:#fff}.header-inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:16px;color:white;text-decoration:none;font-size:1rem;font-weight:600;min-width:0}.brand img{width:104px;height:46px;object-fit:contain;background:#fff;border-radius:6px;padding:5px;flex-shrink:0}.brand small{display:block;font-weight:400;font-size:.8rem;color:#dbe7f6;margin-top:2px}.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.header-link{border:0;background:transparent;text-decoration:none;color:#fff;padding:10px 12px;border-radius:6px;font-size:.875rem;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}.header-link:hover{background:#ffffff18}.main-content{padding-block:36px 24px;min-height:65vh}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.page-heading p{margin-top:8px}.muted{color:var(--muted)}.small{font-size:.82rem}.count-label{font-size:.9rem;white-space:nowrap;color:var(--muted)}.toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-block:20px}.portal-tools{background:white;padding:18px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px}.search-field{position:relative;flex:1;min-width:160px}.search-field>i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}.search-field input{padding-left:43px;padding-right:42px}.clear-search{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--muted);font-size:1.4rem;width:34px;height:34px}.filter-field{display:flex;gap:9px;align-items:center;flex-shrink:0}.filter-field label{font-size:.85rem;color:var(--muted);white-space:nowrap}.filter-field select{width:auto;min-width:125px}input,select,textarea{border:1px solid #aebccc;border-radius:7px;min-height:44px;padding:10px 12px;background:#fff;color:var(--ink);width:100%}input::placeholder,textarea::placeholder{color:#617086;opacity:1}input[type=search]::-webkit-search-cancel-button{display:none}input[type=color]{padding:5px;max-width:100px}input[type=checkbox]{width:19px;min-height:19px;height:19px;accent-color:var(--blue)}textarea{resize:vertical}.result-count{font-size:.85rem;min-height:24px;margin:6px 0 20px}.favorite-hint{margin-top:20px}.system-section{margin-block:28px}.section-heading{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.category-count,.tab-count{border-radius:20px;background:#e9eef5;color:#455b76;font-size:.75rem;min-width:24px;padding:2px 8px;text-align:center}.system-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:16px}.system-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);min-width:0;transition:border-color .15s,background-color .15s}.system-card:hover{border-color:#91a9c7;background:#fcfdff}.system-link{display:flex;flex-direction:column;align-items:flex-start;min-height:205px;height:100%;padding:22px 20px 18px;color:var(--ink);text-decoration:none;border-radius:var(--radius);overflow-wrap:anywhere}.system-icon{font-size:1.65rem;background:#f0f4f9;width:48px;height:48px;display:grid;place-items:center;border-radius:10px;margin-bottom:17px}.system-link h3{padding-right:2px;text-wrap:pretty}.system-description{font-size:.82rem;color:var(--muted);margin-top:7px}.link-caption{font-size:.78rem;color:#526581;margin-top:auto;padding-top:18px;display:flex;gap:8px}.system-card:hover .link-caption{color:var(--blue)}.favorite-button{position:absolute;right:8px;top:8px;border:0;background:transparent;z-index:1;width:42px;height:42px;border-radius:7px;font-size:1.65rem;line-height:1;color:#62728a}.favorite-button:hover{background:#fff3e7}.favorite-button[aria-pressed=true],.favorite-accent{color:#a74900}#favorites-section{padding-bottom:28px;border-bottom:1px solid var(--line)}.empty-state{text-align:center;border:1px dashed #b9c6d7;border-radius:var(--radius);padding:48px 24px;background:#fff;margin-block:24px}.empty-state>i{font-size:2rem;color:var(--muted);margin-bottom:14px}.empty-state p{color:var(--muted);margin:10px auto 22px;max-width:60ch}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:9px 16px;background:white;color:var(--ink);border:1px solid #aebccc;border-radius:7px;text-decoration:none;white-space:nowrap;font-size:.9rem;font-weight:600;transition:background-color .15s}.button:hover{background:#edf2f8}.button.primary{background:var(--blue);color:white;border-color:var(--blue)}.button.primary:hover{background:var(--blue-hover)}.button.danger{color:white;background:var(--danger);border-color:var(--danger)}.button.danger:hover{background:#8f1b13}.text-button{background:transparent;border:0;color:var(--blue);text-decoration:underline;padding:4px 8px}.notice{background:#edf3fa;padding:14px 16px;border:1px solid #cbd9eb;border-radius:8px;margin-block:16px;font-size:.9rem}.notice.error{background:#fff3f0;border-color:#eab7ad;color:#8e271b}.footer{border-top:1px solid var(--line);padding-block:20px 28px;color:var(--muted);font-size:.8rem}.tabs{display:flex;border-bottom:1px solid var(--line);gap:24px;margin-bottom:24px}.tabs button{display:flex;align-items:center;gap:8px;padding:12px 0;color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;font-size:.95rem}.tabs button[aria-selected=true]{border-bottom-color:var(--orange);color:var(--blue);font-weight:600}.admin-tools{gap:12px;flex-wrap:wrap}.admin-tools .search-field{max-width:420px}.admin-tools .filter-field{gap:7px}.admin-tools select{min-width:100px}.table-wrap{margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);overflow:auto;background:white}table{border-collapse:collapse;width:100%;text-align:left;font-size:.875rem}th{background:#edf2f8;color:#455b76;font-size:.8rem;font-weight:600;padding:14px 16px;white-space:nowrap}td{padding:17px 16px;border-top:1px solid var(--line);vertical-align:middle}tbody tr:hover{background:#fbfcfe}.table-empty{text-align:center;padding:44px 16px;color:var(--muted)}.table-name{display:flex;gap:12px;align-items:center;min-width:220px;max-width:420px}.table-name>i{width:34px;text-align:center;font-size:1.3rem;flex-shrink:0}.table-name strong{display:block;font-weight:600;overflow-wrap:anywhere}.table-name small{display:block;color:var(--muted);max-width:330px;overflow-wrap:anywhere;font-size:.75rem}.row-actions,.order-controls{display:flex;gap:6px;align-items:center}.icon-button,.row-button{background:white;border:1px solid var(--line);color:var(--blue);border-radius:6px;min-width:36px;min-height:36px;padding:5px 9px;font-size:.85rem}.icon-button{font-size:1.2rem}.row-button:hover,.icon-button:hover{background:#edf3fa}.row-button.delete{color:var(--danger)}.status-toggle{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:.82rem;color:#335744}.status-toggle.off{color:var(--muted)}.color-dot{display:inline-block;width:12px;height:12px;border:1px solid #0002;border-radius:50%;margin-right:8px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);background:#173a2e;color:white;padding:12px 22px;border-radius:8px;z-index:30;font-size:.9rem}dialog{border:0;border-radius:12px;padding:24px;width:min(610px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;color:var(--ink);background:#fff;box-shadow:0 12px 32px #0003}dialog::backdrop{background:#12223a88}.small-dialog{width:min(460px,calc(100% - 32px))}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.dialog-heading .icon-button{border:0;font-size:1.5rem}.form-stack{display:grid;gap:17px}.form-stack label{display:block;font-size:.9rem;font-weight:600;margin-bottom:6px}.form-stack .checkbox-label{display:flex;gap:10px;align-items:center;font-weight:400}.field-help{font-size:.78rem;color:var(--muted);margin-top:5px}.required{color:var(--danger)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:18px;border-top:1px solid var(--line);margin-top:8px}.form-error{margin:0}fieldset{padding:0;border:0;min-width:0}legend{font-weight:600;font-size:.9rem;margin-bottom:10px}.icon-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.icon-preset{display:flex;align-items:center;gap:8px;padding:9px 10px;background:white;border:1px solid var(--line);border-radius:7px;color:var(--ink);font-size:.78rem;min-height:42px}.icon-preset[aria-pressed=true]{background:#eaf1fc;border-color:var(--blue);color:var(--blue)}summary{cursor:pointer;font-size:.85rem;color:var(--blue);padding:5px 0}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-panel{width:min(420px,100%);padding:32px;background:white;border:1px solid var(--line);border-radius:var(--radius)}.login-panel h1{font-size:1.5rem;margin-top:22px}.login-panel>p{font-size:.88rem;margin-block:12px 24px}.login-logo{display:block;width:150px;margin-top:28px}.back-link{font-size:.85rem;text-decoration:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-100px;left:16px;z-index:50;background:white;color:var(--blue);padding:12px}.skip-link:focus{top:8px}
@media(min-width:1500px){.system-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1000px){.shell{width:calc(100% - 40px)}.header-inner{gap:16px}.brand{font-size:.9rem}.admin-tools .search-field{max-width:none;flex-basis:100%}.admin-tools .button{margin-left:auto}.table-name{min-width:170px}td,th{padding:12px}}
@media(max-width:640px){.shell{width:calc(100% - 32px)}.header-inner{min-height:78px;gap:8px}.brand{gap:10px;font-size:.78rem;line-height:1.5}.brand img{width:75px;height:38px}.brand small{font-size:.68rem}.header-link{padding:9px 6px;font-size:.72rem}.header-link i{display:none}.header-actions{gap:4px;flex-wrap:wrap;justify-content:flex-end}.main-content{padding-top:26px}.page-heading{margin-bottom:20px;align-items:flex-start}.page-heading p{font-size:.85rem;max-width:30ch}h1{font-size:1.5rem}.count-label{font-size:.75rem;margin-top:7px}.portal-tools{padding:12px;flex-direction:column;gap:12px}.portal-tools .search-field,.portal-tools .filter-field{width:100%}.portal-tools select{flex:1}.system-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.system-link{padding:16px 13px;min-height:195px}.system-link h3{font-size:.9rem}.system-icon{width:42px;height:42px;font-size:1.4rem}.system-description{font-size:.77rem}.link-caption{font-size:.72rem}.favorite-button{right:3px;top:4px;width:38px;height:38px}.section-heading h2{font-size:1.1rem}.section-heading .small{font-size:.7rem}.admin-tools .filter-field{flex:1;min-width:130px}.admin-tools .filter-field select{min-width:0;width:100%}.admin-tools .button{width:100%;margin:0}.admin-main .table-wrap{border:0;background:none;overflow:visible}.admin-main table,.admin-main tbody,.admin-main tr{display:block}.admin-main thead{display:none}.admin-main tbody tr{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:12px;padding:12px}.admin-main td{display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;padding:7px 0}.admin-main td::before{content:attr(data-label);font-size:.75rem;color:var(--muted);flex-shrink:0}.admin-main td.name-cell{display:block;order:-1}.admin-main td.name-cell::before{display:none}.admin-main .table-name{max-width:none;min-width:0}.admin-main .table-empty{display:block;padding:24px;text-align:center}.row-button{min-height:40px}.order-controls .row-button{min-width:40px}.icon-presets{grid-template-columns:repeat(2,1fr)}dialog{padding:20px}.form-grid{grid-template-columns:1fr 1fr}.form-grid>div:first-child{grid-column:1/-1}.tabs{gap:20px}.toolbar h2{font-size:1rem}.footer{font-size:.7rem}.login-panel{padding:25px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
/* Shared display settings and spacious editing forms. */
.portal-main .system-grid{grid-template-columns:repeat(var(--portal-columns,4),minmax(0,1fr))}
.system-icon{font-size:var(--portal-icon-size,22px);width:calc(var(--portal-icon-size,22px) + 18px);height:calc(var(--portal-icon-size,22px) + 18px);max-width:100%;margin-bottom:12px}
.system-link{min-height:175px;padding:18px 16px 16px}
.system-link .system-icon{margin-right:28px}
.link-caption{padding-top:12px}
.portal-tools .search-field,.admin-tools .search-field{flex:0 1 320px;max-width:320px}
#system-dialog{width:min(860px,calc(100% - 32px));padding:28px}
#category-dialog{width:min(600px,calc(100% - 32px));padding:28px}
#system-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
#system-form>.field-wide,#system-form>fieldset,#system-form>details,#system-form>.form-error,#system-form>.checkbox-label,#system-form>.dialog-actions{grid-column:1/-1}
#system-form>fieldset{margin:0}
#system-form textarea{min-height:90px}
#system-dialog .dialog-heading{margin-bottom:26px}
.display-settings{border:1px solid var(--line);border-radius:10px;padding:16px 20px;background:#fff;margin-bottom:24px}
.display-settings>summary{cursor:pointer;color:var(--blue);font-weight:600}
.display-form{display:grid;grid-template-columns:180px 180px 1fr auto;gap:16px;align-items:start;margin-top:16px}
.display-form label{display:block;font-size:.85rem;margin-bottom:6px}
.display-help{grid-column:1/-1}
.display-form>.button{align-self:center}
.icon-size-preview{display:flex;gap:12px;align-items:center;align-self:center}
.icon-size-preview .system-icon{margin:0;color:var(--blue);flex-shrink:0}
@media(max-width:1000px){.portal-main .system-grid{grid-template-columns:repeat(min(var(--portal-columns,4),3),minmax(0,1fr))}.admin-tools .search-field{flex-basis:320px}.display-form{grid-template-columns:1fr 1fr}.display-form>.button{justify-self:start}}
@media(max-width:640px){.portal-main .system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-tools .search-field,.admin-tools .search-field{flex:1 1 auto;max-width:none;width:100%}.admin-tools .search-field{flex-basis:100%}.system-link{min-height:165px;padding:16px 12px}.system-link .system-icon{margin-right:24px}#system-dialog,#category-dialog{padding:20px}#system-form{grid-template-columns:minmax(0,1fr);gap:18px}.display-settings{padding:14px}.display-form{grid-template-columns:minmax(0,1fr)}.display-form>.button{width:100%}.display-help{grid-column:auto}}
@media(max-width:360px){.portal-main .system-grid{grid-template-columns:minmax(0,1fr)}}
/* Compact toolbar and whole-card sizing. */
/* Searchable icon library within the existing system form. */
.icon-picker-preview{display:flex;align-items:center;gap:14px;padding:12px 0 18px;border-bottom:1px solid var(--line);margin-bottom:16px}
#selected-icon-preview{display:grid;place-items:center;width:52px;height:52px;flex-shrink:0;background:#f1f5fb;border-radius:8px;font-size:28px;color:var(--blue)}
#selected-icon-label{display:block;font-size:.95rem}
.icon-color-field{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-color-field label{margin:0!important;white-space:nowrap}
.icon-color-field input[type=color]{width:54px;height:40px;padding:4px}
.icon-picker-tools{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px}
#icon-count{margin:10px 0}
.icon-results{max-height:256px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:4px}
.icon-picker .icon-presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.icon-picker .icon-preset{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 6px;min-height:82px;min-width:0;text-align:center;font-size:.8rem;line-height:1.5}
.icon-picker .icon-preset i{font-size:23px}
.icon-picker .icon-preset[aria-pressed=true]{border-color:var(--blue);background:#e8f0fc;box-shadow:inset 0 0 0 1px var(--blue)}
#icon-empty{padding:24px 12px;text-align:center;font-size:.85rem}
#system-dialog .dialog-actions{position:sticky;bottom:-28px;background:white;padding:14px 0;border-top:1px solid var(--line);z-index:1}
@media(max-width:640px){.icon-picker-tools{grid-template-columns:minmax(0,1fr)}.icon-picker .icon-presets{grid-template-columns:repeat(3,minmax(0,1fr))}.icon-picker-preview{gap:10px}.icon-color-field{flex-direction:column;gap:4px;font-size:.8rem}#system-dialog .dialog-actions{bottom:-20px}}
@media(max-width:360px){.icon-picker .icon-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.portal-heading{align-items:flex-start;gap:24px}
.portal-heading>div:first-child{min-width:0}
.portal-heading .count-label{display:block;margin-top:8px;font-size:.8rem}
.portal-heading .portal-tools{flex:0 1 440px;max-width:440px;min-width:0;margin:0 0 0 auto;padding:8px;gap:8px;align-items:center;border-radius:9px}
.portal-heading .search-field{flex:1 1 210px;max-width:none;min-width:120px}
.portal-heading .filter-field{min-width:0;flex:0 1 170px}
.portal-heading .filter-field label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.portal-heading .filter-field select{min-width:0;width:100%;max-width:170px}
.portal-heading input,.portal-heading select{font-size:.82rem;padding-top:7px;padding-bottom:7px;min-height:40px}
.portal-main .result-count{text-align:right;margin:0 0 16px;min-height:0}
.portal-main .system-grid{width:calc(100% * var(--card-scale,.85));gap:calc(16px * var(--card-scale,.85));max-width:100%}
.portal-main .system-link,.card-size-preview .system-link{min-height:calc(150px * var(--card-scale,.85));padding:calc(16px * var(--card-scale,.85));justify-content:flex-start}
.portal-main .system-icon,.card-size-preview .system-icon{font-size:calc(26px * var(--card-scale,.85));width:calc(44px * var(--card-scale,.85));height:calc(44px * var(--card-scale,.85));margin-bottom:calc(10px * var(--card-scale,.85));border-radius:8px}
.portal-main .system-link h3,.card-size-preview h3{font-size:max(13px,calc(16px * var(--card-scale,.85)));line-height:1.5}
.portal-main .system-description,.card-size-preview .system-description{font-size:max(12px,calc(13px * var(--card-scale,.85)));margin-top:5px}
.portal-main .favorite-button{font-size:1.35rem;width:36px;height:36px;right:4px;top:4px}
.portal-main .unavailable-link{font-size:.75rem;color:var(--muted);margin-top:8px}
.system-card:hover,.system-card:focus-within{background:#fcfdff;border-color:#91a9c7}
.card-size-preview{width:100%;align-self:center}
.card-size-preview .system-card{width:calc(220px * var(--card-scale,.85));max-width:100%}
.display-form{grid-template-columns:160px 210px minmax(150px,1fr) auto}
@media(max-width:1000px){.portal-heading{flex-wrap:wrap}.portal-heading .portal-tools{flex-basis:440px}.display-form{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.portal-heading{gap:14px}.portal-heading .portal-tools{flex-direction:row;flex-basis:auto;width:100%;max-width:440px}.portal-heading .search-field{flex:1 1 180px;width:auto;min-width:100px}.portal-heading .filter-field{flex:0 1 130px;width:auto}.portal-main .system-grid{width:100%}.display-form{grid-template-columns:minmax(0,1fr)}}

/* Colored, compact cards shared by the directory and editor previews. */
:is(.portal-main,.card-size-preview) .system-card,.system-card-preview{--card-color:#2563eb;--card-ink:#fff;background:#eff6ff;background:color-mix(in oklch,var(--card-color) 16%,white);border:1px solid color-mix(in oklch,var(--card-color) 32%,white);border-radius:12px;box-shadow:0 2px 5px #172b4608;container-type:inline-size}
.portal-main .system-grid{width:100%;gap:calc(14px * var(--card-scale,.85))}
:is(.portal-main,.card-size-preview) .system-link,.system-card-preview .system-link{display:grid;grid-template-columns:calc(54px * var(--card-scale,.85)) minmax(0,1fr);align-items:center;gap:calc(14px * var(--card-scale,.85));min-height:calc(100px * var(--card-scale,.85));padding:calc(18px * var(--card-scale,.85)) max(36px,calc(30px * var(--card-scale,.85))) calc(18px * var(--card-scale,.85)) calc(16px * var(--card-scale,.85))}
:is(.portal-main,.card-size-preview) .system-icon,.system-card-preview .system-icon{background:var(--card-color);color:var(--card-ink);width:calc(54px * var(--card-scale,.85));height:calc(54px * var(--card-scale,.85));font-size:calc(28px * var(--card-scale,.85));border-radius:calc(13px * var(--card-scale,.85));margin:0;max-width:none;box-shadow:0 3px 8px color-mix(in oklch,var(--card-color) 25%,transparent)}
.system-copy{min-width:0}
:is(.portal-main,.card-size-preview) .system-link h3,.system-card-preview h3{font-size:max(14px,calc(15.5px * var(--card-scale,.85)));font-weight:600;line-height:1.5;text-wrap:pretty}
.portal-main .favorite-button{font-size:1.15rem;color:var(--ink);width:32px;height:32px;top:2px;right:2px}
.portal-main .favorite-button[aria-pressed=true]{color:#a74900;background:#fff3e7}
/* Match interaction feedback to each saved card color. */
:is(.portal-main,.card-size-preview) .system-card,.system-card-preview{transition:background-color .18s ease-out,border-color .18s ease-out,box-shadow .18s ease-out,transform .18s ease-out}
:is(.portal-main,.card-size-preview) .system-card:is(:hover,:focus-within),.system-card-preview:is(:hover,:focus-within){background:color-mix(in oklch,var(--card-color) 22%,white);border-color:color-mix(in oklch,var(--card-color) 52%,white);box-shadow:0 3px 8px #172b4614}
:is(.portal-main,.card-size-preview) .system-icon,.system-card-preview .system-icon{transition:background-color .18s ease-out}
:is(.portal-main,.card-size-preview) .system-card:is(:hover,:focus-within) .system-icon,.system-card-preview:is(:hover,:focus-within) .system-icon{background:color-mix(in oklch,var(--card-color) 94%,black)}
:is(.portal-main,.card-size-preview) .system-card .favorite-button:hover{background:color-mix(in oklch,var(--card-color) 12%,white)}
:is(.portal-main,.card-size-preview) .system-card :focus-visible,.system-card-preview :focus-visible{outline-color:var(--ink)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){:is(.portal-main,.card-size-preview) .system-card:hover,.system-card-preview:hover{transform:translateY(-2px)}}
.card-size-preview .system-card{width:100%;max-width:300px}
.system-card-preview{--card-scale:1;margin:16px 0;max-width:360px}
.system-card-preview .system-link{padding:16px;min-height:100px}
.color-presets{display:flex;flex-wrap:wrap;gap:8px}
.color-preset{display:inline-flex;align-items:center;gap:7px;min-height:44px;background:white;border:1px solid var(--line);border-radius:7px;padding:7px 10px;color:var(--ink);font-size:.82rem}
.color-preset[aria-pressed=true]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:#eff6ff;font-weight:600}
.color-preset:hover{background:#edf2f8}
.color-swatch{width:20px;height:20px;border-radius:50%;border:1px solid #0002;flex-shrink:0}
.custom-color-field{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.custom-color-field label{margin:0!important}.custom-color-field input[type=color]{width:54px;height:44px}.custom-color-field .field-help{margin:0}
.card-color-picker legend{margin-top:2px}
.table-name>i{display:grid;place-items:center;width:38px;height:38px;border-radius:9px}
@media(max-width:1000px){.portal-main .system-grid{grid-template-columns:repeat(min(var(--portal-columns,4),3),minmax(0,1fr))}}
@media(max-width:760px){.portal-main .system-grid{grid-template-columns:repeat(min(var(--portal-columns,4),2),minmax(0,1fr))}}
@media(max-width:520px){.portal-main .system-grid{grid-template-columns:minmax(0,1fr);gap:10px}.portal-main .system-link{min-height:88px;padding-block:14px}}

/* The admin directory shares public card visuals, with compact maintenance controls. */
.admin-grid-heading{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
#sort-status{color:var(--blue);min-height:1.6em}#sort-help{margin-bottom:22px}
.admin-card-directory{padding-top:2px}
.admin-card-directory .system-link{padding-right:calc(16px * var(--card-scale,.85))}
.admin-card-tools,.admin-card-actions{display:flex;align-items:center;gap:6px;padding:9px 12px;border-top:1px solid color-mix(in oklch,var(--card-color) 20%,white);flex-wrap:wrap}
.admin-card-tools .status-toggle{margin-left:auto;font-size:.76rem;gap:5px}
.admin-card-actions .row-button{font-size:.78rem;min-height:38px;display:inline-flex;align-items:center;text-decoration:none}
.admin-card-actions .row-button:first-child{margin-right:auto}
.drag-handle{display:grid;place-items:center;width:38px;height:38px;min-width:38px;padding:0;border:1px solid #aebccc;border-radius:7px;background:white;color:var(--ink);font-size:1.6rem;cursor:grab;touch-action:none;user-select:none}
.drag-handle:active{cursor:grabbing}.drag-handle:disabled{cursor:not-allowed;opacity:.4}
.admin-card-tools .row-button{padding:4px 8px;min-width:32px;min-height:38px;font-size:1rem}
.admin-card-directory .is-dragging{opacity:.65;box-shadow:0 0 0 2px var(--blue)}
.admin-card-directory .drop-target{outline:2px dashed var(--blue);outline-offset:3px}
.admin-card-directory[aria-busy=true]{pointer-events:none;opacity:.7}
@media(max-width:640px){.admin-card-tools,.admin-card-actions{padding:9px 10px}}
.admin-card-directory .system-card{display:flex;flex-direction:column}
.admin-card-directory .system-link{height:auto;flex:1}
.admin-card-directory .admin-card-tools,.admin-card-directory .admin-card-actions{flex-shrink:0}

/* Compact public heading, keeping the search tools beside the title on desktop. */
main.portal-main.main-content{padding-top:24px}
.portal-heading{align-items:center;margin-bottom:12px}
.portal-title-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.portal-heading .portal-title-line .count-label{display:inline-flex;margin:0;font-size:.78rem;line-height:1.5;padding:3px 10px;border-radius:20px;background:#e9eef5;color:#455b76;white-space:nowrap}
.portal-heading p{margin-top:4px}
main.portal-main .favorite-hint{margin:0 0 12px}
main.portal-main .result-count{margin:0 0 8px}
main.portal-main #systems-list>.system-section:first-child{margin-top:12px}
main.portal-main #favorites-section{margin-block:12px 16px;padding-bottom:16px}
@media(max-width:640px){.portal-heading{gap:12px;margin-bottom:12px}.portal-title-line{gap:8px}.portal-heading p{max-width:none}main.portal-main.main-content{padding-top:20px}}