:root{--swal2-outline: 0 0 0 3px rgba(100, 150, 200, 0.5);--swal2-container-padding: 0.625em;--swal2-backdrop: rgba(0, 0, 0, 0.4);--swal2-backdrop-transition: background-color 0.15s;--swal2-width: 32em;--swal2-padding: 0 0 1.25em;--swal2-border: none;--swal2-border-radius: 0.3125rem;--swal2-background: white;--swal2-color: #545454;--swal2-show-animation: swal2-show 0.3s;--swal2-hide-animation: swal2-hide 0.15s forwards;--swal2-icon-zoom: 1;--swal2-title-padding: 0.8em 1em 0;--swal2-html-container-padding: 1em 1.6em 0.3em;--swal2-input-border: 1px solid #d9d9d9;--swal2-input-border-radius: 0.1875em;--swal2-input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;--swal2-input-background: transparent;--swal2-input-transition: border-color 0.2s, box-shadow 0.2s;--swal2-input-hover-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;--swal2-input-focus-border: 1px solid #b4dbed;--swal2-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(100, 150, 200, 0.5);--swal2-progress-step-background: #add8e6;--swal2-validation-message-background: #f0f0f0;--swal2-validation-message-color: #666;--swal2-footer-border-color: #eee;--swal2-footer-background: transparent;--swal2-footer-color: inherit;--swal2-timer-progress-bar-background: rgba(0, 0, 0, 0.3);--swal2-close-button-position: initial;--swal2-close-button-inset: auto;--swal2-close-button-font-size: 2.5em;--swal2-close-button-color: #ccc;--swal2-close-button-transition: color 0.2s, box-shadow 0.2s;--swal2-close-button-outline: initial;--swal2-close-button-box-shadow: inset 0 0 0 3px transparent;--swal2-close-button-focus-box-shadow: inset var(--swal2-outline);--swal2-close-button-hover-transform: none;--swal2-actions-justify-content: center;--swal2-actions-width: auto;--swal2-actions-margin: 1.25em auto 0;--swal2-actions-padding: 0;--swal2-actions-border-radius: 0;--swal2-actions-background: transparent;--swal2-action-button-transition: background-color 0.2s, box-shadow 0.2s;--swal2-action-button-hover: black 10%;--swal2-action-button-active: black 10%;--swal2-confirm-button-box-shadow: none;--swal2-confirm-button-border-radius: 0.25em;--swal2-confirm-button-background-color: #7066e0;--swal2-confirm-button-color: #fff;--swal2-deny-button-box-shadow: none;--swal2-deny-button-border-radius: 0.25em;--swal2-deny-button-background-color: #dc3741;--swal2-deny-button-color: #fff;--swal2-cancel-button-box-shadow: none;--swal2-cancel-button-border-radius: 0.25em;--swal2-cancel-button-background-color: #6e7881;--swal2-cancel-button-color: #fff;--swal2-toast-show-animation: swal2-toast-show 0.5s;--swal2-toast-hide-animation: swal2-toast-hide 0.1s forwards;--swal2-toast-border: none;--swal2-toast-box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.075), 0 1px 2px hsl(0deg 0% 0% / 0.075), 1px 2px 4px hsl(0deg 0% 0% / 0.075), 1px 3px 8px hsl(0deg 0% 0% / 0.075), 2px 4px 16px hsl(0deg 0% 0% / 0.075)}[data-swal2-theme=dark]{--swal2-dark-theme-black: #19191a;--swal2-dark-theme-white: #e1e1e1;--swal2-background: var(--swal2-dark-theme-black);--swal2-color: var(--swal2-dark-theme-white);--swal2-footer-border-color: #555;--swal2-input-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);--swal2-validation-message-background: color-mix( in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10% );--swal2-validation-message-color: var(--swal2-dark-theme-white);--swal2-timer-progress-bar-background: rgba(255, 255, 255, 0.7)}@media(prefers-color-scheme: dark){[data-swal2-theme=auto]{--swal2-dark-theme-black: #19191a;--swal2-dark-theme-white: #e1e1e1;--swal2-background: var(--swal2-dark-theme-black);--swal2-color: var(--swal2-dark-theme-white);--swal2-footer-border-color: #555;--swal2-input-background: color-mix(in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10%);--swal2-validation-message-background: color-mix( in srgb, var(--swal2-dark-theme-black), var(--swal2-dark-theme-white) 10% );--swal2-validation-message-color: var(--swal2-dark-theme-white);--swal2-timer-progress-bar-background: rgba(255, 255, 255, 0.7)}}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown){overflow:hidden}body.swal2-height-auto{height:auto !important}body.swal2-no-backdrop .swal2-container{background-color:rgba(0,0,0,0) !important;pointer-events:none}body.swal2-no-backdrop .swal2-container .swal2-popup{pointer-events:auto}body.swal2-no-backdrop .swal2-container .swal2-modal{box-shadow:0 0 10px var(--swal2-backdrop)}body.swal2-toast-shown .swal2-container{box-sizing:border-box;width:360px;max-width:100%;background-color:rgba(0,0,0,0);pointer-events:none}body.swal2-toast-shown .swal2-container.swal2-top{inset:0 auto auto 50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-top-end,body.swal2-toast-shown .swal2-container.swal2-top-right{inset:0 0 auto auto}body.swal2-toast-shown .swal2-container.swal2-top-start,body.swal2-toast-shown .swal2-container.swal2-top-left{inset:0 auto auto 0}body.swal2-toast-shown .swal2-container.swal2-center-start,body.swal2-toast-shown .swal2-container.swal2-center-left{inset:50% auto auto 0;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-center{inset:50% auto auto 50%;transform:translate(-50%, -50%)}body.swal2-toast-shown .swal2-container.swal2-center-end,body.swal2-toast-shown .swal2-container.swal2-center-right{inset:50% 0 auto auto;transform:translateY(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-start,body.swal2-toast-shown .swal2-container.swal2-bottom-left{inset:auto auto 0 0}body.swal2-toast-shown .swal2-container.swal2-bottom{inset:auto auto 0 50%;transform:translateX(-50%)}body.swal2-toast-shown .swal2-container.swal2-bottom-end,body.swal2-toast-shown .swal2-container.swal2-bottom-right{inset:auto 0 0 auto}@media print{body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown){overflow-y:scroll !important}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown)>[aria-hidden=true]{display:none}body.swal2-shown:not(.swal2-no-backdrop,.swal2-toast-shown) .swal2-container{position:static !important}}div:where(.swal2-container){display:grid;position:fixed;z-index:1060;inset:0;box-sizing:border-box;grid-template-areas:"top-start     top            top-end" "center-start  center         center-end" "bottom-start  bottom-center  bottom-end";grid-template-rows:minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);height:100%;padding:var(--swal2-container-padding);overflow-x:hidden;transition:var(--swal2-backdrop-transition);-webkit-overflow-scrolling:touch}div:where(.swal2-container).swal2-backdrop-show,div:where(.swal2-container).swal2-noanimation{background:var(--swal2-backdrop)}div:where(.swal2-container).swal2-backdrop-hide{background:rgba(0,0,0,0) !important}div:where(.swal2-container).swal2-top-start,div:where(.swal2-container).swal2-center-start,div:where(.swal2-container).swal2-bottom-start{grid-template-columns:minmax(0, 1fr) auto auto}div:where(.swal2-container).swal2-top,div:where(.swal2-container).swal2-center,div:where(.swal2-container).swal2-bottom{grid-template-columns:auto minmax(0, 1fr) auto}div:where(.swal2-container).swal2-top-end,div:where(.swal2-container).swal2-center-end,div:where(.swal2-container).swal2-bottom-end{grid-template-columns:auto auto minmax(0, 1fr)}div:where(.swal2-container).swal2-top-start>.swal2-popup{align-self:start}div:where(.swal2-container).swal2-top>.swal2-popup{grid-column:2;place-self:start center}div:where(.swal2-container).swal2-top-end>.swal2-popup,div:where(.swal2-container).swal2-top-right>.swal2-popup{grid-column:3;place-self:start end}div:where(.swal2-container).swal2-center-start>.swal2-popup,div:where(.swal2-container).swal2-center-left>.swal2-popup{grid-row:2;align-self:center}div:where(.swal2-container).swal2-center>.swal2-popup{grid-column:2;grid-row:2;place-self:center center}div:where(.swal2-container).swal2-center-end>.swal2-popup,div:where(.swal2-container).swal2-center-right>.swal2-popup{grid-column:3;grid-row:2;place-self:center end}div:where(.swal2-container).swal2-bottom-start>.swal2-popup,div:where(.swal2-container).swal2-bottom-left>.swal2-popup{grid-column:1;grid-row:3;align-self:end}div:where(.swal2-container).swal2-bottom>.swal2-popup{grid-column:2;grid-row:3;place-self:end center}div:where(.swal2-container).swal2-bottom-end>.swal2-popup,div:where(.swal2-container).swal2-bottom-right>.swal2-popup{grid-column:3;grid-row:3;place-self:end end}div:where(.swal2-container).swal2-grow-row>.swal2-popup,div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup{grid-column:1/4;width:100%}div:where(.swal2-container).swal2-grow-column>.swal2-popup,div:where(.swal2-container).swal2-grow-fullscreen>.swal2-popup{grid-row:1/4;align-self:stretch}div:where(.swal2-container).swal2-no-transition{transition:none !important}div:where(.swal2-container)[popover]{width:auto;border:0}div:where(.swal2-container) div:where(.swal2-popup){display:none;position:relative;box-sizing:border-box;grid-template-columns:minmax(0, 100%);width:var(--swal2-width);max-width:100%;padding:var(--swal2-padding);border:var(--swal2-border);border-radius:var(--swal2-border-radius);background:var(--swal2-background);color:var(--swal2-color);font-family:inherit;font-size:1rem}div:where(.swal2-container) div:where(.swal2-popup):focus{outline:none}div:where(.swal2-container) div:where(.swal2-popup).swal2-loading{overflow-y:hidden}div:where(.swal2-container) div:where(.swal2-popup).swal2-draggable{cursor:grab}div:where(.swal2-container) div:where(.swal2-popup).swal2-draggable div:where(.swal2-icon){cursor:grab}div:where(.swal2-container) div:where(.swal2-popup).swal2-dragging{cursor:grabbing}div:where(.swal2-container) div:where(.swal2-popup).swal2-dragging div:where(.swal2-icon){cursor:grabbing}div:where(.swal2-container) h2:where(.swal2-title){position:relative;max-width:100%;margin:0;padding:var(--swal2-title-padding);color:inherit;font-size:1.875em;font-weight:600;text-align:center;text-transform:none;overflow-wrap:break-word;cursor:initial}div:where(.swal2-container) div:where(.swal2-actions){display:flex;z-index:1;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:var(--swal2-actions-justify-content);width:var(--swal2-actions-width);margin:var(--swal2-actions-margin);padding:var(--swal2-actions-padding);border-radius:var(--swal2-actions-border-radius);background:var(--swal2-actions-background)}div:where(.swal2-container) div:where(.swal2-loader){display:none;align-items:center;justify-content:center;width:2.2em;height:2.2em;margin:0 1.875em;animation:swal2-rotate-loading 1.5s linear 0s infinite normal;border-width:.25em;border-style:solid;border-radius:100%;border-color:#2778c4 rgba(0,0,0,0) #2778c4 rgba(0,0,0,0)}div:where(.swal2-container) button:where(.swal2-styled){margin:.3125em;padding:.625em 1.1em;transition:var(--swal2-action-button-transition);border:none;box-shadow:0 0 0 3px rgba(0,0,0,0);font-weight:500}div:where(.swal2-container) button:where(.swal2-styled):not([disabled]){cursor:pointer}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm){border-radius:var(--swal2-confirm-button-border-radius);background:initial;background-color:var(--swal2-confirm-button-background-color);box-shadow:var(--swal2-confirm-button-box-shadow);color:var(--swal2-confirm-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover{background-color:color-mix(in srgb, var(--swal2-confirm-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):active{background-color:color-mix(in srgb, var(--swal2-confirm-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny){border-radius:var(--swal2-deny-button-border-radius);background:initial;background-color:var(--swal2-deny-button-background-color);box-shadow:var(--swal2-deny-button-box-shadow);color:var(--swal2-deny-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):hover{background-color:color-mix(in srgb, var(--swal2-deny-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-deny):active{background-color:color-mix(in srgb, var(--swal2-deny-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel){border-radius:var(--swal2-cancel-button-border-radius);background:initial;background-color:var(--swal2-cancel-button-background-color);box-shadow:var(--swal2-cancel-button-box-shadow);color:var(--swal2-cancel-button-color);font-size:1em}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):hover{background-color:color-mix(in srgb, var(--swal2-cancel-button-background-color), var(--swal2-action-button-hover))}div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):active{background-color:color-mix(in srgb, var(--swal2-cancel-button-background-color), var(--swal2-action-button-active))}div:where(.swal2-container) button:where(.swal2-styled):focus-visible{outline:none;box-shadow:var(--swal2-action-button-focus-box-shadow)}div:where(.swal2-container) button:where(.swal2-styled)[disabled]:not(.swal2-loading){opacity:.4}div:where(.swal2-container) button:where(.swal2-styled)::-moz-focus-inner{border:0}div:where(.swal2-container) div:where(.swal2-footer){margin:1em 0 0;padding:1em 1em 0;border-top:1px solid var(--swal2-footer-border-color);background:var(--swal2-footer-background);color:var(--swal2-footer-color);font-size:1em;text-align:center;cursor:initial}div:where(.swal2-container) .swal2-timer-progress-bar-container{position:absolute;right:0;bottom:0;left:0;grid-column:auto !important;overflow:hidden;border-bottom-right-radius:var(--swal2-border-radius);border-bottom-left-radius:var(--swal2-border-radius)}div:where(.swal2-container) div:where(.swal2-timer-progress-bar){width:100%;height:.25em;background:var(--swal2-timer-progress-bar-background)}div:where(.swal2-container) img:where(.swal2-image){max-width:100%;margin:2em auto 1em;cursor:initial}div:where(.swal2-container) button:where(.swal2-close){position:var(--swal2-close-button-position);inset:var(--swal2-close-button-inset);z-index:2;align-items:center;justify-content:center;width:1.2em;height:1.2em;margin-top:0;margin-right:0;margin-bottom:-1.2em;padding:0;overflow:hidden;transition:var(--swal2-close-button-transition);border:none;border-radius:var(--swal2-border-radius);outline:var(--swal2-close-button-outline);background:rgba(0,0,0,0);color:var(--swal2-close-button-color);font-family:monospace;font-size:var(--swal2-close-button-font-size);cursor:pointer;justify-self:end}div:where(.swal2-container) button:where(.swal2-close):hover{transform:var(--swal2-close-button-hover-transform);background:rgba(0,0,0,0);color:#f27474}div:where(.swal2-container) button:where(.swal2-close):focus-visible{outline:none;box-shadow:var(--swal2-close-button-focus-box-shadow)}div:where(.swal2-container) button:where(.swal2-close)::-moz-focus-inner{border:0}div:where(.swal2-container) div:where(.swal2-html-container){z-index:1;justify-content:center;margin:0;padding:var(--swal2-html-container-padding);overflow:auto;color:inherit;font-size:1.125em;font-weight:normal;line-height:normal;text-align:center;overflow-wrap:break-word;word-break:break-word;cursor:initial}div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) textarea:where(.swal2-textarea),div:where(.swal2-container) select:where(.swal2-select),div:where(.swal2-container) div:where(.swal2-radio),div:where(.swal2-container) label:where(.swal2-checkbox){margin:1em 2em 3px}div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) textarea:where(.swal2-textarea){box-sizing:border-box;width:auto;transition:var(--swal2-input-transition);border:var(--swal2-input-border);border-radius:var(--swal2-input-border-radius);background:var(--swal2-input-background);box-shadow:var(--swal2-input-box-shadow);color:inherit;font-size:1.125em}div:where(.swal2-container) input:where(.swal2-input).swal2-inputerror,div:where(.swal2-container) input:where(.swal2-file).swal2-inputerror,div:where(.swal2-container) textarea:where(.swal2-textarea).swal2-inputerror{border-color:#f27474 !important;box-shadow:0 0 2px #f27474 !important}div:where(.swal2-container) input:where(.swal2-input):hover,div:where(.swal2-container) input:where(.swal2-file):hover,div:where(.swal2-container) textarea:where(.swal2-textarea):hover{box-shadow:var(--swal2-input-hover-box-shadow)}div:where(.swal2-container) input:where(.swal2-input):focus,div:where(.swal2-container) input:where(.swal2-file):focus,div:where(.swal2-container) textarea:where(.swal2-textarea):focus{border:var(--swal2-input-focus-border);outline:none;box-shadow:var(--swal2-input-focus-box-shadow)}div:where(.swal2-container) input:where(.swal2-input)::placeholder,div:where(.swal2-container) input:where(.swal2-file)::placeholder,div:where(.swal2-container) textarea:where(.swal2-textarea)::placeholder{color:#ccc}div:where(.swal2-container) .swal2-range{margin:1em 2em 3px;background:var(--swal2-background)}div:where(.swal2-container) .swal2-range input{width:80%}div:where(.swal2-container) .swal2-range output{width:20%;color:inherit;font-weight:600;text-align:center}div:where(.swal2-container) .swal2-range input,div:where(.swal2-container) .swal2-range output{height:2.625em;padding:0;font-size:1.125em;line-height:2.625em}div:where(.swal2-container) .swal2-input{height:2.625em;padding:0 .75em}div:where(.swal2-container) .swal2-file{width:75%;margin-right:auto;margin-left:auto;background:var(--swal2-input-background);font-size:1.125em}div:where(.swal2-container) .swal2-textarea{height:6.75em;padding:.75em}div:where(.swal2-container) .swal2-select{min-width:50%;max-width:100%;padding:.375em .625em;background:var(--swal2-input-background);color:inherit;font-size:1.125em}div:where(.swal2-container) .swal2-radio,div:where(.swal2-container) .swal2-checkbox{align-items:center;justify-content:center;background:var(--swal2-background);color:inherit}div:where(.swal2-container) .swal2-radio label,div:where(.swal2-container) .swal2-checkbox label{margin:0 .6em;font-size:1.125em}div:where(.swal2-container) .swal2-radio input,div:where(.swal2-container) .swal2-checkbox input{flex-shrink:0;margin:0 .4em}div:where(.swal2-container) label:where(.swal2-input-label){display:flex;justify-content:center;margin:1em auto 0}div:where(.swal2-container) div:where(.swal2-validation-message){align-items:center;justify-content:center;margin:1em 0 0;padding:.625em;overflow:hidden;background:var(--swal2-validation-message-background);color:var(--swal2-validation-message-color);font-size:1em;font-weight:300}div:where(.swal2-container) div:where(.swal2-validation-message)::before{content:"!";display:inline-block;width:1.5em;min-width:1.5em;height:1.5em;margin:0 .625em;border-radius:50%;background-color:#f27474;color:#fff;font-weight:600;line-height:1.5em;text-align:center}div:where(.swal2-container) .swal2-progress-steps{flex-wrap:wrap;align-items:center;max-width:100%;margin:1.25em auto;padding:0;background:rgba(0,0,0,0);font-weight:600}div:where(.swal2-container) .swal2-progress-steps li{display:inline-block;position:relative}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step{z-index:20;flex-shrink:0;width:2em;height:2em;border-radius:2em;background:#2778c4;color:#fff;line-height:2em;text-align:center}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step{background:#2778c4}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step{background:var(--swal2-progress-step-background);color:#fff}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step~.swal2-progress-step-line{background:var(--swal2-progress-step-background)}div:where(.swal2-container) .swal2-progress-steps .swal2-progress-step-line{z-index:10;flex-shrink:0;width:2.5em;height:.4em;margin:0 -1px;background:#2778c4}div:where(.swal2-icon){position:relative;box-sizing:content-box;justify-content:center;width:5em;height:5em;margin:2.5em auto .6em;zoom:var(--swal2-icon-zoom);border:.25em solid rgba(0,0,0,0);border-radius:50%;border-color:#000;font-family:inherit;line-height:5em;cursor:default;user-select:none}div:where(.swal2-icon) .swal2-icon-content{display:flex;align-items:center;font-size:3.75em}div:where(.swal2-icon).swal2-error{border-color:#f27474;color:#f27474}div:where(.swal2-icon).swal2-error .swal2-x-mark{position:relative;flex-grow:1}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line]{display:block;position:absolute;top:2.3125em;width:2.9375em;height:.3125em;border-radius:.125em;background-color:#f27474}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left]{left:1.0625em;transform:rotate(45deg)}div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right]{right:1em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-error.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-error.swal2-icon-show .swal2-x-mark{animation:swal2-animate-error-x-mark .5s}div:where(.swal2-icon).swal2-warning{border-color:#f8bb86;color:#f8bb86}div:where(.swal2-icon).swal2-warning.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-warning.swal2-icon-show .swal2-icon-content{animation:swal2-animate-i-mark .5s}div:where(.swal2-icon).swal2-info{border-color:#3fc3ee;color:#3fc3ee}div:where(.swal2-icon).swal2-info.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-info.swal2-icon-show .swal2-icon-content{animation:swal2-animate-i-mark .8s}div:where(.swal2-icon).swal2-question{border-color:#87adbd;color:#87adbd}div:where(.swal2-icon).swal2-question.swal2-icon-show{animation:swal2-animate-error-icon .5s}div:where(.swal2-icon).swal2-question.swal2-icon-show .swal2-icon-content{animation:swal2-animate-question-mark .8s}div:where(.swal2-icon).swal2-success{border-color:#a5dc86;color:#a5dc86}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line]{position:absolute;width:3.75em;height:7.5em;border-radius:50%}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left]{top:-0.4375em;left:-2.0635em;transform:rotate(-45deg);transform-origin:3.75em 3.75em;border-radius:7.5em 0 0 7.5em}div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right]{top:-0.6875em;left:1.875em;transform:rotate(-45deg);transform-origin:0 3.75em;border-radius:0 7.5em 7.5em 0}div:where(.swal2-icon).swal2-success .swal2-success-ring{position:absolute;z-index:2;top:-0.25em;left:-0.25em;box-sizing:content-box;width:100%;height:100%;border:.25em solid rgba(165,220,134,.3);border-radius:50%}div:where(.swal2-icon).swal2-success .swal2-success-fix{position:absolute;z-index:1;top:.5em;left:1.625em;width:.4375em;height:5.625em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-success [class^=swal2-success-line]{display:block;position:absolute;z-index:2;height:.3125em;border-radius:.125em;background-color:#a5dc86}div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip]{top:2.875em;left:.8125em;width:1.5625em;transform:rotate(45deg)}div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long]{top:2.375em;right:.5em;width:2.9375em;transform:rotate(-45deg)}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-tip{animation:swal2-animate-success-line-tip .75s}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-line-long{animation:swal2-animate-success-line-long .75s}div:where(.swal2-icon).swal2-success.swal2-icon-show .swal2-success-circular-line-right{animation:swal2-rotate-success-circular-line 4.25s ease-in}[class^=swal2]{-webkit-tap-highlight-color:rgba(0,0,0,0)}.swal2-show{animation:var(--swal2-show-animation)}.swal2-hide{animation:var(--swal2-hide-animation)}.swal2-noanimation{transition:none}.swal2-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}.swal2-rtl .swal2-close{margin-right:initial;margin-left:0}.swal2-rtl .swal2-timer-progress-bar{right:0;left:auto}.swal2-toast{box-sizing:border-box;grid-column:1/4 !important;grid-row:1/4 !important;grid-template-columns:min-content auto min-content;padding:1em;overflow-y:hidden;border:var(--swal2-toast-border);background:var(--swal2-background);box-shadow:var(--swal2-toast-box-shadow);pointer-events:auto}.swal2-toast>*{grid-column:2}.swal2-toast h2:where(.swal2-title){margin:.5em 1em;padding:0;font-size:1em;text-align:initial}.swal2-toast .swal2-loading{justify-content:center}.swal2-toast input:where(.swal2-input){height:2em;margin:.5em;font-size:1em}.swal2-toast .swal2-validation-message{font-size:1em}.swal2-toast div:where(.swal2-footer){margin:.5em 0 0;padding:.5em 0 0;font-size:.8em}.swal2-toast button:where(.swal2-close){grid-column:3/3;grid-row:1/99;align-self:center;width:.8em;height:.8em;margin:0;font-size:2em}.swal2-toast div:where(.swal2-html-container){margin:.5em 1em;padding:0;overflow:initial;font-size:1em;text-align:initial}.swal2-toast div:where(.swal2-html-container):empty{padding:0}.swal2-toast .swal2-loader{grid-column:1;grid-row:1/99;align-self:center;width:2em;height:2em;margin:.25em}.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;width:2em;min-width:2em;height:2em;margin:0 .5em 0 0}.swal2-toast .swal2-icon .swal2-icon-content{display:flex;align-items:center;font-size:1.8em;font-weight:bold}.swal2-toast .swal2-icon.swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line]{top:.875em;width:1.375em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left]{left:.3125em}.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right]{right:.3125em}.swal2-toast div:where(.swal2-actions){justify-content:flex-start;height:auto;margin:0;margin-top:.5em;padding:0 .5em}.swal2-toast button:where(.swal2-styled){margin:.25em .5em;padding:.4em .6em;font-size:1em}.swal2-toast .swal2-success{border-color:#a5dc86}.swal2-toast .swal2-success [class^=swal2-success-circular-line]{position:absolute;width:1.6em;height:3em;border-radius:50%}.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left]{top:-0.8em;left:-0.5em;transform:rotate(-45deg);transform-origin:2em 2em;border-radius:4em 0 0 4em}.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right]{top:-0.25em;left:.9375em;transform-origin:0 1.5em;border-radius:0 4em 4em 0}.swal2-toast .swal2-success .swal2-success-ring{width:2em;height:2em}.swal2-toast .swal2-success .swal2-success-fix{top:0;left:.4375em;width:.4375em;height:2.6875em}.swal2-toast .swal2-success [class^=swal2-success-line]{height:.3125em}.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip]{top:1.125em;left:.1875em;width:.75em}.swal2-toast .swal2-success [class^=swal2-success-line][class$=long]{top:.9375em;right:.1875em;width:1.375em}.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip{animation:swal2-toast-animate-success-line-tip .75s}.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long{animation:swal2-toast-animate-success-line-long .75s}.swal2-toast.swal2-show{animation:var(--swal2-toast-show-animation)}.swal2-toast.swal2-hide{animation:var(--swal2-toast-hide-animation)}@keyframes swal2-show{0%{transform:translate3d(0, -50px, 0) scale(0.9);opacity:0}100%{transform:translate3d(0, 0, 0) scale(1);opacity:1}}@keyframes swal2-hide{0%{transform:translate3d(0, 0, 0) scale(1);opacity:1}100%{transform:translate3d(0, -50px, 0) scale(0.9);opacity:0}}@keyframes swal2-animate-success-line-tip{0%{top:1.1875em;left:.0625em;width:0}54%{top:1.0625em;left:.125em;width:0}70%{top:2.1875em;left:-0.375em;width:3.125em}84%{top:3em;left:1.3125em;width:1.0625em}100%{top:2.8125em;left:.8125em;width:1.5625em}}@keyframes swal2-animate-success-line-long{0%{top:3.375em;right:2.875em;width:0}65%{top:3.375em;right:2.875em;width:0}84%{top:2.1875em;right:0;width:3.4375em}100%{top:2.375em;right:.5em;width:2.9375em}}@keyframes swal2-rotate-success-circular-line{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}@keyframes swal2-animate-error-x-mark{0%{margin-top:1.625em;transform:scale(0.4);opacity:0}50%{margin-top:1.625em;transform:scale(0.4);opacity:0}80%{margin-top:-0.375em;transform:scale(1.15)}100%{margin-top:0;transform:scale(1);opacity:1}}@keyframes swal2-animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0deg);opacity:1}}@keyframes swal2-rotate-loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes swal2-animate-question-mark{0%{transform:rotateY(-360deg)}100%{transform:rotateY(0)}}@keyframes swal2-animate-i-mark{0%{transform:rotateZ(45deg);opacity:0}25%{transform:rotateZ(-25deg);opacity:.4}50%{transform:rotateZ(15deg);opacity:.8}75%{transform:rotateZ(-5deg);opacity:1}100%{transform:rotateX(0);opacity:1}}@keyframes swal2-toast-show{0%{transform:translateY(-0.625em) rotateZ(2deg)}33%{transform:translateY(0) rotateZ(-2deg)}66%{transform:translateY(0.3125em) rotateZ(2deg)}100%{transform:translateY(0) rotateZ(0deg)}}@keyframes swal2-toast-hide{100%{transform:rotateZ(1deg);opacity:0}}@keyframes swal2-toast-animate-success-line-tip{0%{top:.5625em;left:.0625em;width:0}54%{top:.125em;left:.125em;width:0}70%{top:.625em;left:-0.25em;width:1.625em}84%{top:1.0625em;left:.75em;width:.5em}100%{top:1.125em;left:.1875em;width:.75em}}@keyframes swal2-toast-animate-success-line-long{0%{top:1.625em;right:1.375em;width:0}65%{top:1.25em;right:.9375em;width:0}84%{top:.9375em;right:0;width:1.125em}100%{top:.9375em;right:.1875em;width:1.375em}}
:root { --bg: #071016; --panel: #0d1b22; --panel-2: #102431; --line: rgba(185, 224, 242, .13); --text: #e7f3f6; --muted: #8ea8b1; --accent: #38bdf8; --blue: #73b7ff; --warm: #f2b47d; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Rubik, sans-serif; }
input::placeholder, textarea::placeholder { color: #6b7e91; opacity: 1; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
.site-header { height: 82px; max-width: 1280px; padding: 0 36px; margin: auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; }
.brand { font-size: 24px; font-weight: 800; letter-spacing: -.07em; }
.site-logo { display: block; max-width: 132px; max-height: 38px; object-fit: contain; }
.brand span, em { color: var(--accent); font-style: normal; }
.site-header nav { display: flex; gap: 34px; margin-left: auto; margin-right: 42px; }
.site-header nav a { padding: 9px 13px; border-radius: 18px; color: var(--muted); font-size: 12px; font-weight: 600; transition: color .2s, background .2s; }
.site-header nav a:hover { color: #168ec5; }.site-header nav a.active { color: #116b9d; background: #e7f6ff; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.menu-toggle { border: 0; background: none; padding: 5px; }
.theme-switch { display: flex; align-items: center; padding: 4px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.72); box-shadow: 0 4px 14px rgba(15,40,28,.06); }.theme-switch button { width: 31px; height: 31px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8b99a5; }.theme-switch button.active { color: #152436; background: #fff; box-shadow: 0 3px 10px rgba(15,40,28,.1); }.theme-switch .material-symbols-rounded { font-size: 18px; }
.download-mini { display: inline-flex; align-items: center; gap: 18px; padding: 11px 18px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #1677d2, #25b9e8); font-size: 11px; font-weight: 800; box-shadow: 0 8px 20px rgba(22,119,210,.18); transition: transform .2s, box-shadow .2s; }.download-mini:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 11px 26px rgba(22,119,210,.25); }.download-mini .material-symbols-rounded { font-size: 17px; }
.menu-toggle { display: none; width: 38px; height: 38px; place-items: center; color: var(--text); }
.menu-toggle .material-symbols-rounded { font-size: 24px; }
.menu-toggle i { display: block; height: 1px; background: var(--text); margin: 6px 0; }
main { overflow: hidden; }
.hero, .section, .metrics, .contact-section { max-width: 1208px; margin: auto; }
.hero { min-height: 680px; padding: 120px 36px 100px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 60px; }
.eyebrow, .section-label { color: var(--accent); font: 500 11px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 9px; box-shadow: 0 0 0 5px rgba(56, 189, 248, .12); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 760px; margin: 24px 0; font-size: clamp(49px, 7vw, 92px); line-height: .98; letter-spacing: -.075em; font-weight: 700; }
.hero-lede { max-width: 610px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.hero-lede strong { color: var(--text); }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; gap: 26px; padding: 15px 19px; border-radius: 3px; font-size: 12px; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: #05211e; background: var(--accent); box-shadow: 0 12px 34px rgba(56, 189, 248, .12); }
.button span { font-size: 18px; }
.text-link { color: var(--muted); font: 12px 'DM Mono', monospace; }
.text-link:hover { color: var(--accent); }
.hero-visual { min-height: 390px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(115, 183, 255, .16); border-radius: 50%; transform: rotate(-25deg); }
.orbit-one { width: 370px; height: 180px; }
.orbit-two { width: 260px; height: 420px; transform: rotate(35deg); }
.terminal-card { position: relative; z-index: 1; width: min(100%, 390px); border: 1px solid var(--line); border-radius: 8px; background: rgba(13, 27, 34, .92); box-shadow: 0 30px 80px rgba(0,0,0,.3); transform: rotate(-4deg); }
.terminal-top { padding: 14px 17px; display: flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--line); color: #66808a; font: 11px 'DM Mono', monospace; }
.terminal-top span { width: 7px; height: 7px; border-radius: 50%; background: #e77f73; }.terminal-top span:nth-child(2) { background: #e9c46a; }.terminal-top span:nth-child(3) { background: var(--accent); }.terminal-top b { margin-left: 15px; font-weight: 400; }
.terminal-body { padding: 25px 23px 29px; font: 12px/2 'DM Mono', monospace; color: #99bbc3; }.terminal-body i { color: var(--accent); font-style: normal; }.terminal-body .success { color: var(--accent); }.progress { height: 4px; background: #1b343d; margin-top: 13px; }.progress span { display: block; width: 72%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--blue)); }
.float-chip { position: absolute; z-index: 2; padding: 10px 13px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); color: var(--text); font: 11px 'DM Mono', monospace; box-shadow: 0 10px 30px rgba(0,0,0,.2); }.chip-aws { top: 22%; right: 0; color: var(--blue); }.chip-waf { bottom: 20%; left: 0; color: var(--warm); }.chip-waf span { color: var(--accent); }
/* Keep the original demo portrait as the visual anchor of the hero. */
.hero-visual { min-height: 560px; background: url('/assets/imgs/pintraj.webp') center bottom / contain no-repeat; }
.hero-visual .terminal-card, .hero-visual .float-chip { display: none; }
.hero-visual .orbit { opacity: .35; }
.metrics { padding: 28px 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }.metrics div { display: flex; align-items: center; gap: 16px; border-right: 1px solid var(--line); padding: 0 27px; }.metrics div:first-child { padding-left: 0; }.metrics div:last-child { border: 0; }.metrics strong { color: var(--text); font-size: 28px; letter-spacing: -.06em; }.metrics span { color: var(--muted); font: 11px/1.5 'DM Mono', monospace; }
.section { padding: 140px 36px 0; }.section-label { padding-bottom: 24px; border-bottom: 1px solid var(--line); }.about-content, .experience-heading, .skills-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-top: 60px; }.section h2, .contact-section h2 { font-size: clamp(37px, 5vw, 62px); line-height: 1.03; letter-spacing: -.07em; }.about-text { max-width: 540px; color: var(--muted); font-size: 15px; line-height: 1.85; }.focus-list { display: grid; gap: 15px; margin-top: 35px; color: var(--accent); font: 11px 'DM Mono', monospace; }.focus-list b { color: var(--text); font-family: Rubik, sans-serif; font-weight: 500; margin-left: 18px; }
.experience-heading p, .skills-heading p { color: var(--muted); max-width: 380px; align-self: end; font-size: 14px; line-height: 1.7; }.timeline { margin-top: 70px; }.role { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 30px 0 47px; border-top: 1px solid var(--line); }.role-marker { color: var(--accent); font: 12px 'DM Mono', monospace; }.role-title { display: flex; justify-content: space-between; gap: 20px; }.role-title h3 { margin-bottom: 7px; font-size: 20px; letter-spacing: -.04em; }.role-title p, .role-title time { color: var(--muted); font-size: 12px; }.role-title time { font-family: 'DM Mono', monospace; white-space: nowrap; }.role ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 50px; padding: 20px 0 0; margin: 0; list-style: none; color: var(--muted); font-size: 13px; line-height: 1.6; }.role li::before { content: '↳'; color: var(--accent); margin-right: 9px; }.current { margin-left: 12px; padding: 4px 7px; color: var(--accent); border: 1px solid rgba(56,189,248,.3); border-radius: 3px; font: 9px 'DM Mono', monospace; text-transform: uppercase; vertical-align: middle; }
.skills-section { padding-bottom: 140px; }.skill-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 70px; }.skill-card { padding: 25px; border: 1px solid var(--line); background: rgba(13,27,34,.5); min-height: 170px; }.skill-card h3 { color: var(--text); font-size: 14px; }.skill-card div { display: flex; flex-wrap: wrap; gap: 8px; }.skill-card span { padding: 7px 9px; background: var(--panel-2); color: var(--muted); font: 10px 'DM Mono', monospace; }
.contact-section { margin-top: 40px; padding: 90px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; border-top: 1px solid var(--line); }.contact-section h2 { margin: 20px 0 0; }.contact-side { padding-top: 38px; max-width: 390px; }.contact-side > p:first-child { color: var(--muted); line-height: 1.7; font-size: 14px; margin-bottom: 28px; }.phone { margin-top: 25px; color: var(--muted); font: 12px 'DM Mono', monospace; }.site-footer { max-width: 1208px; margin: auto; padding: 25px 36px 40px; display: flex; justify-content: space-between; color: var(--muted); font: 10px 'DM Mono', monospace; }.site-footer > span:first-child { color: var(--text); font: 800 18px Rubik, sans-serif; letter-spacing: -.06em; }.site-footer > span:first-child span { color: var(--accent); }.scroll-top { position: fixed; right: 24px; bottom: 24px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--accent); }
.resume-light { --bg: #f8fcff; --panel: #fff; --panel-2: #eaf6ff; --line: rgba(7, 16, 22, .11); --text: #101c2b; --muted: #647381; }.resume-light .site-header { background: rgba(255,255,255,.72); }.resume-light .hero { background: radial-gradient(circle at 78% 42%, rgba(190,232,255,.7), transparent 34%); }.resume-light .hero-visual { filter: saturate(.92); }.resume-light .skill-card { background: linear-gradient(145deg, #fff, #edf8ff); }.resume-light .metrics { background: rgba(255,255,255,.65); }.resume-light .focus-list span { background: rgba(255,255,255,.8); }.resume-light .button-primary { background: #168ec5; color: #fff; }.resume-light .terminal-card { background: rgba(255,255,255,.9); }
.resume-light .brand { color: #101c2b; }.resume-light .brand span { color: #168ec5; }
body:not(.resume-light) .theme-switch { background: rgba(16,35,43,.8); } body:not(.resume-light) .theme-switch button.active { color: var(--accent); background: #172c35; }

/* Professional sky-blue hero */
.hero { grid-template-columns: 1.02fr .98fr; gap: 34px; padding-top: 80px; padding-bottom: 70px; }.hero-copy { position: relative; z-index: 3; }.hero h1 { max-width: 720px; margin: 24px 0 28px; font-size: clamp(58px, 6.4vw, 86px); line-height: .93; letter-spacing: -.075em; }.hero h1 em { color: #3da9d6; }.hero-lede { max-width: 650px; font-size: 18px; line-height: 1.72; }.hero .eyebrow { color: #278bb9; }.hero .status-dot { background: #48b9dc; box-shadow: 0 0 0 6px rgba(72,185,220,.13); }.hero .button-primary { background: linear-gradient(135deg, #218fbd, #48b9dc); box-shadow: 0 12px 30px rgba(39,153,198,.2); }.hero .text-link { display: inline-flex; align-items: center; gap: 12px; color: #405d70; font-weight: 700; }.hero .text-link .material-symbols-rounded, .hero .button .material-symbols-rounded { font-size: 18px; }.hero-social { display: flex; gap: 10px; margin-top: 22px; }.hero-social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(27,113,151,.12); border-radius: 8px; background: rgba(255,255,255,.86); color: #173247; font: 800 11px Rubik, sans-serif; box-shadow: 0 6px 16px rgba(36,110,145,.07); }.hero-social a:hover { color: #238fbd; transform: translateY(-2px); }.hero-social .material-symbols-rounded { font-size: 18px; }
.resume-light .hero { background: radial-gradient(circle at 79% 45%, rgba(160,224,248,.6), transparent 32%), linear-gradient(110deg, #fff 0%, #fbfeff 50%, #edf9fd 100%); }.resume-light .hero-visual { min-height: 590px; background: none; filter: none; isolation: isolate; }.hero-visual::before { content: ''; position: absolute; z-index: 0; inset: 6% 0 3% 3%; border-radius: 44% 56% 35% 65% / 44% 35% 65% 56%; background: linear-gradient(145deg, rgba(201,239,252,.8), rgba(117,207,239,.3)); transform: rotate(-5deg); }.hero-visual::after { content: ''; position: absolute; z-index: 1; inset: 0; background: url('/assets/imgs/pintraj.webp') center bottom / contain no-repeat; }.hero-visual .orbit { z-index: 0; border-color: rgba(57,157,200,.17); }.hero-badge { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid rgba(28,119,157,.09); border-radius: 12px; background: rgba(255,255,255,.92); color: #294354; box-shadow: 0 15px 35px rgba(30,110,145,.1); backdrop-filter: blur(8px); }.hero-badge .material-symbols-rounded { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: #e4f5fc; color: #258fc0; font-size: 21px; font-variation-settings: 'FILL' 1, 'wght' 600; }.hero-badge b { font-size: 9px; line-height: 1.35; }.badge-cloud { top: 16%; left: 2%; }.badge-scale { top: 22%; right: -4%; }.badge-security { bottom: 24%; left: -5%; }.badge-reliable { right: -7%; bottom: 27%; }.badge-reliable .material-symbols-rounded { color: #328aa2; background: #e6f8fb; }
@media (max-width: 800px) { .hero { padding-top: 70px; }.hero h1 { font-size: clamp(52px, 13vw, 72px); }.hero-lede { font-size: 16px; }.resume-light .hero-visual { min-height: 500px; }.badge-scale, .badge-reliable { right: 0; }.badge-security { left: 0; } }
@media (max-width: 470px) { .hero h1 { font-size: 49px; }.resume-light .hero-visual { min-height: 400px; }.hero-badge { padding: 9px; }.hero-badge .material-symbols-rounded { width: 28px; height: 28px; font-size: 17px; }.hero-badge b { font-size: 8px; }.badge-scale { top: 18%; }.badge-security { bottom: 18%; }.badge-reliable { bottom: 12%; } }
.lead-form { display: grid; gap: 11px; }.lead-form input, .lead-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 13px; background: var(--panel); color: var(--text); font: 12px Rubik, sans-serif; resize: vertical; outline: none; }.lead-form input:focus, .lead-form textarea:focus { border-color: var(--accent); }.lead-form .button { justify-content: space-between; cursor: pointer; }.contact-copy { max-width: 380px; margin-top: 25px; color: var(--muted); line-height: 1.7; }.contact-error { color: #ff9d91; font-size: 12px; }

/* White portfolio body layout */
.resume-light .about-section, .resume-light .experience-section { color: var(--text); }
.about-content { grid-template-columns: .95fr 1.05fr; align-items: center; gap: 70px; }
.about-copy h2 { margin-bottom: 26px; }.about-copy .about-text { max-width: 470px; font-size: 12px; line-height: 1.7; }.about-copy .about-text p { margin-bottom: 15px; }.about-button { margin-top: 10px; padding: 11px 15px; font-size: 10px; }
.about-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }.about-features article { min-height: 150px; position: relative; padding: 18px; border: 1px solid rgba(7,16,22,.07); border-radius: 8px; background: rgba(255,255,255,.8); box-shadow: 0 8px 25px rgba(29,103,154,.06); }.about-features article:nth-child(2) .feature-icon { color: #4077f2; background: #e4edff; }.about-features article:nth-child(2) .feature-arrow { color: #4077f2; background: #edf2ff; }.about-features article:nth-child(3) .feature-icon { color: #ee4f89; background: #ffe5ef; }.about-features article:nth-child(3) .feature-arrow { color: #ee4f89; background: #fff0f5; }.about-features article:nth-child(4) .feature-icon { color: #7a36e8; background: #eee3ff; }.about-features article:nth-child(4) .feature-arrow { color: #7a36e8; background: #f5efff; }.feature-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; color: #168ec5; background: #dff4ff; font-size: 24px; font-variation-settings: 'FILL' 1, 'wght' 600; }.feature-arrow { position: absolute; top: 18px; right: 17px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e5f6ff; color: #168ec5; font-size: 16px; font-variation-settings: 'wght' 700; }.about-features h3 { margin: 15px 0 5px; font-size: 11px; letter-spacing: -.02em; }.about-features p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.experience-section { display: grid; grid-template-columns: .55fr 1.45fr; column-gap: 65px; }.experience-section > .section-label { grid-column: 1 / -1; }.experience-heading { display: block; padding-top: 58px; }.experience-heading h2 { margin-bottom: 24px; }.experience-heading p { max-width: 270px; font-size: 12px; line-height: 1.6; }.experience-button { display: inline-flex; align-items: center; gap: 22px; margin-top: 22px; padding: 12px 16px; border: 1px solid #32aee0; border-radius: 7px; background: #fff; color: var(--text); font-size: 10px; font-weight: 800; }.experience-button:hover { color: #168ec5; box-shadow: 0 8px 20px rgba(22,119,210,.1); }.experience-button .material-symbols-rounded { font-size: 16px; }.timeline { grid-column: 2; grid-row: 2; margin-top: 58px; padding-left: 44px; position: relative; }.timeline::before { content: ''; position: absolute; top: 18px; bottom: 35px; left: 11px; width: 1px; background: linear-gradient(#2aaee3, rgba(42,174,227,.18)); }.role { grid-template-columns: 48px 1fr; gap: 18px; padding: 10px 0 25px; border-top: 0; position: relative; }.role::before { content: ''; position: absolute; left: -38px; top: 25px; width: 10px; height: 10px; border-radius: 50%; background: #32aee0; box-shadow: 0 0 0 5px #e4f6ff; }.role-marker { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(38,116,179,.12); border-radius: 8px; background: linear-gradient(145deg, #f8fbff, #eaf6ff); font-size: 0; box-shadow: 0 7px 18px rgba(29,103,154,.05); }.role-marker::before { font-size: 24px; color: #4186ef; }.role:nth-child(1) .role-marker::before { color: #397ff1; }.role:nth-child(2) .role-marker::before { color: #4aa8d8; }.role:nth-child(3) .role-marker::before { color: #ef5c85; }.role:nth-child(4) .role-marker::before { color: #7c53df; }.role-title h3 { margin-bottom: 4px; font-size: 14px; }.role-title p, .role-title time { font-size: 10px; }.role ul { grid-template-columns: 1fr; gap: 5px; padding-top: 10px; font-size: 10px; line-height: 1.4; }.role li::before { margin-right: 6px; color: #32aee0; }.current { padding: 3px 6px; border: 0; border-radius: 8px; background: #dff4ff; color: #116f9e; font-size: 8px; }
@media (max-width: 800px) { .about-content, .experience-section { display: block; }.about-features { margin-top: 35px; }.experience-heading { padding-top: 45px; }.timeline { margin-top: 42px; }.experience-section .section-label { display: flex; } }
@media (max-width: 470px) { .about-features { grid-template-columns: 1fr; }.about-features article { min-height: 120px; } }

/* Lower-page tools, contact CTA and blog cards */
.skills-section { grid-template-columns: .75fr 1.25fr; padding-top: 110px; padding-bottom: 85px; }.skills-section .section-label { color: #168ec5; }.skills-section .section-label::before { color: #168ec5; }.skills-heading { padding-top: 48px; }.skills-heading h2 { margin: 0 0 20px; font-size: clamp(34px, 4vw, 52px); }.skills-heading p { max-width: 300px; font-size: 11px; line-height: 1.6; }.tech-grid { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 48px; }.tech-item { min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(7,16,22,.06); border-radius: 7px; background: rgba(255,255,255,.82); box-shadow: 0 6px 18px rgba(29,103,154,.05); transition: transform .2s, box-shadow .2s; }.tech-item:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(29,103,154,.1); }.tech-item .material-symbols-rounded { color: #168ec5; font-size: 24px; }.tech-item b { color: var(--text); font: 9px 'DM Mono', monospace; }
.tech-item .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 600; }.tech-item:nth-child(1) .material-symbols-rounded { color: #f59d24; }.tech-item:nth-child(2) .material-symbols-rounded { color: #326ce5; }.tech-item:nth-child(3) .material-symbols-rounded { color: #7b42bc; }.tech-item:nth-child(4) .material-symbols-rounded { color: #2496ed; }.tech-item:nth-child(5) .material-symbols-rounded { color: #f05a34; }.tech-item:nth-child(6) .material-symbols-rounded { color: #3477a9; }.tech-item:nth-child(7) .material-symbols-rounded { color: #22b8e6; }.tech-item:nth-child(8) .material-symbols-rounded { color: #1b2632; }.tech-item:nth-child(9) .material-symbols-rounded { color: #ea4d7a; }.tech-item:nth-child(10) .material-symbols-rounded { color: #f46800; }.tech-item:nth-child(11) .material-symbols-rounded { color: #36a2b5; }.tech-item:nth-child(12) .material-symbols-rounded { color: #e6522c; }
.resume-light .contact-section { max-width: 1136px; min-height: 295px; margin: 15px auto 0; padding: 48px 48px; border: 1px solid rgba(22,119,210,.1); border-radius: 18px; background: #e7f7ff url('/assets/imgs/cta-mountains.svg') center / cover no-repeat; position: relative; overflow: hidden; box-shadow: 0 18px 45px rgba(29,103,154,.08); }.resume-light .contact-section::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 40%, transparent 67%); pointer-events: none; }.resume-light .contact-section > div { position: relative; z-index: 1; }.resume-light .contact-section h2 { font-size: clamp(34px, 4vw, 52px); }.resume-light .contact-side { position: relative; z-index: 1; padding-top: 0; }.resume-light .contact-side > .phone { color: #116f9e; }.resume-light .contact-section .eyebrow { color: #116f9e; }.resume-light .lead-form { max-width: 390px; }.resume-light .lead-form input, .resume-light .lead-form textarea { border-color: rgba(27,131,184,.15); background: rgba(255,255,255,.88); }.resume-light .lead-form .button { background: #168ec5; }
.blog-preview { max-width: 1208px; margin: auto; padding: 55px 36px 65px; }.blog-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }.blog-heading .section-label { margin: 0 0 9px; padding: 0; border: 0; color: var(--text); font-family: Rubik, sans-serif; font-size: 14px; font-weight: 800; letter-spacing: -.03em; }.blog-heading .section-label::before { content: 'article'; color: #168ec5; font-size: 18px; }.blog-heading p:last-child { margin: 0; color: var(--muted); font-size: 11px; }.blog-heading > a { color: var(--text); font: 10px 'DM Mono', monospace; }.blog-heading > a span { color: #168ec5; font-size: 16px; }.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 22px; }.blog-grid article { display: grid; grid-template-columns: 92px 1fr; gap: 13px; padding: 9px; border: 1px solid rgba(7,16,22,.06); border-radius: 8px; background: #fff; box-shadow: 0 7px 22px rgba(29,103,154,.06); }.blog-art { display: grid; place-items: center; min-height: 90px; border-radius: 5px; color: #fff; background: linear-gradient(145deg, #76aff1, #173e75); }.blog-art-2 { background: linear-gradient(145deg, #4a9ad0, #122b56); }.blog-art-3 { background: linear-gradient(145deg, #48c6ef, #3155c6); }.blog-art .material-symbols-rounded { font-size: 30px; }.blog-grid time { color: var(--muted); font: 8px 'DM Mono', monospace; }.blog-grid h3 { margin: 5px 0; color: var(--text); font-size: 11px; line-height: 1.25; }.blog-grid p { margin: 0 0 9px; color: var(--muted); font-size: 9px; line-height: 1.35; }.blog-grid article a { color: #168ec5; font: 9px 'DM Mono', monospace; font-weight: 700; }
@media (max-width: 800px) { .skills-section { display: block; }.tech-grid { grid-template-columns: repeat(4, 1fr); padding-top: 35px; }.resume-light .contact-section { padding: 55px 20px; }.blog-preview { padding: 50px 20px; }.blog-grid { grid-template-columns: 1fr; } }
@media (max-width: 470px) { .tech-grid { grid-template-columns: repeat(3, 1fr); }.tech-item { min-height: 70px; }.blog-heading { display: block; }.blog-heading > a { display: inline-block; margin-top: 15px; } }
@media (max-width: 800px) { .site-header { padding: 0 20px; }.site-header nav { display: none; position: absolute; top: 70px; left: 15px; right: 15px; z-index: 10; padding: 20px; margin: 0; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 45px rgba(0,0,0,.12); }.site-header nav.is-open { display: flex; }.site-header nav a { padding: 12px 14px; }.menu-toggle { display: grid; }.download-mini { display: none; }.hero { padding: 80px 20px 70px; grid-template-columns: 1fr; }.hero-visual { min-height: 300px; }.orbit-one { width: 310px; }.orbit-two { height: 330px; }.metrics { padding: 0 20px; grid-template-columns: 1fr 1fr; }.metrics div, .metrics div:first-child { padding: 20px 10px; border-bottom: 1px solid var(--line); }.metrics div:nth-child(2) { border-right: 0; }.metrics div:nth-child(3), .metrics div:nth-child(4) { border-bottom: 0; }.section { padding: 90px 20px 0; }.about-content, .experience-heading, .skills-heading, .contact-section { grid-template-columns: 1fr; gap: 20px; }.role { grid-template-columns: 40px 1fr; }.role-title { display: block; }.role-title time { display: block; margin-top: 14px; }.role ul { grid-template-columns: 1fr; }.skill-grid { grid-template-columns: 1fr 1fr; margin-top: 45px; }.contact-section { padding: 80px 20px; }.site-footer { padding: 25px 20px 35px; display: block; line-height: 2; } }
@media (max-width: 470px) { h1 { font-size: 46px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; }.float-chip { font-size: 9px; }.chip-aws { right: -6px; }.chip-waf { left: -6px; }.skill-grid { grid-template-columns: 1fr; }.metrics strong { font-size: 23px; } }

/* Material-inspired visual system for the resume sections. */
.material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-feature-settings: 'liga'; font-size: 22px; line-height: 1; }
.metrics div::before { font-family: 'Material Symbols Rounded'; font-feature-settings: 'liga'; font-size: 25px; color: var(--accent); }
.metrics div:nth-child(1)::before { content: 'history'; }.metrics div:nth-child(2)::before { content: 'cloud'; }.metrics div:nth-child(3)::before { content: 'savings'; }.metrics div:nth-child(4)::before { content: 'shield_lock'; }
.section-label { display: flex; align-items: center; gap: 10px; }.section-label::before { font-family: 'Material Symbols Rounded'; font-feature-settings: 'liga'; font-size: 20px; color: var(--accent); }.about-section .section-label::before { content: 'engineering'; }.experience-section .section-label::before { content: 'work_history'; }.skills-section .section-label::before { content: 'construction'; }
.focus-list { gap: 11px; }.focus-list span { display: flex; align-items: center; padding: 13px 14px; border: 1px solid var(--line); background: rgba(13,27,34,.4); border-radius: 4px; }.focus-list span::before { font-family: 'Material Symbols Rounded'; font-feature-settings: 'liga'; font-size: 18px; margin-right: 10px; }.focus-list span:nth-child(1)::before { content: 'verified_user'; }.focus-list span:nth-child(2)::before { content: 'smart_toy'; }.focus-list span:nth-child(3)::before { content: 'trending_up'; }
.role-marker { display: flex; align-items: flex-start; gap: 7px; }.role-marker::before { font-family: 'Material Symbols Rounded'; font-feature-settings: 'liga'; font-size: 18px; }.role:nth-child(1) .role-marker::before { content: 'security'; }.role:nth-child(2) .role-marker::before { content: 'cloud_queue'; }.role:nth-child(3) .role-marker::before { content: 'monitor_heart'; }.role:nth-child(4) .role-marker::before { content: 'code'; }
.skill-card { position: relative; background: linear-gradient(145deg, rgba(16,35,43,.82), rgba(13,27,34,.42)); border-radius: 6px; box-shadow: 0 14px 30px rgba(0,0,0,.08); transition: transform .2s, border-color .2s; }.skill-card:hover { transform: translateY(-5px); border-color: rgba(56,189,248,.45); }.skill-card h3 { display: flex; align-items: center; gap: 9px; }.skill-card h3::before { font-family: 'Material Symbols Rounded'; font-feature-settings: 'liga'; color: var(--accent); font-size: 21px; }.skill-card:nth-child(1) h3::before { content: 'cloud'; }.skill-card:nth-child(2) h3::before { content: 'shield'; }.skill-card:nth-child(3) h3::before { content: 'security'; }.skill-card:nth-child(4) h3::before { content: 'monitoring'; }.skill-card:nth-child(5) h3::before { content: 'automation'; }.skill-card:nth-child(6) h3::before { content: 'lan'; }.skill-card span { border-radius: 3px; }

/* Toolkit redesign: a compact capability map with stronger hierarchy. */
.skills-section { display: grid; grid-template-columns: .72fr 1.28fr; column-gap: 76px; align-items: start; }
.skills-section > .section-label { grid-column: 1 / -1; }
.skills-heading { display: block; padding-top: 58px; position: sticky; top: 100px; }
.skills-heading h2 { margin-bottom: 25px; }
.skills-heading p { max-width: 310px; }
.skill-grid { grid-column: 2; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 58px; }
.skill-card { min-height: 206px; padding: 27px 25px 24px; overflow: hidden; }
.skill-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent); opacity: .7; }
.skill-card::after { position: absolute; top: 22px; right: 22px; color: rgba(142,168,177,.35); font: 11px 'DM Mono', monospace; }
.skill-card:nth-child(1)::after { content: '01'; }.skill-card:nth-child(2)::after { content: '02'; }.skill-card:nth-child(3)::after { content: '03'; }.skill-card:nth-child(4)::after { content: '04'; }.skill-card:nth-child(5)::after { content: '05'; }.skill-card:nth-child(6)::after { content: '06'; }
.skill-card h3 { margin: 0 0 27px; font-size: 15px; }
.skill-card h3::before { font-size: 25px; }
.skill-card div { max-width: 290px; gap: 7px; }
.skill-card span { padding: 8px 10px; font-size: 10px; border: 1px solid rgba(185,224,242,.05); }
.resume-light .skill-card { background: linear-gradient(145deg, #fff, #edf8ff); }
@media (max-width: 800px) { .skills-section { display: block; }.skills-heading { position: static; padding-top: 45px; }.skill-grid { grid-template-columns: 1fr 1fr; margin-top: 42px; }.skill-card { min-height: 180px; } }
@media (max-width: 470px) { .skill-grid { grid-template-columns: 1fr; } }

/* React admin workspace */
.admin-shell { min-height: 100vh; background: #071016; color: #e7f3f6; padding: 32px; font-family: Rubik, sans-serif; }
.admin-login-card { width: min(430px, 100%); margin: 9vh auto; padding: 40px; border: 1px solid rgba(185,224,242,.15); border-radius: 18px; background: linear-gradient(145deg, #10232b, #0b1820); box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.admin-kicker { margin: 48px 0 12px; color: var(--accent); font: 11px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.admin-login-card h1, .admin-heading h1 { margin: 0 0 10px; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.07em; }
.admin-muted { color: var(--muted); line-height: 1.7; }
.admin-form { display: grid; gap: 18px; margin-top: 30px; }
.admin-form label { display: grid; gap: 8px; color: var(--text); font-size: 12px; font-weight: 700; }
.admin-form input { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: rgba(7,16,22,.55); color: var(--text); font: 14px 'DM Mono', monospace; outline: none; }
.admin-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,189,248,.12); }
.admin-button { border: 0; border-radius: 7px; padding: 14px 18px; background: var(--accent); color: #05211e; font-weight: 800; cursor: pointer; }
.admin-button:disabled { cursor: wait; opacity: .6; }
.admin-back, .admin-logout { color: var(--muted); font: 11px 'DM Mono', monospace; }
.admin-back { display: block; margin-top: 26px; }.admin-back:hover, .admin-logout:hover { color: var(--accent); }
.admin-error { padding: 12px; border: 1px solid rgba(231,127,115,.4); border-radius: 7px; background: rgba(231,127,115,.1); color: #ffb1a5; font-size: 12px; }
.admin-dashboard { padding: 0; }.admin-topbar { max-width: 1180px; margin: auto; padding: 28px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.admin-topbar .brand { color: var(--text); }.admin-user { margin-right: 20px; color: var(--muted); font: 11px 'DM Mono', monospace; }.admin-logout { border: 0; background: none; cursor: pointer; }
.admin-layout { max-width: 1180px; margin: auto; display: grid; grid-template-columns: 210px 1fr; gap: 54px; }.admin-sidebar { padding-top: 62px; border-right: 1px solid var(--line); min-height: calc(100vh - 111px); }.sidebar-label { color: var(--muted); font: 10px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 18px; }.sidebar-link { width: calc(100% - 24px); display: flex; align-items: center; gap: 10px; padding: 13px 12px; margin: 4px 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; text-align: left; cursor: pointer; }.sidebar-link:hover, .sidebar-link.active { color: var(--text); background: rgba(56,189,248,.09); }.sidebar-link.active { box-shadow: inset 3px 0 var(--accent); }.sidebar-link .material-symbols-rounded { font-size: 19px; color: var(--accent); }.admin-content { min-width: 0; padding: 86px 0 100px; }.admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); padding-bottom: 40px; }.admin-heading .admin-kicker { margin: 0 0 15px; }.admin-heading h1 { font-size: clamp(42px, 7vw, 78px); }.admin-refresh { background: transparent; border: 1px solid var(--line); color: var(--accent); }.admin-stat { display: flex; align-items: baseline; gap: 15px; padding: 45px 0 30px; }.admin-stat strong { font-size: 54px; letter-spacing: -.08em; }.admin-stat span { color: var(--muted); font: 11px 'DM Mono', monospace; }.admin-panel { margin-top: 45px; }.admin-panel-heading { margin-bottom: 28px; }.admin-panel-heading h2 { margin: 0; font-size: 28px; letter-spacing: -.06em; }.post-form { display: grid; gap: 18px; max-width: 720px; }.post-form label { display: grid; gap: 8px; color: var(--text); font-size: 12px; font-weight: 700; }.post-form input:not([type=checkbox]), .post-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 13px 14px; resize: vertical; background: rgba(16,35,43,.55); color: var(--text); font: 13px/1.6 Rubik, sans-serif; outline: none; }.post-form input:focus, .post-form textarea:focus { border-color: var(--accent); }.form-hint { color: var(--muted); font: 10px 'DM Mono', monospace; font-weight: 400; }.checkbox-label { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 10px !important; }.checkbox-label input { accent-color: var(--accent); }.admin-success { padding: 12px; border: 1px solid rgba(56,189,248,.4); border-radius: 7px; color: var(--accent); background: rgba(56,189,248,.08); font-size: 12px; }.admin-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }.admin-table-head, .admin-table-row { display: grid; grid-template-columns: 1fr 130px 150px; gap: 20px; align-items: center; padding: 18px 22px; }.admin-table-head { color: var(--muted); background: rgba(16,35,43,.6); font: 10px 'DM Mono', monospace; text-transform: uppercase; }.admin-table-row { border-top: 1px solid var(--line); font-size: 13px; }.admin-table-row strong { font-size: 14px; }.admin-table-row time, .published, .draft { color: var(--muted); font: 11px 'DM Mono', monospace; }.published { color: var(--accent); }.admin-empty { padding: 35px 22px; color: var(--muted); font-size: 13px; }.admin-loading { padding-top: 20vh; color: var(--muted); text-align: center; }
@media (max-width: 750px) { .admin-shell { padding: 20px; }.admin-login-card { margin: 4vh auto; padding: 28px 22px; }.admin-layout { display: block; }.admin-sidebar { min-height: auto; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; overflow-x: auto; }.sidebar-label { display: none; }.sidebar-link { width: auto; margin: 0; white-space: nowrap; }.sidebar-link span.material-symbols-rounded { display: none; }.admin-content { padding: 60px 0; }.admin-heading { display: block; }.admin-refresh { margin-top: 20px; }.admin-table-head, .admin-table-row { grid-template-columns: 1fr 90px; }.admin-table-head span:last-child, .admin-table-row time { display: none; }.admin-user { display: none; } }
.admin-resource-list { margin-top: 32px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }.admin-resource-row { display: flex; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid var(--line); font-size: 13px; }.admin-resource-row:last-child { border-bottom: 0; }.admin-resource-row span { max-width: 55%; overflow: hidden; color: var(--muted); font: 11px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }

/* Blue-only visual palette and dimensional icon system. */
.resume-light {
  --bg: #f8fcff;
  --panel: #fff;
  --panel-2: #eaf6ff;
}
.brand span,
.resume-light .brand span,
.site-footer > span:first-child span { color: #1498d4; }
.site-header nav a:hover { color: #147fb0; }
.site-header nav a.active { color: #116b9d; background: #e7f6ff; }
.site-header {
  position: sticky;
  top: 16px;
  width: calc(100% - 48px);
  height: auto;
  min-height: 64px;
  padding: 8px 18px;
  margin: 16px auto 0;
  border: 1px solid rgba(38, 125, 176, .16);
  border-radius: 19px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 14px 35px rgba(30, 96, 145, .12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-header .brand { padding-left: 3px; }
.download-mini,
.resume-light .button-primary,
.resume-light .lead-form .button {
  color: #fff;
  background: linear-gradient(135deg, #1677d2 0%, #25b9e8 100%);
  box-shadow: 0 10px 25px rgba(22, 119, 210, .22);
}
.download-mini:hover { box-shadow: 0 14px 30px rgba(22, 119, 210, .3); }
.resume-light .skill-card { background: linear-gradient(145deg, #fff, #edf8ff); }
.section-label,
.skills-section .section-label,
.skills-section .section-label::before,
.resume-light .contact-section .eyebrow,
.blog-heading .section-label::before,
.blog-heading > a span,
.blog-grid article a,
.resume-light .contact-side > .phone { color: #168ec5; }
.about-features article,
.tech-item,
.blog-grid article { box-shadow: 0 10px 28px rgba(29, 103, 154, .08); }
.experience-button { border-color: #32aee0; }
.experience-button:hover { color: #147fb0; box-shadow: 0 9px 22px rgba(29, 130, 190, .14); }
.timeline::before { background: linear-gradient(#2aaee3, rgba(42, 174, 227, .12)); }
.role::before { background: #29aee3; box-shadow: 0 0 0 5px #e4f6ff; }
.role li::before { color: #229ed4; }
.current { color: #116f9e; background: #dff4ff; }
.resume-light .contact-section {
  border-color: rgba(26, 145, 199, .14);
  background-color: #e7f7ff;
  box-shadow: 0 18px 45px rgba(23, 112, 169, .12);
}
.resume-light .lead-form input,
.resume-light .lead-form textarea { border-color: rgba(27, 131, 184, .18); }
.blog-art-3 { background: linear-gradient(145deg, #48c6ef, #3155c6); }

/* Raised, glossy icon surfaces create a compact 3D effect. */
.hero-badge .material-symbols-rounded,
.feature-icon,
.role-marker,
.tech-item .material-symbols-rounded,
.metrics div::before,
.section-label::before {
  color: #fff !important;
  background: linear-gradient(145deg, #71ddff 0%, #238dde 55%, #3159c8 100%);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: inset 2px 2px 4px rgba(255, 255, 255, .55), inset -3px -4px 7px rgba(22, 62, 153, .2), 0 8px 15px rgba(32, 118, 190, .2);
  text-shadow: 0 2px 3px rgba(12, 45, 107, .28);
}
.hero-badge .material-symbols-rounded,
.feature-icon,
.tech-item .material-symbols-rounded,
.metrics div::before,
.section-label::before { display: grid; place-items: center; }
.hero-badge .material-symbols-rounded { width: 38px; height: 38px; border-radius: 12px; }
.hero-badge:nth-of-type(2) .material-symbols-rounded,
.about-features article:nth-child(2) .feature-icon,
.tech-item:nth-child(3n + 2) .material-symbols-rounded {
  background: linear-gradient(145deg, #a5b4fc, #6366f1 54%, #4338ca 100%);
}
.hero-badge:nth-of-type(3) .material-symbols-rounded,
.about-features article:nth-child(3) .feature-icon,
.tech-item:nth-child(3n) .material-symbols-rounded {
  background: linear-gradient(145deg, #67e8f9, #0ea5e9 52%, #2563eb 100%);
}
.hero-badge:nth-of-type(4) .material-symbols-rounded,
.about-features article:nth-child(4) .feature-icon,
.tech-item:nth-child(4n) .material-symbols-rounded {
  background: linear-gradient(145deg, #c4b5fd, #8b5cf6 52%, #4f46e5 100%);
}
.feature-icon { width: 48px; height: 48px; border-radius: 15px; }
.feature-arrow,
.about-features article:nth-child(n) .feature-arrow { color: #168ec5; background: #e5f6ff; }
.role-marker {
  border-radius: 13px;
  background: linear-gradient(145deg, #8be5ff, #2a9fe0 55%, #315dcc 100%);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.6), inset -3px -4px 7px rgba(28,71,157,.22), 0 9px 18px rgba(36,116,184,.2);
}
.role-marker::before { color: #fff !important; text-shadow: 0 2px 3px rgba(11,45,102,.25); }
.metrics div::before { width: 43px; height: 43px; flex: 0 0 43px; border-radius: 14px; }
.section-label::before { width: 31px; height: 31px; border-radius: 10px; font-size: 17px; }
.tech-item { min-height: 94px; gap: 9px; }
.tech-item .material-symbols-rounded {
  width: 43px;
  height: 43px;
  border-radius: 13px;
  font-size: 23px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.tech-item:hover .material-symbols-rounded {
  transform: translateY(-3px) rotate(-3deg);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.58), inset -3px -4px 7px rgba(24,62,148,.22), 0 13px 22px rgba(28,108,181,.28);
}
.blog-art .material-symbols-rounded {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: inset 2px 2px 5px rgba(255,255,255,.28), 0 10px 20px rgba(5,32,92,.3);
  text-shadow: 0 3px 5px rgba(4,29,81,.34);
}
body:not(.resume-light) .theme-switch button.active { color: #38bdf8; }
.admin-form input:focus { box-shadow: 0 0 0 3px rgba(56, 189, 248, .14); }
.sidebar-link:hover,
.sidebar-link.active { background: rgba(56, 189, 248, .1); }
.admin-success { border-color: rgba(56, 189, 248, .4); background: rgba(56, 189, 248, .09); }

/* Larger Rubik typography for the experience timeline. */
.experience-heading p {
  max-width: 320px;
  font-size: 15px;
  line-height: 1.75;
}
.experience-button {
  padding: 14px 19px;
  font-size: 12px;
}
.role {
  padding-top: 13px;
  padding-bottom: 34px;
}
.role-title h3 {
  margin-bottom: 6px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.role-title p,
.role-title time {
  font-size: 13px;
  line-height: 1.5;
}
.role ul {
  gap: 8px;
  padding-top: 14px;
  font-size: 13px;
  line-height: 1.6;
}
.current {
  padding: 4px 8px;
  font-size: 9px;
}
@media (max-width: 800px) {
  .experience-heading p { font-size: 15px; }
  .role-title h3 { font-size: 17px; }
  .role-title p,
  .role-title time,
  .role ul { font-size: 13px; }
}

/* High-contrast typography for the light portfolio. */
.resume-light {
  --text: #080d18;
  --muted: #273343;
}
.resume-light .site-header nav a {
  color: #172131;
  font-size: 13px;
  font-weight: 500;
}
.resume-light .download-mini { font-size: 12px; }
.resume-light .hero-lede {
  color: #202b3a;
  font-size: 19px;
  font-weight: 400;
}
@media (max-width: 800px) {
  .site-header {
    top: 10px;
    width: calc(100% - 28px);
    min-height: 58px;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 16px;
  }
}
.resume-light .hero-badge {
  color: #0a1423;
  padding: 15px;
}
.resume-light .hero-badge b {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.resume-light .metrics span {
  color: #182435;
  font-family: Rubik, sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.resume-light .section-label {
  color: #117fae;
  font-size: 12px;
  font-weight: 600;
}
.resume-light .about-copy .about-text {
  color: #202b3a;
  font-size: 15px;
  line-height: 1.75;
}
.resume-light .about-features h3 {
  color: #080d18;
  font-size: 15px;
  font-weight: 700;
}
.resume-light .about-features p {
  color: #273343;
  font-size: 13px;
  line-height: 1.55;
}
.resume-light .about-button,
.resume-light .experience-button { font-size: 13px; }
.resume-light .experience-heading p,
.resume-light .skills-heading p,
.resume-light .role-title p,
.resume-light .role-title time,
.resume-light .role ul {
  color: #202b3a;
}
.resume-light .role-title h3 { font-size: 19px; }
.resume-light .role-title p,
.resume-light .role-title time { font-size: 14px; }
.resume-light .role ul {
  font-size: 14px;
  line-height: 1.65;
}
.resume-light .current {
  color: #075e8b;
  font-size: 10px;
  font-weight: 600;
}
.resume-light .skills-heading p {
  font-size: 15px;
  line-height: 1.7;
}
.resume-light .tech-item b {
  color: #080d18;
  font-family: Rubik, sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.resume-light .skill-card h3 { font-size: 16px; }
.resume-light .skill-card span {
  color: #162334;
  font-family: Rubik, sans-serif;
  font-size: 12px;
  font-weight: 500;
}
.resume-light .contact-side > p:first-child,
.resume-light .contact-copy {
  color: #202b3a;
  font-size: 15px;
}
.resume-light .lead-form input,
.resume-light .lead-form textarea { font-size: 14px; }
.resume-light .blog-heading p:last-child {
  color: #273343;
  font-size: 13px;
}
.resume-light .blog-heading > a { font-size: 12px; }
.resume-light .blog-grid time {
  color: #354052;
  font-size: 10px;
}
.resume-light .blog-grid h3 {
  color: #080d18;
  font-size: 14px;
  line-height: 1.35;
}
.resume-light .blog-grid p {
  color: #273343;
  font-size: 12px;
  line-height: 1.5;
}
.resume-light .blog-grid article a { font-size: 11px; }
.resume-light .site-footer {
  color: #273343;
  font-size: 12px;
}
@media (max-width: 800px) {
  .resume-light .hero-lede { font-size: 17px; }
  .resume-light .metrics span { font-size: 12px; }
  .resume-light .role-title h3 { font-size: 18px; }
  .resume-light .role-title p,
  .resume-light .role-title time,
  .resume-light .role ul { font-size: 13px; }
}

/* Professional, colorful technology cards. */
.tech-grid {
  gap: 14px;
}
.tech-item {
  --tool-a: #6edcff;
  --tool-b: #2563eb;
  --tool-glow: rgba(37, 99, 235, .16);
  min-height: 122px;
  padding: 16px 12px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(23, 64, 112, .09);
  border-radius: 16px;
  background: linear-gradient(145deg, #fff 12%, #f7fbff 100%);
  box-shadow: 0 12px 28px rgba(32, 76, 126, .09), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tech-item::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 110px;
  height: 110px;
  top: -70px;
  right: -48px;
  border-radius: 50%;
  background: var(--tool-a);
  opacity: .13;
  filter: blur(4px);
}
.tech-item::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 3px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(90deg, var(--tool-a), var(--tool-b));
  opacity: .75;
}
.tech-item:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--tool-b) 26%, transparent);
  box-shadow: 0 20px 38px var(--tool-glow), inset 0 1px 0 rgba(255,255,255,.95);
}
.tech-item .material-symbols-rounded,
.tech-item:nth-child(n) .material-symbols-rounded {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  color: #fff !important;
  background: linear-gradient(145deg, var(--tool-a), var(--tool-b)) !important;
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 3px 3px 5px rgba(255,255,255,.5), inset -4px -5px 8px rgba(24,44,118,.22), 0 11px 21px var(--tool-glow);
  font-size: 28px;
  text-shadow: 0 2px 4px rgba(14,31,82,.28);
}
.tech-item:hover .material-symbols-rounded {
  transform: translateY(-3px) rotate(-4deg) scale(1.04);
  box-shadow: inset 3px 3px 5px rgba(255,255,255,.55), inset -4px -5px 8px rgba(24,44,118,.2), 0 15px 25px var(--tool-glow);
}
.resume-light .tech-item b {
  margin-top: 3px;
  color: #0b1422;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.tech-item:nth-child(1) { --tool-a: #ffc56f; --tool-b: #f97316; --tool-glow: rgba(249,115,22,.2); }
.tech-item:nth-child(2) { --tool-a: #79c6ff; --tool-b: #2563eb; --tool-glow: rgba(37,99,235,.2); }
.tech-item:nth-child(3) { --tool-a: #c4a5ff; --tool-b: #6d28d9; --tool-glow: rgba(109,40,217,.2); }
.tech-item:nth-child(4) { --tool-a: #6ee7f9; --tool-b: #0284c7; --tool-glow: rgba(2,132,199,.2); }
.tech-item:nth-child(5) { --tool-a: #ff9a76; --tool-b: #e5484d; --tool-glow: rgba(229,72,77,.2); }
.tech-item:nth-child(6) { --tool-a: #67c8ff; --tool-b: #d98b19; --tool-glow: rgba(45,140,210,.2); }
.tech-item:nth-child(7) { --tool-a: #f5a4dd; --tool-b: #7c3aed; --tool-glow: rgba(124,58,237,.2); }
.tech-item:nth-child(8) { --tool-a: #ffd166; --tool-b: #e45b18; --tool-glow: rgba(228,91,24,.2); }
.tech-item:nth-child(9) { --tool-a: #75d5ff; --tool-b: #1d4ed8; --tool-glow: rgba(29,78,216,.2); }
.tech-item:nth-child(10) { --tool-a: #ffb45e; --tool-b: #e83e67; --tool-glow: rgba(232,62,103,.2); }
.tech-item:nth-child(11) { --tool-a: #5ee7f2; --tool-b: #7c4fe0; --tool-glow: rgba(89,99,214,.2); }
.tech-item:nth-child(12) { --tool-a: #ff8a9a; --tool-b: #d62f45; --tool-glow: rgba(214,47,69,.2); }
@media (max-width: 800px) {
  .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-item { min-height: 116px; }
}
@media (max-width: 470px) {
  .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-item { min-height: 108px; padding: 13px 8px; }
  .tech-item .material-symbols-rounded,
  .tech-item:nth-child(n) .material-symbols-rounded {
    width: 49px;
    height: 49px;
    font-size: 25px;
  }
}

/* Compact section rhythm. */
.section,
.skills-section {
  padding-top: 40px;
}
.about-content,
.experience-heading,
.skills-heading {
  padding-top: 40px;
}
.timeline,
.skill-grid,
.tech-grid {
  margin-top: 40px;
}
.tech-grid { padding-top: 0; }
.resume-light .contact-section,
.blog-preview {
  padding-top: 40px;
}
@media (max-width: 800px) {
  .section,
  .skills-section { padding-top: 40px; }
  .experience-heading,
  .skills-heading { padding-top: 40px; }
  .timeline,
  .skill-grid,
  .tech-grid { margin-top: 40px; }
  .resume-light .contact-section,
  .blog-preview { padding-top: 40px; }
}

/* Match the compact spacing in the React admin workspace. */
.admin-content { padding-top: 40px; }
.admin-sidebar { padding-top: 40px; }
.admin-panel { margin-top: 40px; }
.admin-stat { padding-top: 40px; }
.admin-kicker { margin-top: 40px; }
.settings-form { display: grid; gap: 20px; max-width: 860px; }
.settings-card { display: grid; gap: 17px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 12px 30px rgba(29,96,147,.07); }
.settings-card h3 { margin: 0 0 2px; color: #0b1422; font-size: 18px; }
.settings-card label { display: grid; gap: 7px; color: #111b29; font-size: 12px; font-weight: 600; }
.settings-card input:not([type=checkbox]) { width: 100%; padding: 12px 13px; border: 1px solid rgba(28,93,145,.18); border-radius: 8px; outline: none; color: #0b1422; background: #fff; font: 13px/1.5 Rubik, sans-serif; }
.settings-image-field { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(28,93,145,.12); border-radius: 10px; background: #f8fcff; }
.settings-image-field > div { display: grid; gap: 4px; }
.settings-image-field strong { color: #152436; font-size: 12px; }
.settings-image-field span { color: #77889a; font-size: 10px; line-height: 1.4; }
.settings-image-field input[type=url] { min-width: 0; }
.settings-image-field img { width: 52px; height: 38px; object-fit: contain; border-radius: 6px; background: #fff; }
.settings-image-field .editor-button { white-space: nowrap; }
@media (max-width: 750px) {
  .settings-image-field { grid-template-columns: 1fr; }
  .settings-image-field img { width: 100%; height: 80px; }
}
.blog-grid h3 a { color: inherit; font: inherit; font-weight: inherit; }
.blog-art-link { display: block; color: inherit !important; font: inherit !important; }
.theme-switch { padding: 0; border: 0; background: transparent; box-shadow: none; }
.theme-switch button:not(.active) { display: none; }
.theme-switch button.active { width: 36px; height: 36px; color: #152436; background: #fff; border: 1px solid rgba(28,100,151,.12); box-shadow: 0 4px 12px rgba(29,96,147,.12); }
.experience-section > *,
.timeline,
.role,
.role-main,
.role-title > div { min-width: 0; }
.role-marker { justify-content: center; align-items: center; gap: 0; }
.role-title { align-items: flex-start; }
.role-title h3 { overflow-wrap: anywhere; }
@media (max-width: 750px) {
  .admin-content { padding-top: 40px; }
  .admin-sidebar { padding-top: 20px; }
  .admin-panel { margin-top: 40px; }
}

/* Light admin theme matching the public portfolio. */
.admin-shell {
  --bg: #f7fbff;
  --panel: #fff;
  --panel-2: #eaf6ff;
  --line: rgba(24, 76, 124, .13);
  --text: #080d18;
  --muted: #4c5d70;
  --accent: #249fdf;
  color: var(--text);
  background:
    radial-gradient(circle at 92% 3%, rgba(117, 207, 239, .24), transparent 25%),
    radial-gradient(circle at 8% 92%, rgba(99, 102, 241, .08), transparent 24%),
    linear-gradient(145deg, #fff 0%, #f5fbff 55%, #edf7ff 100%);
}
.admin-login-card {
  border-color: rgba(31, 123, 178, .14);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 28px 75px rgba(24, 91, 145, .16);
  backdrop-filter: blur(16px);
}
.admin-login-card::before {
  content: '';
  display: block;
  width: 54px;
  height: 5px;
  margin-bottom: 25px;
  border-radius: 10px;
  background: linear-gradient(90deg, #1687d8, #51d0ef, #6366f1);
}
.admin-topbar {
  border-color: var(--line);
  background: rgba(255,255,255,.62);
}
.admin-topbar .brand,
.admin-login-card .brand { color: #080d18; }
.admin-topbar .brand span,
.admin-login-card .brand span { color: #168ec5; }
.admin-user,
.admin-logout,
.admin-back { color: #435469; }
.admin-logout:hover,
.admin-back:hover { color: #147fb0; }
.admin-sidebar { border-color: var(--line); }
.sidebar-label {
  color: #526579;
  font-weight: 500;
}
.sidebar-link {
  color: #35485d;
  font-size: 13px;
  font-weight: 500;
}
.sidebar-link:hover {
  color: #0b6598;
  background: rgba(218, 241, 255, .78);
}
.sidebar-link.active {
  color: #075f91;
  background: linear-gradient(105deg, #e0f4ff, #edf3ff);
  box-shadow: inset 3px 0 #24a8e5, 0 8px 20px rgba(36, 138, 196, .1);
}
.sidebar-link .material-symbols-rounded {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #168ec5;
  background: #e6f6ff;
  font-size: 18px;
}
.sidebar-link.active .material-symbols-rounded {
  color: #fff;
  background: linear-gradient(145deg, #62d9f5, #208fd9 58%, #4259d0);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.48), 0 7px 14px rgba(27,112,184,.22);
}
.admin-kicker { color: #148bc3; }
.admin-heading h1,
.admin-panel-heading h2,
.admin-stat strong { color: #080d18; }
.admin-muted,
.admin-stat span,
.admin-empty,
.admin-resource-row span,
.admin-table-row time,
.draft { color: #4c5d70; }
.admin-heading { border-color: var(--line); }
.admin-button {
  color: #fff;
  background: linear-gradient(135deg, #1677d2 0%, #25b9e8 58%, #5367dc 100%);
  box-shadow: 0 10px 22px rgba(26, 126, 199, .2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.admin-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(26, 126, 199, .27);
}
.admin-refresh {
  color: #116f9e;
  border-color: rgba(26, 137, 195, .25);
  background: #fff;
  box-shadow: 0 8px 20px rgba(29, 103, 154, .09);
}
.admin-refresh:hover { background: #edf8ff; }
.admin-stat {
  margin-top: 24px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff, #eef8ff);
  box-shadow: 0 12px 30px rgba(28, 98, 151, .08);
}
.admin-form input,
.post-form input:not([type=checkbox]),
.post-form textarea {
  color: #080d18;
  border-color: rgba(28, 93, 145, .16);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(18, 67, 109, .04);
}
.admin-form input:focus,
.post-form input:focus,
.post-form textarea:focus {
  border-color: #36aee1;
  box-shadow: 0 0 0 4px rgba(54, 174, 225, .12);
}
.admin-table,
.admin-resource-list {
  border-color: var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(29, 96, 147, .08);
}
.admin-table-head {
  color: #40546a;
  background: linear-gradient(90deg, #eaf7ff, #f2f5ff);
}
.admin-table-row,
.admin-resource-row { border-color: var(--line); }
.admin-table-row:hover,
.admin-resource-row:hover { background: #f5fbff; }
.published { color: #147fb0; }
.admin-success {
  color: #075f91;
  border-color: rgba(37, 159, 216, .25);
  background: #e7f6ff;
}
.admin-error {
  color: #a52d3d;
  border-color: rgba(213, 61, 82, .22);
  background: #fff1f3;
}
@media (max-width: 750px) {
  .admin-topbar { background: transparent; }
  .admin-sidebar { background: rgba(255,255,255,.7); }
  .sidebar-link.active { box-shadow: inset 0 -3px #24a8e5; }
}

/* Full post editor workspace. */
.admin-content.create-view > .admin-heading { display: none; }
.post-editor {
  margin-top: 0;
  width: 100%;
}
.post-edit-page {
  margin-top: 0;
  width: 100%;
}
.post-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.post-editor-title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.post-editor-title .admin-kicker { margin: 0 0 7px; }
.post-editor-title h2 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 28px;
  letter-spacing: -.04em;
}
.post-editor-title p:last-child { margin: 0; font-size: 13px; }
.editor-back {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #17496a;
  background: #fff;
  box-shadow: 0 7px 18px rgba(29,96,147,.08);
}
.editor-back:hover { color: #fff; background: linear-gradient(145deg, #57cef1, #238bd4); }
.post-editor-actions { display: flex; align-items: center; gap: 10px; }
.editor-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
}
.editor-button .material-symbols-rounded { font-size: 18px; }
.editor-button:hover { transform: translateY(-2px); }
.editor-button.secondary {
  border: 1px solid rgba(27,137,194,.25);
  color: #116f9e;
  background: #fff;
}
.editor-button.secondary:hover { box-shadow: 0 9px 20px rgba(29,103,154,.12); }
.editor-button.primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #1677d2, #25b9e8 58%, #5367dc);
  box-shadow: 0 10px 22px rgba(26,126,199,.22);
}
.lead-delete-button {
  border: 1px solid rgba(207,62,83,.2);
  color: #ac3345;
  background: #fff0f2;
}
.lead-delete-button:hover { box-shadow: 0 9px 20px rgba(207,62,83,.12); }
.editor-button:disabled { cursor: wait; opacity: .6; }
.post-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  align-items: start;
  gap: 20px;
}
.post-editor-main,
.post-editor-side { display: grid; gap: 20px; }
.editor-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 30px rgba(29,96,147,.07);
}
.editor-card h3 {
  margin: 0 0 18px;
  color: #0b1422;
  font-size: 15px;
  letter-spacing: -.02em;
}
.editor-card h3 span { color: #657487; font-size: 11px; font-weight: 400; }
.editor-card label {
  display: grid;
  gap: 8px;
  margin-bottom: 19px;
  color: #111b29;
  font-size: 13px;
  font-weight: 600;
}
.editor-card label:last-child { margin-bottom: 0; }
.editor-card label > b,
.editor-card label > span b { display: inline; color: #d7475b; }
.editor-card input:not([type=checkbox]),
.editor-card textarea,
.editor-card select {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(28,93,145,.18);
  border-radius: 8px;
  outline: none;
  color: #0b1422;
  background: #fff;
  font: 13px/1.5 Rubik, sans-serif;
  transition: border-color .2s, box-shadow .2s;
}
.editor-card textarea { resize: vertical; }
.editor-card input:focus,
.editor-card textarea:focus,
.editor-card select:focus {
  border-color: #36aee1;
  box-shadow: 0 0 0 4px rgba(54,174,225,.11);
}
.editor-card input::placeholder,
.editor-card textarea::placeholder { color: #91a0af; }
.field-help {
  color: #667689;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
}
.rich-editor-field {
  display: grid;
  gap: 8px;
  color: #111b29;
  font-size: 13px;
  font-weight: 600;
}
.rich-editor-field > span b { color: #d7475b; }
.rich-editor {
  overflow: hidden;
  border: 1px solid rgba(28,93,145,.2);
  border-radius: 10px;
  color: #101827;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23,83,129,.06);
}
.rich-editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(28,93,145,.12);
  background: #fff;
}
.rich-editor-heading strong { font-size: 11px; }
.rich-editor-heading span { color: #708094; font-size: 9px; font-weight: 400; }
.editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 7px;
  border: 0;
  border-bottom: 1px solid rgba(28,93,145,.18);
  border-radius: 0;
  background: linear-gradient(180deg, #fbfdff, #f3f8fc);
}
.editor-toolbar select {
  width: 110px;
  padding: 7px 8px;
  margin-right: 5px;
  font-size: 11px;
}
.editor-toolbar button {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #26384a;
  background: transparent;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.editor-toolbar button:hover { color: #117dad; background: #e1f3fd; }
.editor-toolbar button.is-active {
  color: #fff;
  background: linear-gradient(145deg, #56c7ee, #287fd2 70%, #6358d9);
  box-shadow: 0 5px 12px rgba(35,126,193,.22);
}
.editor-toolbar button:disabled { cursor: not-allowed; opacity: .3; }
.editor-toolbar .material-symbols-rounded { font-size: 18px; }
.toolbar-divider {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: rgba(28,93,145,.15);
}
.tiptap-content {
  min-height: 340px;
  padding: 22px 24px;
  outline: none;
  color: #111827;
  background: #fff;
  font: 400 15px/1.75 Rubik, sans-serif;
}
.tiptap-content.is-compact { min-height: 260px; }
.tiptap-content > *:first-child { margin-top: 0; }
.tiptap-content > *:last-child { margin-bottom: 0; }
.tiptap-content p { margin: 0 0 1em; }
.tiptap-content h1,
.tiptap-content h2,
.tiptap-content h3,
.tiptap-content h4 {
  margin: 1.3em 0 .55em;
  color: #091425;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.tiptap-content h1 { font-size: 30px; }
.tiptap-content h2 { font-size: 25px; }
.tiptap-content h3 { font-size: 21px; }
.tiptap-content h4 { font-size: 18px; }
.tiptap-content ul,
.tiptap-content ol { margin: 0 0 1em; padding-left: 26px; }
.tiptap-content li { margin: .3em 0; }
.tiptap-content blockquote {
  margin: 1.2em 0;
  padding: 12px 18px;
  border-left: 4px solid #32aee3;
  color: #33495f;
  background: linear-gradient(90deg, #edf8ff, #f8fbff);
}
.tiptap-content a { color: #087db7; text-decoration: underline; }
.tiptap-content code {
  padding: 2px 5px;
  border-radius: 4px;
  color: #5536a4;
  background: #f0edff;
  font: 12px 'DM Mono', monospace;
}
.tiptap-content pre {
  position: relative;
  overflow-x: auto;
  min-height: 86px;
  padding: 48px 20px 20px;
  border-radius: 9px;
  color: #eaf7ff;
  background: #171717;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(7,15,28,.16);
  cursor: pointer;
}
.tiptap-content pre::before {
  content: '</>  Bash';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 15px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #e8edf4;
  background: #1d1d1d;
  font: 12px Rubik, sans-serif;
}
.tiptap-content pre::after {
  content: '⧉  Copy';
  position: absolute;
  top: 9px;
  right: 14px;
  padding: 3px 7px;
  border-radius: 5px;
  color: #d5dde8;
  background: rgba(255,255,255,.08);
  font: 10px Rubik, sans-serif;
  pointer-events: none;
}
.tiptap-content pre code { padding: 0; color: #9ee6b2; background: transparent; font: 13px/1.75 'DM Mono', monospace; white-space: pre; }
.tiptap-content pre .hljs-comment,
.tiptap-content pre .hljs-quote { color: #788493; }
.tiptap-content pre .hljs-keyword,
.tiptap-content pre .hljs-selector-tag,
.tiptap-content pre .hljs-built_in { color: #f59eaa; }
.tiptap-content pre .hljs-string,
.tiptap-content pre .hljs-attr,
.tiptap-content pre .hljs-template-variable { color: #f6c177; }
.tiptap-content pre .hljs-number,
.tiptap-content pre .hljs-literal { color: #9cc7ff; }
.tiptap-content pre .hljs-title,
.tiptap-content pre .hljs-title.function_,
.tiptap-content pre .hljs-variable { color: #8fd3ff; }
.tiptap-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px auto;
  border-radius: 10px;
}
.tiptap-content hr { margin: 24px 0; border: 0; border-top: 1px solid rgba(28,93,145,.2); }
.tiptap-content p.is-editor-empty:first-child::before {
  height: 0;
  float: left;
  color: #91a0af;
  content: attr(data-placeholder);
  pointer-events: none;
}
.rich-editor-status {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 12px;
  border-top: 1px solid rgba(28,93,145,.12);
  color: #6e7d8c;
  background: #f8fbfe;
  font-size: 9px;
  font-weight: 400;
}
.rich-editor-loading {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #68798a;
  background: #fff;
}
.rich-editor.is-fullscreen {
  position: fixed;
  z-index: 250;
  inset: 14px;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  box-shadow: 0 32px 100px rgba(9,36,67,.35);
}
.rich-editor.is-fullscreen .tiptap { flex: 1; overflow-y: auto; }
.rich-editor.is-fullscreen .tiptap-content { min-height: 100%; }
body:has(.rich-editor.is-fullscreen) { overflow: hidden; }
.seo-card > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cover-drop {
  padding: 18px 12px;
  border: 1px dashed rgba(36,125,176,.35);
  border-radius: 10px;
  text-align: center;
  background: #f8fcff;
}
.cover-drop > .material-symbols-rounded {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #74dcf6, #2c8fda 58%, #5665d8);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.5), 0 9px 18px rgba(36,113,181,.2);
}
.cover-drop strong { display: block; color: #142131; font-size: 12px; }
.cover-drop p { margin: 4px 0 12px; color: #6c7b8b; font-size: 10px; }
.cover-drop input { font-size: 10px !important; }
.cover-upload-actions { display: flex; justify-content: center; margin: 8px 0 10px; }
.cover-upload-button { padding: 9px 13px; font-size: 11px; }
.cover-upload-button .material-symbols-rounded { font-size: 17px; }
.cover-drop img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  margin-top: 12px;
  border-radius: 8px;
}
.publish-card label {
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 10px;
}
.publish-card label > span { display: flex; align-items: center; gap: 7px; }
.publish-card label > span .material-symbols-rounded { color: #168ec5; font-size: 18px; }
.publish-card .sticky-check {
  display: flex;
  justify-content: flex-start;
  font-size: 11px;
}
.publish-card .sticky-check input { width: 16px; height: 16px; accent-color: #238fd2; }
.editor-side-link { margin: 11px 0 0; color: #147ead; font-size: 10px; }
.post-preview {
  position: fixed;
  z-index: 100;
  inset: 6vh 7vw;
  overflow: auto;
  padding: 48px;
  border: 1px solid rgba(27,113,168,.15);
  border-radius: 20px;
  color: #101827;
  background: rgba(255,255,255,.98);
  box-shadow: 0 35px 100px rgba(12,47,83,.28);
}
.post-preview > button {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #17496a;
  background: #e8f6ff;
}
.post-preview h1 { margin: 15px 0 25px; font-size: clamp(38px, 6vw, 72px); }
.post-preview img { width: min(100%, 850px); max-height: 430px; object-fit: cover; border-radius: 16px; }
.post-preview-excerpt { margin-top: 25px; color: #46586c; font-size: 18px; }
.post-preview > div { font-size: 16px; line-height: 1.8; }
.post-preview-content { max-width: 850px; }
.post-preview-content h2,
.post-preview-content h3,
.post-preview-content h4 { margin: 1.2em 0 .55em; color: #101827; line-height: 1.2; }
.post-preview-content p { margin: 0 0 1em; }
.post-preview-content ul,
.post-preview-content ol { padding-left: 25px; }
.post-preview-content blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 4px solid #31aae0; background: #eff9ff; }
.post-preview-content pre { overflow-x: auto; padding: 18px; border-radius: 10px; color: #edf8ff; background: #111c2d; }
.post-preview-content img { max-width: 100%; height: auto; }
@media (max-width: 1050px) {
  .post-editor-header { align-items: flex-start; flex-direction: column; }
  .post-editor-grid { grid-template-columns: 1fr; }
  .post-editor-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 750px) {
  .post-editor-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .post-editor-actions .primary { grid-column: 1 / -1; }
  .post-editor-side,
  .seo-card > div { grid-template-columns: 1fr; }
  .editor-card { padding: 17px; }
  .editor-toolbar { flex-wrap: nowrap; overflow-x: auto; }
  .editor-toolbar button,
  .editor-toolbar select,
  .toolbar-divider { flex: 0 0 auto; }
  .tiptap-content { min-height: 290px; padding: 18px 16px; }
  .rich-editor.is-fullscreen { inset: 5px; }
  .post-preview { inset: 15px; padding: 35px 22px; }
}

/* Category and subcategory editor. */
.category-form select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(28,93,145,.16);
  border-radius: 7px;
  outline: none;
  color: #080d18;
  background: #fff;
  font: 13px/1.6 Rubik, sans-serif;
}
.category-form select:focus {
  border-color: #36aee1;
  box-shadow: 0 0 0 4px rgba(54,174,225,.12);
}
.category-form input[readonly] {
  color: #456176;
  background: linear-gradient(90deg, #edf8ff, #f4f6ff);
  cursor: default;
}
.category-editor .admin-panel-heading {
  max-width: 720px;
}
.category-editor .admin-panel-heading .admin-muted {
  margin-top: 8px;
}

/* WordPress-style category hierarchy table. */
.category-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(29,96,147,.08);
}
.category-table-head,
.category-table-row {
  min-width: 780px;
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) 120px 140px minmax(130px, .8fr) 55px;
  gap: 16px;
  align-items: center;
  padding: 16px 19px;
}
.category-table-head {
  color: #40546a;
  background: linear-gradient(90deg, #eaf7ff, #f2f5ff);
  font: 500 10px 'DM Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.category-table-row {
  min-height: 72px;
  border-top: 1px solid var(--line);
  color: #27384a;
  font-size: 12px;
  transition: background .18s ease;
}
.category-table-row:hover { background: #f6fbff; }
.category-table-row.is-child { background: rgba(244,249,255,.72); }
.category-table-row.is-child:hover { background: #edf7ff; }
.category-name {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-left: calc(var(--category-depth, 0) * 18px);
}
.category-name > .material-symbols-rounded {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #68daf5, #248fd5 58%, #5364d8);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.5), 0 7px 14px rgba(30,111,180,.18);
  font-size: 18px;
}
.is-child .category-name > .material-symbols-rounded {
  background: linear-gradient(145deg, #bca8ff, #7558df 58%, #4455c9);
}
.category-name strong {
  display: block;
  color: #0b1422;
  font-size: 13px;
}
.category-name small {
  display: block;
  overflow: hidden;
  max-width: 260px;
  margin-top: 4px;
  color: #68788a;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-type {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
}
.category-type.main { color: #075f91; background: #def3ff; }
.category-type.child { color: #5540b6; background: #eee9ff; }
.category-parent { color: #4b5e72; }
.category-table-row code {
  overflow: hidden;
  color: #36546c;
  font: 10px 'DM Mono', monospace;
  text-overflow: ellipsis;
}
.category-count {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #116f9e;
  background: #e6f6ff;
  font-size: 12px;
}

/* Bunny Storage media uploader. */
.media-upload-panel { max-width: 860px; }
.media-upload-panel .admin-panel-heading { max-width: 680px; }
.media-upload-form {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr);
  gap: 20px;
  margin-top: 28px;
}
.media-dropzone {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 2px dashed rgba(35,143,203,.3);
  border-radius: 18px;
  color: #516377;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(232,247,255,.82));
  box-shadow: inset 0 0 40px rgba(89,190,232,.05), 0 15px 35px rgba(29,96,147,.08);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.media-dropzone:hover,
.media-dropzone.is-dragging {
  border-color: #279fd8;
  background: linear-gradient(145deg, #fff, #e2f5ff);
  transform: translateY(-2px);
}
.media-dropzone > .material-symbols-rounded {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, #7ae3f8, #2799dd 55%, #5264db);
  box-shadow: inset 3px 3px 6px rgba(255,255,255,.52), inset -4px -5px 8px rgba(33,61,150,.2), 0 14px 27px rgba(32,115,186,.24);
  font-size: 34px;
}
.media-dropzone h3 { margin: 0 0 7px; color: #0b1422; font-size: 19px; }
.media-dropzone p { margin: 0 0 12px; font-size: 13px; }
.media-dropzone > b { color: #718093; font-size: 10px; font-weight: 500; }
.media-dropzone > img {
  width: 100%;
  height: 270px;
  object-fit: contain;
  border-radius: 12px;
}
.media-file-meta {
  width: calc(100% - 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 10px;
  color: #132235;
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 20px rgba(20,65,104,.12);
  backdrop-filter: blur(10px);
  font-size: 11px;
}
.media-file-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-file-meta span { color: #5c6f82; white-space: nowrap; }
.media-upload-controls {
  align-self: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 30px rgba(29,96,147,.08);
}
.media-upload-controls label {
  display: grid;
  gap: 9px;
  margin-bottom: 18px;
  color: #111b29;
  font-size: 12px;
  font-weight: 600;
}
.media-upload-controls input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(28,93,145,.18);
  border-radius: 8px;
  outline: none;
  color: #0b1422;
  background: #fff;
  font: 13px Rubik, sans-serif;
}
.media-upload-controls input:focus {
  border-color: #36aee1;
  box-shadow: 0 0 0 4px rgba(54,174,225,.11);
}
.media-upload-controls .admin-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.media-upload-success {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding: 15px 17px;
  border: 1px solid rgba(35,159,216,.2);
  border-radius: 12px;
  color: #075f91;
  background: #e7f6ff;
}
.media-upload-success > .material-symbols-rounded { font-size: 29px; }
.media-upload-success strong,
.media-upload-success a { display: block; }
.media-upload-success a {
  overflow: hidden;
  max-width: 620px;
  margin-top: 3px;
  color: #3d5970;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .lead-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-toolbar { align-items: stretch; flex-direction: column; }
  .lead-toolbar > select { width: 100%; }
  .salesforce-layout { grid-template-columns: 1fr; }
  .lead-record-grid { grid-template-columns: 1fr; }
  .media-upload-form { grid-template-columns: 1fr; }
  .media-dropzone { min-height: 300px; }
}

/* Shared edit and delete controls. */
.posts-table .admin-table-head,
.posts-table .admin-table-row {
  grid-template-columns: 34px minmax(180px, 1fr) 105px 110px 170px;
}
.posts-table .admin-table-row > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}
.posts-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.posts-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 220px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.7);
}
.posts-search .material-symbols-rounded { color: var(--muted); font-size: 19px; }
.posts-search input {
  width: 100%;
  min-height: 43px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font: 12px Rubik, sans-serif;
}
.posts-selection { color: var(--muted); font: 11px 'DM Mono', monospace; white-space: nowrap; }
.posts-delete-selected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(207,62,83,.18);
  border-radius: 8px;
  color: #ac3345;
  background: #fff0f2;
  font: 600 11px Rubik, sans-serif;
  cursor: pointer;
}
.posts-delete-selected:hover:not(:disabled) { background: #ffe1e6; }
.posts-delete-selected:disabled { cursor: not-allowed; opacity: .45; }
.post-select-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.row-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
}
.row-actions button .material-symbols-rounded { font-size: 16px; }
.row-actions .edit {
  color: #116f9e;
  border-color: rgba(29,137,191,.17);
  background: #e8f7ff;
}
.row-actions .edit:hover { background: #d7f1ff; }
.row-actions .view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid rgba(54,174,225,.22);
  border-radius: 8px;
  color: #176b9c;
  background: #f0f9ff;
  font: 600 11px/1 Rubik, sans-serif;
  text-decoration: none;
}
.row-actions .view:hover { background: #dff3ff; }
.row-actions .view .material-symbols-rounded { font-size: 16px; }
.row-actions .delete {
  color: #ac3345;
  border-color: rgba(207,62,83,.14);
  background: #fff0f2;
}
.row-actions .delete:hover { background: #ffe1e6; }
.row-actions.compact { justify-content: flex-start; }
.row-actions.compact button { width: 31px; height: 31px; padding: 0; }
.leads-crm .admin-panel-heading { align-items: flex-start; }
.leads-crm .admin-panel-heading .admin-refresh { display: inline-flex; align-items: center; gap: 7px; }
.leads-crm .admin-panel-heading .admin-refresh .material-symbols-rounded { font-size: 16px; }
.lead-pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 24px 0 15px; }
.lead-pipeline-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 13px 14px; border: 1px solid rgba(28,100,151,.13); border-radius: 10px; color: #20344a; background: rgba(255,255,255,.82); text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.lead-pipeline-card:hover,
.lead-pipeline-card.active { border-color: #38a9df; box-shadow: 0 8px 20px rgba(35,116,172,.1); transform: translateY(-1px); }
.lead-pipeline-card > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.lead-pipeline-card small { overflow: hidden; color: #708197; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lead-pipeline-card strong { color: #102238; font-size: 20px; line-height: 1; }
.lead-pipeline-card > .material-symbols-rounded { margin-left: auto; color: #7f91a4; font-size: 17px; }
.pipeline-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; }
.pipeline-dot.status-new { background: #e6a51a; }
.pipeline-dot.status-contacted { background: #2ca5d7; }
.pipeline-dot.status-converted { background: #38a66b; }
.pipeline-dot.status-closed { background: #8b98a7; }
.lead-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lead-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0 12px; border: 1px solid rgba(28,100,151,.16); border-radius: 8px; background: #fff; }
.lead-search .material-symbols-rounded { color: #6c8298; font-size: 18px; }
.lead-search input { width: 100%; min-height: 39px; border: 0; outline: 0; color: #17263a; background: transparent; font: 12px Rubik, sans-serif; }
.lead-toolbar > select { min-height: 41px; padding: 0 10px; border: 1px solid rgba(28,100,151,.16); border-radius: 8px; color: #20344a; background: #fff; font: 11px Rubik, sans-serif; }
.leads-crm-layout { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: 18px; }
.lead-list { display: grid; align-content: start; gap: 8px; }
.lead-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 3px 5px; color: #20344a; }
.lead-list-heading strong { font-size: 13px; }
.lead-list-heading span { color: #8391a0; font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.lead-list-empty { padding: 28px 12px; border: 1px dashed rgba(28,100,151,.18); border-radius: 10px; text-align: center; }
.lead-list-item { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid rgba(28,100,151,.12); border-radius: 11px; color: #17263a; background: rgba(255,255,255,.72); text-align: left; cursor: pointer; }
.lead-list-item:hover,
.lead-list-item.active { border-color: #43afe4; background: #edf8ff; box-shadow: 0 8px 22px rgba(35,116,172,.1); }
.lead-avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #70d7f5, #347fd2 68%, #5d57ce); font-weight: 800; }
.lead-list-item > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.lead-list-item > span:nth-child(2) small:last-child { color: #9aa7b5; font-size: 9px; }
.lead-list-item strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lead-list-item small { overflow: hidden; color: #718196; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lead-status { padding: 4px 7px; border-radius: 99px; font: 600 9px 'DM Mono', monospace; text-transform: capitalize; }
.status-new { color: #9a6500; background: #fff4d9; }
.status-contacted { color: #176d9c; background: #ddf3ff; }
.status-converted { color: #247b55; background: #def8e9; }
.status-closed { color: #647181; background: #edf0f3; }
.lead-detail-card { min-width: 0; padding: 22px; border: 1px solid rgba(28,100,151,.14); border-radius: 14px; background: rgba(255,255,255,.76); }
.lead-detail-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid rgba(28,100,151,.12); }
.lead-detail-card h3 { margin: 4px 0 7px; color: #0b1525; font-size: 25px; letter-spacing: -.04em; }
.lead-detail-card header select { min-width: 120px; padding: 9px 10px; border: 1px solid rgba(28,100,151,.2); border-radius: 8px; color: #142131; background: #fff; font: 11px Rubik, sans-serif; }
.lead-contact-links { display: flex; flex-wrap: wrap; gap: 9px 14px; }
.lead-contact-links a { color: #1586bd; font-size: 11px; }
.lead-message { padding: 17px 0; border-bottom: 1px solid rgba(28,100,151,.12); }
.lead-message > span { color: #1787be; font: 10px 'DM Mono', monospace; text-transform: uppercase; }
.lead-message p { margin: 8px 0; color: #40556c; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.lead-message time { color: #8492a1; font: 10px 'DM Mono', monospace; }
.lead-activity { padding-top: 19px; }
.lead-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.lead-section-heading h4 { margin: 3px 0 0; color: #101827; font-size: 17px; }
.lead-section-heading > span { color: #7b8998; font: 10px 'DM Mono', monospace; }
.lead-activity-list { display: grid; gap: 10px; margin: 15px 0; }
.lead-activity-item { display: flex; gap: 10px; padding: 11px; border-radius: 9px; background: #f1f8fc; }
.lead-activity-item > .material-symbols-rounded { color: #238fd0; font-size: 19px; }
.lead-activity-item p { margin: 0 0 5px; color: #334b63; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.lead-activity-item small { color: #8290a0; font: 9px 'DM Mono', monospace; }
.lead-note-form { display: grid; gap: 9px; padding-top: 14px; border-top: 1px solid rgba(28,100,151,.12); }
.lead-note-form textarea { width: 100%; padding: 11px 12px; border: 1px solid rgba(28,100,151,.18); border-radius: 8px; outline: none; color: #142131; background: #fff; font: 12px/1.5 Rubik, sans-serif; resize: vertical; }
.lead-note-form textarea:focus { border-color: #36aee1; box-shadow: 0 0 0 4px rgba(54,174,225,.11); }
.lead-note-form .admin-button { justify-self: end; }

/* Salesforce-inspired lead record workspace. */
.salesforce-layout { position: relative; grid-template-columns: 1fr; gap: 12px; }
.salesforce-list { min-width: 0; padding: 12px 0 0; border: 1px solid rgba(28,100,151,.12); border-radius: 10px; background: rgba(255,255,255,.76); overflow: hidden; }
.salesforce-list .lead-list-heading { padding: 0 14px 10px; }
.lead-table { width: 100%; overflow-x: auto; }
.lead-table-head,
.lead-table-row { display: grid; grid-template-columns: 26px minmax(150px, 1.25fr) minmax(125px, 1fr) 105px 80px 90px; align-items: center; min-width: 700px; column-gap: 8px; }
.lead-table-head { padding: 9px 12px; color: #607388; background: #f5f9fc; border-top: 1px solid rgba(28,100,151,.1); border-bottom: 1px solid rgba(28,100,151,.1); font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.lead-table-row { width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(28,100,151,.09); color: #263b50; background: transparent; text-align: left; cursor: pointer; font: 10px Rubik, sans-serif; }
.lead-table-row:hover,
.lead-table-row.active { background: #edf7ff; box-shadow: inset 3px 0 #218ed2; }
.lead-table-row > span:not(.lead-checkbox):not(.lead-table-name) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-checkbox { width: 13px; height: 13px; border: 1px solid #c7d4df; border-radius: 4px; background: #fff; }
.lead-table-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lead-table-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-table-name .lead-avatar { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 8px; font-size: 11px; }
.salesforce-detail { padding: 0; overflow: hidden; background: #fff; }
.lead-record-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; background: linear-gradient(120deg, #fff, #f5fbff); }
.lead-record-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lead-record-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #73d8f5, #3b7fd3); font-weight: 800; }
.lead-record-title h3 { overflow: hidden; margin: 0 0 4px; text-overflow: ellipsis; white-space: nowrap; }
.lead-record-title p { margin: 0; color: #718196; font-size: 10px; }
.lead-record-title .lead-status { margin-left: 4px; }
.lead-record-actions { display: flex; align-items: center; gap: 7px; }
.lead-record-actions .editor-button { min-height: 32px; padding: 7px 10px; font-size: 10px; }
.lead-record-actions .material-symbols-rounded { font-size: 15px; }
.lead-more-button { width: 32px; height: 32px; border: 1px solid rgba(28,100,151,.15); border-radius: 7px; color: #526a80; background: #fff; font-size: 18px; }
.lead-record-tabs { display: flex; gap: 2px; padding: 0 20px; border-top: 1px solid rgba(28,100,151,.1); border-bottom: 1px solid rgba(28,100,151,.12); }
.lead-record-tabs button { padding: 11px 13px 9px; border: 0; border-bottom: 2px solid transparent; color: #64778b; background: transparent; font: 600 10px Rubik, sans-serif; cursor: pointer; }
.lead-record-tabs button:hover,
.lead-record-tabs button.active { color: #126da3; border-bottom-color: #218ed2; }
.lead-record-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .8fr); gap: 10px; padding: 12px; background: #fbfdff; }
.lead-info-card,
.lead-mini-card { padding: 14px; border: 1px solid rgba(28,100,151,.11); border-radius: 8px; background: #fff; }
.lead-info-card h4,
.lead-card-heading h4 { margin: 0; color: #172a3e; font-size: 12px; }
.lead-info-card dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 11px 10px; margin: 16px 0 0; font-size: 10px; }
.lead-info-card dt { color: #718196; }
.lead-info-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #263b50; font-weight: 600; }
.lead-info-card dd a { color: #087fc0; }
.lead-info-card dd select { width: 100%; padding: 5px 6px; border: 1px solid #cbd9e4; border-radius: 5px; color: #263b50; background: #fff; font-size: 10px; }
.lead-original-message { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(28,100,151,.1); }
.lead-original-message span { color: #1586bd; font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.lead-original-message p { margin: 8px 0 0; color: #52687c; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.lead-record-side { display: grid; align-content: start; gap: 10px; }
.lead-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lead-card-heading .editor-button { min-height: 27px; padding: 5px 8px; font-size: 9px; }
.lead-empty-state { display: grid; justify-items: center; gap: 4px; margin: 20px 0 7px; color: #52687c; font-size: 10px; text-align: center; }
.lead-empty-state .material-symbols-rounded { color: #8498aa; font-size: 25px; }
.lead-empty-state small { color: #8795a3; font-size: 9px; }
.lead-overview-entries { display: grid; gap: 8px; margin-top: 14px; }
.lead-overview-entry { display: flex; gap: 8px; padding: 8px; border-radius: 6px; background: #f4f9fc; }
.lead-overview-entry > .material-symbols-rounded { color: #258fd0; font-size: 17px; }
.lead-overview-entry div { display: grid; gap: 3px; min-width: 0; }
.lead-overview-entry strong { overflow: hidden; color: #334b63; font-size: 10px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.lead-overview-entry small { color: #8290a0; font: 8px 'DM Mono', monospace; }
.lead-related-row { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto 42px; align-items: center; gap: 7px; padding: 9px 0; border-bottom: 1px solid rgba(28,100,151,.08); color: #31475d; font-size: 10px; }
.lead-related-row:last-child { border-bottom: 0; }
.lead-related-row > .material-symbols-rounded { color: #6b61ce; font-size: 17px; }
.lead-related-row strong { color: #526a80; }
.lead-related-row button { padding: 4px 6px; border: 1px solid #b7d5ea; border-radius: 5px; color: #1478ad; background: #fff; font-size: 9px; }
.record-full-section { padding: 18px 20px 22px; }
.salesforce-layout:has(> .salesforce-detail)::before { content: ''; position: fixed; z-index: 1000; inset: 0; background: rgba(12, 32, 52, .38); backdrop-filter: blur(3px); }
.salesforce-layout > .salesforce-detail { position: fixed; z-index: 1001; top: 50%; left: 50%; width: min(880px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto; transform: translate(-50%, -50%); box-shadow: 0 28px 90px rgba(9, 38, 68, .28); }
body:has(.salesforce-detail) { overflow: hidden; }

.crud-modal-backdrop {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(10,30,50,.46);
  backdrop-filter: blur(7px);
}
.crud-modal {
  width: min(760px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(35,128,184,.15);
  border-radius: 18px;
  color: #080d18;
  background: #fafdff;
  box-shadow: 0 35px 100px rgba(8,39,70,.3);
}
.crud-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(24,76,124,.12);
}
.crud-modal > header .admin-kicker { margin: 0 0 7px; }
.crud-modal > header h2 { margin: 0; font-size: 26px; letter-spacing: -.04em; }
.crud-modal > header > button {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #17496a;
  background: #e7f6ff;
}
.crud-form { display: grid; gap: 16px; }
.crud-field {
  display: grid;
  gap: 7px;
  color: #111b29;
  font-size: 12px;
  font-weight: 600;
}
.crud-form label {
  display: grid;
  gap: 7px;
  color: #111b29;
  font-size: 12px;
  font-weight: 600;
}
.crud-form input:not([type=checkbox]),
.crud-form textarea,
.crud-form select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(28,93,145,.18);
  border-radius: 8px;
  outline: none;
  color: #0b1422;
  background: #fff;
  font: 13px/1.5 Rubik, sans-serif;
}
.crud-form input:focus,
.crud-form textarea:focus,
.crud-form select:focus {
  border-color: #36aee1;
  box-shadow: 0 0 0 4px rgba(54,174,225,.11);
}
.crud-form input[readonly] { color: #53677a; background: #eef8fd; }
.crud-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.crud-checks {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 25px;
}
.crud-checks label { display: flex; align-items: center; gap: 8px; }
.crud-checks input { width: 17px; height: 17px; accent-color: #238fd2; }
.crud-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}
.crud-media-preview {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border: 1px solid rgba(28,93,145,.12);
  border-radius: 12px;
  background: #eef7fd;
}

/* Category actions add a sixth table column. */
.category-table-head,
.category-table-row {
  min-width: 900px;
  grid-template-columns: minmax(220px, 1.4fr) 115px 130px minmax(120px, .75fr) 50px 80px;
}

/* Editable media library. */
.media-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.media-library-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 12px 28px rgba(29,96,147,.08);
}
.media-library-card > a {
  height: 155px;
  display: block;
  padding: 8px;
  background: linear-gradient(145deg, #e9f7ff, #f2f3ff);
}
.media-library-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.media-library-card > div:nth-child(2) { padding: 14px 14px 10px; }
.media-library-card strong {
  display: block;
  overflow: hidden;
  color: #0b1422;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-library-card > div:nth-child(2) > span,
.media-library-card > div:nth-child(2) > small {
  display: block;
  margin-top: 5px;
  color: #617285;
  font-size: 9px;
}
.media-library-card > .row-actions {
  justify-content: stretch;
  padding: 0 14px 14px;
}
.media-library-card > .row-actions button { flex: 1; }

/* SweetAlert2 — shared frontend and admin feedback. */
.pintraj-swal {
  border: 1px solid rgba(35, 143, 210, .16) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #ffffff, #f3f9ff) !important;
  box-shadow: 0 24px 70px rgba(16, 75, 121, .18) !important;
  font-family: 'Rubik', sans-serif !important;
}
.pintraj-swal-title { color: #081321 !important; font-family: 'Rubik', sans-serif !important; }
.pintraj-swal-copy { color: #526477 !important; }
.pintraj-swal-confirm,
.pintraj-swal-cancel,
.pintraj-swal-delete {
  margin: 5px;
  padding: 11px 22px;
  border: 0;
  border-radius: 10px;
  font: 700 14px/1 'Rubik', sans-serif;
  cursor: pointer;
}
.pintraj-swal-confirm { color: #fff; background: linear-gradient(135deg, #54c7f4, #2675da); box-shadow: 0 8px 20px rgba(38, 117, 218, .24); }
.pintraj-swal-cancel { color: #334155; background: #e9f1f7; }
.pintraj-swal-delete { color: #fff; background: linear-gradient(135deg, #f46a7c, #d43c55); box-shadow: 0 8px 20px rgba(212, 60, 85, .22); }
.swal2-popup.swal2-toast.pintraj-swal { padding: 14px 16px !important; }
.swal2-popup.swal2-toast .pintraj-swal-title { font-size: 14px !important; }
@media (max-width: 1000px) {
  .media-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 750px) {
  .posts-table .admin-table-head,
  .posts-table .admin-table-row { min-width: 714px; grid-template-columns: 34px minmax(180px, 1fr) 95px 100px 160px; }
  .posts-toolbar { align-items: stretch; flex-wrap: wrap; }
  .posts-search { flex-basis: 100%; }
  .posts-delete-selected { margin-left: auto; }
  .crud-modal { padding: 21px 17px; }
  .crud-form-grid { grid-template-columns: 1fr; }
  .crud-checks { padding-top: 0; }
  .media-library-grid { grid-template-columns: 1fr; }
}

/* Search, answer and generative discovery controls. */
.discovery-card { display: grid; gap: 17px; }
.discovery-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(31, 108, 163, .12);
}
.discovery-card-heading .admin-kicker { margin: 0 0 5px; }
.discovery-card-heading h3 { margin: 0; font-size: 17px; }
.discovery-card-heading > .material-symbols-rounded {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #5ed5f1, #2c80da 65%, #6554db);
  box-shadow: 0 8px 18px rgba(38, 119, 198, .22);
}
.seo-field-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.character-count { justify-self: end; color: #708094; font-size: 9px; font-weight: 400; }
.indexing-check {
  display: flex !important;
  align-items: flex-start;
  gap: 10px !important;
  padding: 13px;
  margin: 0 !important;
  border: 1px solid rgba(31, 134, 193, .15);
  border-radius: 9px;
  background: #f5fbff;
}
.indexing-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: #218fd0; }
.indexing-check span { display: grid; gap: 3px; }
.indexing-check small { color: #68798b; font-size: 9px; font-weight: 400; }
.repeatable-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 4px;
}
.repeatable-heading > div { display: grid; gap: 3px; }
.repeatable-heading strong { color: #111b29; font-size: 12px; }
.repeatable-heading span { color: #718194; font-size: 9px; }
.repeatable-heading > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(32, 135, 195, .2);
  border-radius: 8px;
  color: #117aa9;
  background: #eef9ff;
  font-size: 10px;
  font-weight: 700;
}
.repeatable-heading > button .material-symbols-rounded { font-size: 16px; }
.repeatable-list { display: grid; gap: 10px; }
.repeatable-item {
  display: grid;
  grid-template-columns: 1fr 34px;
  align-items: start;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(30, 101, 151, .13);
  border-radius: 10px;
  background: linear-gradient(145deg, #fbfdff, #f4f9fd);
}
.repeatable-item > div { display: grid; gap: 8px; }
.repeatable-item > button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: #c94257;
  background: #ffedf0;
}
.repeatable-item > button .material-symbols-rounded { font-size: 17px; }
.source-item > div { grid-template-columns: 1fr 1.3fr; }
.crud-form > .discovery-card { padding: 18px; }

/* Public SEO/AEO/GEO blog experience. */
.blog-art-image { width: 92px; height: 90px; object-fit: cover; border-radius: 5px; }
.blog-empty { grid-column: 1 / -1; color: var(--muted); }
.public-blog,
.article-page { min-height: calc(100vh - 180px); }
.blog-index-hero {
  max-width: 1208px;
  margin: auto;
  padding: 90px 36px 65px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 78% 22%, rgba(68, 189, 241, .15), transparent 34%);
}
.blog-index-hero h1 {
  max-width: 850px;
  margin: 18px 0 22px;
  color: var(--text);
  font-size: clamp(48px, 7.6vw, 92px);
  line-height: .98;
  letter-spacing: -.075em;
}
.blog-index-hero h1 em { color: #56b9ed; font-style: normal; }
.blog-index-hero > p:not(.eyebrow) { max-width: 650px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.blog-search {
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 0 17px;
  border: 1px solid rgba(34, 132, 193, .2);
  border-radius: 13px;
  color: #258fc8;
  background: #fff;
  box-shadow: 0 12px 32px rgba(28, 104, 157, .09);
}
.blog-search input { width: 100%; padding: 15px 0; border: 0; outline: 0; color: #111827; background: transparent; font: 14px Rubik, sans-serif; }
.blog-index-grid { max-width: 1208px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: auto; padding: 55px 36px 90px; }
.blog-index-card { overflow: hidden; border: 1px solid rgba(24, 91, 143, .12); border-radius: 16px; background: #fff; box-shadow: 0 14px 36px rgba(27, 91, 139, .08); }
.blog-index-card > a { display: block; height: 245px; overflow: hidden; }
.blog-index-card > a img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-index-card > a img { aspect-ratio: 16 / 10; }
.blog-index-card:hover > a img { transform: scale(1.03); }
.blog-card-body { padding: 24px; }
.blog-card-meta,
.blog-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #637588; font: 10px 'DM Mono', monospace; }
.blog-card-meta span:first-child { color: #188abd; }
.blog-card-body h2 { margin: 14px 0 10px; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
.blog-card-body h2 a { color: #0b1525; }
.blog-card-body > p { min-height: 52px; margin: 0 0 22px; color: #586a7c; font-size: 13px; line-height: 1.65; }
.blog-card-footer { padding-top: 15px; border-top: 1px solid rgba(24, 91, 143, .1); }
.blog-card-footer a { color: #1286bd; font-family: Rubik, sans-serif; font-weight: 700; }
.blog-no-results { grid-column: 1 / -1; padding: 80px 20px; text-align: center; color: #617285; }
.blog-no-results .material-symbols-rounded { font-size: 44px; color: #46aee1; }
.blog-no-results h2 { color: #101827; }
.blog-state { min-height: 65vh; display: grid; place-content: center; justify-items: center; padding: 50px 20px; text-align: center; }
.blog-state > .material-symbols-rounded { color: #48afe2; font-size: 54px; }
.blog-state h1 { color: var(--text); font-size: 48px; }
.blog-state p { color: var(--muted); }
.blog-state a { color: #1288bf; font-weight: 700; }

.article-page { max-width: 1208px; margin: auto; padding: 35px 36px 90px; }
.article-breadcrumb { display: flex; gap: 9px; overflow: hidden; margin: 15px 0 60px; color: #728194; font: 10px 'DM Mono', monospace; white-space: nowrap; }
.article-breadcrumb a { color: #1689bf; }
.article-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; }
.article-header { max-width: 930px; margin: auto; text-align: center; }
.article-topic { display: flex; justify-content: center; gap: 9px; color: #1387bc; font: 700 10px 'DM Mono', monospace; text-transform: uppercase; }
.article-topic span { padding-left: 9px; border-left: 1px solid rgba(25, 132, 188, .25); }
.article-header h3 { max-width: 900px; margin: 22px auto; color: #0a1423; font-size: clamp(42px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -.06em; overflow-wrap: anywhere; }
.article-deck { max-width: 760px; margin: auto; color: #586a7c; font-size: 18px; line-height: 1.7; }
.article-byline { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 28px 0 40px; text-align: left; }
.article-avatar { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #55c9f0, #287ed3 68%, #6254d7); font-weight: 800; box-shadow: 0 8px 18px rgba(34, 117, 193, .22); }
.article-byline > div:nth-child(2) { display: grid; gap: 3px; }
.article-byline strong { color: #111827; font-size: 12px; }
.article-byline span,
.article-dates { color: #718194; font: 9px 'DM Mono', monospace; }
.article-dates { display: flex; gap: 12px; padding-left: 12px; border-left: 1px solid rgba(20, 88, 137, .14); }
.article-cover { width: 100%; max-height: 540px; object-fit: cover; border-radius: 20px; box-shadow: 0 25px 60px rgba(20, 77, 123, .15); }
.article-layout { display: grid; grid-template-columns: 240px minmax(0, 760px) 290px; justify-content: center; gap: 28px; margin-top: 55px; align-items: start; }
.article-aside { align-self: start; position: sticky; top: 30px; display: grid; gap: 25px; }
.article-right-aside { grid-column: 3; grid-row: 1; position: sticky; top: 92px; align-self: start; display: grid; gap: 25px; }
.article-right-aside { min-width: 0; }
.article-left-aside { grid-column: 1; grid-row: 1; position: sticky; top: 92px; align-self: start; }
.article-layout > .article-main { grid-column: 2; grid-row: 1; }
.article-toc,
.article-share { display: grid; gap: 10px; padding: 18px; border: 1px solid rgba(28, 100, 151, .16); border-radius: 14px; background: linear-gradient(145deg, #ffffff, #eef8ff); box-shadow: 0 12px 28px rgba(28, 100, 151, .08); }
.article-toc { position: relative; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(129, 99, 255, .18), transparent 42%), radial-gradient(circle at 0% 100%, rgba(44, 183, 238, .2), transparent 45%), linear-gradient(145deg, #ffffff 5%, #eff8ff 58%, #eef0ff); }
.article-toc::before { content: ''; position: absolute; width: 90px; height: 90px; top: -42px; right: -25px; border: 1px solid rgba(82, 131, 226, .2); border-radius: 50%; box-shadow: 0 0 0 14px rgba(82, 131, 226, .05), 0 0 0 28px rgba(82, 131, 226, .035); pointer-events: none; }
.article-toc > * { position: relative; z-index: 1; }
.article-toc strong,
.article-share strong { margin-bottom: 5px; color: #101827; font-size: 14px; }
.article-toc a,
.article-share a { color: #40566b; font-size: 12px; line-height: 1.5; }
.article-toc a { display: block; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.article-toc a { max-width: 100%; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.article-toc a::after { content: '→'; float: right; color: #3da9d6; opacity: 0; transform: translateX(-5px); transition: opacity .2s ease, transform .2s ease; }
.article-toc a:hover { color: #087fb7; border-color: rgba(61, 169, 214, .28); background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(225,243,255,.9)); transform: translateX(2px); box-shadow: 0 5px 14px rgba(38, 135, 190, .08); }
.article-toc a:hover::after { opacity: 1; transform: translateX(0); }
.article-toc a:hover,
.article-share a:hover { color: #1388bf; }
.social-share-row { display: flex; flex-wrap: wrap; gap: 9px; }
.social-share-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: #fff !important; box-shadow: 0 6px 12px rgba(28, 78, 125, .16); transition: transform .2s ease, box-shadow .2s ease; }
.social-share-icon:hover { color: #fff !important; transform: translateY(-3px); box-shadow: 0 9px 16px rgba(28, 78, 125, .24); }
.social-share-icon svg { width: 17px; height: 17px; fill: currentColor; }
.social-share-facebook { background: #3578c8; }
.social-share-linkedin { background: #147bb5; }
.social-share-x { background: #253246; }
.social-share-whatsapp { background: #53bd29; }
.social-share-email { background: #e44b5a; }
.article-toc a.is-child { padding-left: 10px; }
.article-main { min-width: 0; }
.key-takeaway { display: flex; gap: 15px; margin-bottom: 35px; padding: 22px; border: 1px solid rgba(37, 150, 211, .18); border-radius: 14px; background: linear-gradient(135deg, #eef9ff, #f3f5ff); }
.key-takeaway > .material-symbols-rounded { color: #258fd0; font-size: 28px; }
.key-takeaway h2 { margin: 1px 0 7px; color: #101827; font-size: 16px; }
.key-takeaway p { margin: 0; color: #40566b; font-size: 14px; line-height: 1.7; }
.article-content { color: #26384b; font-size: 16px; line-height: 1.85; }
.article-content h2,
.article-content h3 { scroll-margin-top: 25px; color: #0b1525; line-height: 1.2; letter-spacing: -.04em; }
.article-content h2 { margin: 1.8em 0 .6em; font-size: 32px; }
.article-content h3 { margin: 1.5em 0 .5em; font-size: 24px; }
.article-content > h1 { display: none; }
.article-content p { margin: 0 0 1.2em; }
.article-content ul,
.article-content ol { padding-left: 25px; }
.article-content li { margin: .55em 0; }
.article-content a { color: #087fb7; text-decoration: underline; }
.article-content blockquote { margin: 28px 0; padding: 18px 22px; border-left: 4px solid #39abe1; color: #40566b; background: #eff9ff; }
.article-content pre { position: relative; overflow-x: auto; margin: 28px 0; padding: 52px 20px 20px; border-radius: 10px; color: #dbeafe; background: #171717; box-shadow: 0 12px 24px rgba(14,25,42,.16); }
.article-content pre::before { content: '</>  Bash'; position: absolute; top: 0; left: 0; right: 0; height: 35px; display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.08); color: #f1f5f9; background: #1d1d1d; font: 12px Rubik, sans-serif; }
.article-content pre code { display: block; color: #9ee6b2; background: transparent; font: 13px/1.75 'DM Mono', monospace; white-space: pre; }
.article-content pre code.hljs { padding: 0; }
.article-content pre .hljs-comment, .article-content pre .hljs-quote { color: #788493; }
.article-content pre .hljs-keyword, .article-content pre .hljs-selector-tag, .article-content pre .hljs-built_in { color: #f59eaa; }
.article-content pre .hljs-string, .article-content pre .hljs-attr, .article-content pre .hljs-template-variable { color: #f6c177; }
.article-content pre .hljs-number, .article-content pre .hljs-literal { color: #9cc7ff; }
.article-content pre .hljs-title, .article-content pre .hljs-title.function_, .article-content pre .hljs-variable { color: #8fd3ff; }
.article-code-copy { position: absolute; z-index: 1; top: 8px; right: 14px; padding: 4px 8px; border: 0; border-radius: 5px; color: #d5dde8; background: rgba(255,255,255,.1); font: 10px Rubik, sans-serif; cursor: pointer; }
.article-code-copy:hover { color: #fff; background: rgba(255,255,255,.18); }
.ai-generator-page { max-width: 1100px; }
.ai-generator-form { display: grid; gap: 22px; margin-top: 28px; }
.ai-generator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ai-generator-grid label { display: grid; gap: 8px; color: #20344a; font-size: 13px; font-weight: 700; }
.ai-prompt-field { display: grid; gap: 8px; color: #20344a; font-size: 13px; font-weight: 700; }
.ai-generator-grid input, .ai-generator-grid select { min-height: 44px; padding: 0 13px; border: 1px solid #cbdbea; border-radius: 8px; color: #17263b; background: #fff; font: 14px Rubik, sans-serif; }
.ai-generator-grid input:focus, .ai-generator-grid select:focus { outline: 2px solid rgba(61,169,214,.2); border-color: #3da9d6; }
.ai-key-field, .ai-title-field, .ai-prompt-field { grid-column: span 2; }
.ai-prompt-field textarea { width: 100%; min-height: 135px; padding: 13px; border: 1px solid #cbdbea; border-radius: 8px; color: #17263b; background: #fff; font: 14px/1.6 Rubik, sans-serif; resize: vertical; }
.ai-prompt-field textarea:focus { outline: 2px solid rgba(61,169,214,.2); border-color: #3da9d6; }
.ai-generate-button { justify-self: start; display: inline-flex; align-items: center; gap: 9px; }
.ai-batch-titles { width: 100%; padding: 13px; border: 1px solid #cbdbea; border-radius: 8px; color: #17263b; background: #fff; font: 14px/1.6 Rubik, sans-serif; resize: vertical; }
.ai-batch-titles:focus { outline: 2px solid rgba(61,169,214,.2); border-color: #3da9d6; }
.ai-batch-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #637588; font-size: 12px; }
.ai-batch-status { margin-top: 30px; padding: 25px; border: 1px solid #cfe0ef; border-radius: 14px; background: linear-gradient(135deg, #fff, #f1f8ff); }
.ai-batch-status h3 { margin: 4px 0 0; color: #0b1525; font-size: 27px; text-transform: capitalize; }
.ai-batch-progress { height: 9px; overflow: hidden; margin: 22px 0; border-radius: 999px; background: #dcecf8; }
.ai-batch-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #287ed3, #7c5dff, #43c2ed); transition: width .4s ease; }
.ai-batch-items { display: grid; gap: 8px; }
.ai-batch-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #dbe8f3; border-radius: 9px; background: rgba(255,255,255,.8); }
.ai-batch-item strong { color: #1c3046; font-size: 13px; }
.ai-batch-item small { display: block; margin-top: 4px; color: #bd4053; font-size: 11px; }
.ai-batch-item a { color: #147fba; font-size: 11px; font-weight: 700; }
.ai-batch-item em { color: #60758a; font: 10px 'DM Mono', monospace; text-transform: capitalize; }
.ai-batch-dot { width: 9px; height: 9px; border-radius: 50%; background: #a9bfd0; }
.ai-batch-dot.running { background: #f0a537; box-shadow: 0 0 0 4px rgba(240,165,55,.16); }
.ai-batch-dot.published { background: #31ad7a; }
.ai-batch-dot.failed { background: #d94e67; }
.ai-generated-result { margin-top: 30px; padding: 25px; border: 1px solid #cfe0ef; border-radius: 14px; background: linear-gradient(135deg, #fff, #f1f8ff); }
.ai-result-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.ai-result-heading h3 { margin: 4px 0 0; color: #0b1525; font-size: 27px; }
.ai-result-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; color: #277cac; font-size: 12px; font-weight: 700; }
.ai-result-meta span { padding: 6px 9px; border-radius: 999px; background: #e5f4ff; }
.ai-result-preview { max-height: 470px; overflow: auto; margin-top: 20px; padding: 20px; border: 1px solid #d9e6f1; border-radius: 10px; color: #26384b; background: #fff; line-height: 1.7; }
.ai-result-preview h2, .ai-result-preview h3 { color: #0b1525; }
@media (max-width: 700px) { .ai-generator-grid { grid-template-columns: 1fr; } .ai-key-field, .ai-title-field, .ai-prompt-field { grid-column: auto; } .ai-result-heading { flex-direction: column; } }
@media (max-width: 700px) { .ai-batch-actions { align-items: stretch; flex-direction: column; } .ai-batch-item { grid-template-columns: 10px minmax(0, 1fr); } .ai-batch-item a, .ai-batch-item em { grid-column: 2; } }

.sitemap-panel { max-width: 900px; }
.sitemap-card { display: flex; align-items: center; gap: 18px; margin-top: 28px; padding: 24px; border: 1px solid #cfe0ef; border-radius: 16px; background: linear-gradient(135deg, #fff, #eef7ff 60%, #f0efff); box-shadow: 0 16px 36px rgba(35, 113, 164, .1); }
.sitemap-icon { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 52px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #55c9f0, #287ed3 68%, #6254d7); font-size: 28px; box-shadow: 0 10px 20px rgba(40, 126, 211, .22); }
.sitemap-card strong { display: block; color: #172b40; font-size: 19px; }
.sitemap-card a { display: block; margin-top: 8px; color: #127fb7; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.sitemap-card p { margin: 8px 0 0; color: #687c90; font-size: 12px; }
.sitemap-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
@media (max-width: 700px) { .sitemap-card { align-items: flex-start; flex-direction: column; } .sitemap-actions { align-items: flex-start; flex-direction: column; } }
.turnstile-widget { min-height: 65px; margin: 4px 0 2px; }
.turnstile-widget iframe { max-width: 100%; }
.article-content code { font-family: 'DM Mono', monospace; }
.article-content img { max-width: 100%; height: auto; border-radius: 12px; }
.article-references,
.article-faq,
.article-author { margin-top: 55px; padding-top: 35px; border-top: 1px solid rgba(25, 87, 133, .14); }
.article-references h2,
.article-faq h2,
.article-author h2 { color: #0b1525; font-size: 27px; letter-spacing: -.04em; }
.article-references li { margin: 10px 0; color: #647589; }
.article-references a { color: #087fb7; text-decoration: underline; }
.article-faq details { border-bottom: 1px solid rgba(25, 87, 133, .12); }
.article-faq summary { padding: 18px 0; color: #111827; font-size: 15px; font-weight: 700; cursor: pointer; }
.article-faq details p { margin: 0 0 19px; color: #526579; font-size: 14px; line-height: 1.75; }
.article-author { display: flex; gap: 18px; }
.article-author .article-avatar { width: 54px; height: 54px; flex-basis: 54px; }
.article-author .eyebrow { margin: 0 0 5px; }
.article-author h2 { margin: 0 0 8px; }
.article-author p:not(.eyebrow) { color: #586a7c; font-size: 13px; line-height: 1.7; }
.article-author a { color: #1285bc; font-weight: 700; }
.article-byline,
.article-author { display: none; }
.blog-lead-card { position: relative; overflow: hidden; padding: 21px; border: 1px solid rgba(39, 145, 202, .24); border-radius: 16px; background: radial-gradient(circle at 100% 0%, rgba(124, 93, 255, .16), transparent 40%), linear-gradient(155deg, #f3fbff, #f2f5ff 65%, #edf0ff); box-shadow: 0 18px 42px rgba(35, 113, 164, .16), 0 3px 8px rgba(28, 86, 130, .06); }
.blog-lead-card::after { content: ''; position: absolute; width: 100px; height: 100px; right: -48px; bottom: -48px; border: 1px solid rgba(61, 169, 214, .18); border-radius: 50%; box-shadow: 0 0 0 14px rgba(61, 169, 214, .05), 0 0 0 28px rgba(61, 169, 214, .03); pointer-events: none; }
.blog-lead-card > * { position: relative; z-index: 1; }
.blog-lead-icon { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #75d9f6, #3188d8 60%, #5f5bd3); box-shadow: 0 8px 18px rgba(40, 123, 205, .22); font-size: 22px; }
.blog-lead-card .eyebrow { margin: 0 0 6px; color: #1689bf; font-size: 9px; }
.blog-lead-card h2 { margin: 0 0 9px; color: #0b1525; font-size: 24px; line-height: 1.1; letter-spacing: -.05em; }
.blog-lead-copy { margin: 0 0 17px; color: #607388; font-size: 12px; line-height: 1.6; }
.blog-lead-form { display: grid; gap: 9px; }
.blog-lead-form input,
.blog-lead-form textarea { display: block; width: 100%; max-width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid rgba(29, 106, 157, .17); border-radius: 8px; outline: none; color: #142131; background: rgba(255,255,255,.88); font: 12px/1.45 Rubik, sans-serif; resize: vertical; }
.blog-lead-form input:focus,
.blog-lead-form textarea:focus { border-color: #36aee1; box-shadow: 0 0 0 4px rgba(54,174,225,.12); }
.blog-lead-form input::placeholder,
.blog-lead-form textarea::placeholder { color: #8a9aac; }
.blog-lead-form .button { width: 100%; justify-content: center; margin-top: 3px; border: 0; cursor: pointer; }
.blog-lead-form .button:disabled { opacity: .65; cursor: wait; }
.blog-lead-form .turnstile-widget { width: 100%; max-width: 100%; min-height: 65px; overflow: hidden; }
.blog-lead-form .turnstile-widget iframe { display: block; width: 100% !important; max-width: 100%; min-height: 65px; border: 0; }
.blog-lead-error { margin: 3px 0 0; color: #c03750; font-size: 11px; line-height: 1.4; }
.blog-lead-success { padding: 14px 0 3px; color: #176b9c; }
.blog-lead-success > .material-symbols-rounded { color: #238fd0; font-size: 28px; }
.blog-lead-success strong { display: block; margin-top: 7px; color: #112238; font-size: 13px; }
.blog-lead-success p { margin: 5px 0 0; color: #647589; font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .blog-index-grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-layout > .article-main { grid-column: 1; }
  .article-left-aside,
  .article-right-aside { position: static; grid-column: 1; grid-row: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .article-aside { position: static; }
  .article-dates { flex-wrap: wrap; }
}
@media (max-width: 650px) {
  .lead-pipeline { grid-template-columns: 1fr 1fr; }
  .lead-record-header { align-items: flex-start; flex-direction: column; }
  .lead-record-actions { width: 100%; }
  .lead-record-actions .editor-button { flex: 1; }
  .lead-record-tabs { overflow-x: auto; }
  .lead-record-tabs button { white-space: nowrap; }
  .salesforce-layout > .salesforce-detail { top: 10px; left: 10px; width: calc(100vw - 20px); max-height: calc(100vh - 20px); transform: none; }
  .leads-crm-layout { grid-template-columns: 1fr; }
  .lead-detail-card > header { flex-direction: column; }
  .lead-detail-card header select { width: 100%; }
  .lead-list-item { grid-template-columns: 35px minmax(0, 1fr); }
  .lead-status { grid-column: 2; justify-self: start; }
  .seo-field-grid,
  .source-item > div { grid-template-columns: 1fr; }
  .repeatable-heading { align-items: flex-start; }
  .blog-index-hero { padding: 60px 20px 45px; }
  .blog-index-hero h1 { font-size: 49px; }
  .blog-index-grid { padding: 35px 20px 65px; }
  .blog-index-card > a { height: 190px; }
  .article-page { padding: 25px 20px 65px; }
  .article-breadcrumb { margin-bottom: 38px; }
  .article-header h3 { font-size: 43px; }
  .article-deck { font-size: 16px; }
  .article-byline { align-items: flex-start; flex-wrap: wrap; }
  .article-dates { width: 100%; justify-content: center; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(20, 88, 137, .14); }
  .article-cover { border-radius: 13px; }
  .article-layout { margin-top: 38px; }
  .article-left-aside,
  .article-right-aside { grid-template-columns: 1fr; }
  .article-toc { display: grid; order: -1; padding: 18px; }
  .article-toc strong { font-size: 14px; }
  .article-toc a { padding: 10px 12px; font-size: 13px; background: rgba(255,255,255,.58); }
  .article-toc a::after { display: none; }
  .article-content { font-size: 15px; }
  .article-content h2 { font-size: 27px; }
}

.exam-page { min-height: 100vh; padding: 86px clamp(20px, 6vw, 96px); color: #142238; background: linear-gradient(145deg, #f7fcff, #eef5ff); }
.exam-browse-page { min-height: 100vh; padding: 18px clamp(16px, 3vw, 42px) 46px; color: #17263b; background: #fbfdff; }.exam-browse-search { display: flex; align-items: center; gap: 16px; padding: 0 4px 17px; border-bottom: 1px solid #edf2f5; }.exam-browse-search label, .exam-quiz-search { display: flex; align-items: center; gap: 12px; border: 1px solid #dce8ef; border-radius: 10px; background: #fff; }.exam-browse-search label { flex: 0 1 660px; padding: 11px 16px; }.exam-browse-search input, .exam-quiz-search input { width: 100%; border: 0; outline: 0; color: #30445b; background: transparent; font: inherit; }.exam-browse-search .material-symbols-rounded, .exam-quiz-search .material-symbols-rounded { color: #607a91; }.exam-browse-search button { position: relative; margin-left: auto; border: 0; color: #263e55; background: transparent; cursor: pointer; }.exam-browse-search button i { position: absolute; top: 0; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #ef645d; }.exam-profile-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: #268a5e; font-weight: 700; }.exam-browse-search strong { white-space: nowrap; }.exam-hero-banner { position: relative; display: flex; align-items: center; gap: 24px; min-height: 172px; margin: 18px 0 30px; overflow: hidden; padding: 28px 38px; border-radius: 18px; background: linear-gradient(105deg, #e8f7ed 0%, #edf7f0 30%, #b9dfd1 58%, #f2d09a 100%); }.exam-hero-banner > * { position: relative; z-index: 1; }.exam-hero-icon { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; color: #2a9367; background: rgba(215,244,224,.72); }.exam-hero-icon .material-symbols-rounded { font-size: 51px; }.exam-hero-banner p { margin: 0 0 6px; color: #2c8460; font-size: 19px; font-weight: 700; }.exam-hero-banner h1 { margin: 0 0 10px; color: #2b805d; font-size: clamp(25px, 3vw, 37px); }.exam-hero-banner span { color: #526d72; font-size: 16px; }.exam-hero-art { position: absolute !important; right: 0; bottom: -55px; width: 48%; height: 150%; opacity: .48; background: radial-gradient(circle at 72% 25%, #fff 0 22px, transparent 23px), linear-gradient(155deg, transparent 30%, #6da88c 31% 54%, transparent 55%), linear-gradient(25deg, transparent 44%, #7fb69c 45% 64%, transparent 65%); }.exam-browse-heading { display: flex; align-items: end; gap: 16px; margin-bottom: 18px; }.exam-browse-heading h2, .exam-results-heading h2 { margin: 0; font-size: 28px; }.exam-browse-heading p { margin: 5px 0 0; color: #74869a; }.exam-quiz-search { width: min(480px, 38vw); margin-left: auto; padding: 11px 15px; }.exam-search-button { display: flex; align-items: center; gap: 6px; min-height: 45px; padding: 0 19px; border: 0; border-radius: 9px; color: #fff; background: #2b9366; font-weight: 700; cursor: pointer; }.exam-subject-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 10px; margin-bottom: 20px; }.exam-subject-strip > button { display: grid; justify-items: center; gap: 5px; min-height: 112px; padding: 13px 8px; border: 1px solid transparent; border-radius: 12px; color: #25384e; background: #f1f7fc; cursor: pointer; }.exam-subject-strip > button:nth-child(3n) { background: #f8f4ff; }.exam-subject-strip > button:nth-child(4n) { background: #fff5f3; }.exam-subject-strip > button.active { border-color: #39a176; box-shadow: 0 0 0 1px #39a176; }.exam-subject-strip strong { font-size: 14px; }.exam-subject-strip small { color: #718399; font-size: 11px; }.subject-tile-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #2876df; background: #e2efff; }.subject-tile-icon.green { color: #319569; background: #e1f5e8; }.subject-tile-icon.purple { color: #7646d2; background: #eee7ff; }.subject-tile-icon.rose { color: #df5b61; background: #ffe9ea; }.subject-tile-icon.gold { color: #dd9b19; background: #fff2d2; }.subject-tile-icon.pink { color: #dd4f8a; background: #ffe7f2; }.subject-tile-icon.violet { color: #7557d8; background: #eee9ff; }.exam-browse-body { display: grid; grid-template-columns: 295px minmax(0, 1fr); gap: 22px; }.exam-filter-card { align-self: start; padding: 21px; border: 1px solid #e1eaf0; border-radius: 13px; background: #fff; }.exam-filter-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }.exam-filter-heading h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; }.exam-filter-heading button { border: 0; color: #2578da; background: transparent; font-weight: 700; cursor: pointer; }.exam-filter-card fieldset { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; border: 0; }.exam-filter-card legend { margin-bottom: 5px; color: #1e2d42; font-size: 16px; font-weight: 700; }.exam-filter-card label { display: flex; align-items: center; gap: 10px; color: #60748b; font-size: 14px; }.exam-filter-card input { width: 19px; height: 19px; accent-color: #3ba06f; }.exam-apply-filters { width: 100%; padding: 13px; border: 0; border-radius: 8px; color: #fff; background: #2d9a68; font-size: 15px; font-weight: 700; cursor: pointer; }.exam-results-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; }.exam-results-heading h2 span { color: #64788f; font-size: 18px; }.exam-results-heading label { display: flex; align-items: center; gap: 9px; color: #718398; font-size: 13px; }.exam-results-heading select { padding: 10px 28px 10px 12px; border: 1px solid #dce7ef; border-radius: 8px; color: #273a50; background: #fff; font: inherit; font-weight: 700; }.exam-quiz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.exam-quiz-card { overflow: hidden; border: 1px solid #e0e9ef; border-radius: 13px; background: #fff; box-shadow: 0 5px 15px rgba(64,107,135,.05); }.exam-quiz-card.blue { --quiz-bg: #edf6ff; --quiz-icon: #2f74e3; }.exam-quiz-card.purple { --quiz-bg: #f5f0ff; --quiz-icon: #7047d3; }.exam-quiz-card.rose { --quiz-bg: #fff1f1; --quiz-icon: #db5b5c; }.exam-quiz-card.gold { --quiz-bg: #fff8e5; --quiz-icon: #d99b1e; }.exam-quiz-card.green { --quiz-bg: #edfaf1; --quiz-icon: #3b9c6b; }.exam-quiz-card.pink { --quiz-bg: #fff0f7; --quiz-icon: #d94b8c; }.exam-quiz-card.violet { --quiz-bg: #f2efff; --quiz-icon: #7657d3; }.exam-quiz-card-top { display: flex; align-items: center; gap: 12px; padding: 17px; background: var(--quiz-bg); }.exam-quiz-card-top .subject-tile-icon { flex: 0 0 48px; color: var(--quiz-icon); background: rgba(255,255,255,.66); }.exam-quiz-card h3 { margin: 0 0 5px; font-size: 17px; }.exam-quiz-card p { margin: 0; color: #667b90; font-size: 13px; }.exam-quiz-card .bookmark { margin-left: auto; color: #60768b; }.exam-quiz-meta { display: flex; align-items: center; gap: 13px; padding: 14px 17px; color: #64798d; font-size: 13px; }.exam-quiz-meta > span { display: flex; align-items: center; gap: 5px; }.exam-quiz-meta .material-symbols-rounded { font-size: 17px; }.exam-quiz-meta em { padding: 6px 11px; border-radius: 7px; color: #2c9868; background: #e8f7ed; font-size: 12px; font-style: normal; font-weight: 700; }.exam-quiz-card > a { display: block; margin: 0 17px 17px; padding: 12px; border-radius: 8px; color: #2b8a61; background: #ecf9f0; text-align: center; font-weight: 700; text-decoration: none; }.exam-quiz-card > a span { margin-left: 5px; font-size: 19px; }
.exam-site-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - 92px); background: #f3f8fc; }
.exam-site-sidebar { display: none; }
.exam-browse-search { display: none; }
.exam-site-content .exam-player { padding: 34px clamp(20px, 4vw, 58px); }
.exam-browse-body { grid-template-columns: minmax(0, 1fr); }.exam-filter-card { display: none; }
.exam-quiz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.exam-site-sidebar { display: none; flex-direction: column; padding: 48px 25px 32px; border-right: 1px solid #d8e5ee; background: linear-gradient(180deg, #f8fcff, #edf6fb); }
.exam-sidebar-kicker { margin: 0 0 12px; color: #2789bf; font: 700 11px/1.2 'DM Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }.exam-site-sidebar h2 { margin: 0 0 34px; color: #101b2d; font-size: 29px; line-height: 1.05; letter-spacing: -.05em; }.exam-site-sidebar h2 em { color: #278ec5; font-style: normal; }.exam-site-sidebar nav { display: grid; gap: 8px; }.exam-site-sidebar nav a { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 9px; color: #536a80; font-size: 13px; font-weight: 700; text-decoration: none; }.exam-site-sidebar nav a:hover, .exam-site-sidebar nav a.active { color: #087fbd; background: #e1f2fb; }.exam-site-sidebar nav .material-symbols-rounded { font-size: 19px; }.exam-sidebar-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: auto; padding: 14px; border: 1px solid #cfe2ed; border-radius: 11px; color: #5d748a; background: rgba(255,255,255,.72); }.exam-sidebar-tip .material-symbols-rounded { color: #ed9d2e; font-size: 20px; }.exam-sidebar-tip p { margin: 0; font-size: 11px; line-height: 1.5; }.exam-site-content { min-width: 0; }.exam-site-content .exam-page { min-height: calc(100vh - 92px); }
.exam-page-header { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.exam-page h1 { margin: 8px 0 12px; color: #0b1525; font-size: clamp(36px, 5vw, 64px); letter-spacing: -.06em; }
.exam-page-header p:not(.admin-kicker), .exam-intro > p:not(.admin-kicker) { color: #5e7187; line-height: 1.7; }
.exam-grid { display: grid; gap: 16px; max-width: 980px; margin: auto; }
.exam-card { display: flex; align-items: center; gap: 18px; padding: 22px; border: 1px solid #cfe1f0; border-radius: 18px; background: rgba(255,255,255,.82); box-shadow: 0 14px 36px rgba(45,108,160,.08); }
.exam-card > div:nth-child(2) { flex: 1; }.exam-card h3 { margin: 4px 0 8px; font-size: 22px; }.exam-card p:not(.admin-kicker) { margin: 0; color: #63768a; font-size: 13px; }.exam-card-icon, .exam-result-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; background: linear-gradient(145deg,#36b5e7,#4358d7); }.exam-card-icon .material-symbols-rounded { font-size: 28px; }
.exam-intro, .exam-result { max-width: 760px; margin: auto; text-align: center; }.exam-meta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 28px 0; }.exam-meta span { padding: 10px 14px; border: 1px solid #cfe1f0; border-radius: 10px; background: #fff; color: #58708a; font-size: 13px; }.exam-result-icon { margin: 0 auto 22px; }.exam-result strong { display: block; margin: 18px 0 6px; color: #168ac4; font-size: 64px; letter-spacing: -.06em; }
.exam-player { max-width: 1240px; margin: auto; }.exam-player-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }.exam-player h1 { font-size: 34px; }.exam-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }.exam-paper { min-width: 0; }.exam-paper-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; padding: 15px 18px; border: 1px solid #cbddea; background: #fff; }.exam-paper-meta span { color: #64788f; font-size: 13px; }.exam-question-list { display: grid; gap: 18px; }.exam-question { padding: 24px; border: 1px solid #d4e3ef; border-radius: 12px; background: #fff; }.exam-question-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid #e0e9f0; }.question-number { color: #1389c3; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }.exam-rich-content { color: #1b2b3e; font-size: 18px; line-height: 1.65; }.exam-rich-content pre { position: relative; overflow: auto; padding: 16px; border-radius: 9px; color: #eaf6ff; background: #172638; cursor: copy; }.exam-rich-content code { white-space: pre-wrap; }.exam-options { display: grid; gap: 10px; margin-top: 18px; }.exam-options label { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #d7e4ee; border-radius: 10px; cursor: pointer; }.exam-options label.selected { border-color: #168fd0; background: #eef9ff; }.exam-options input { flex: 0 0 auto; margin-top: 5px; accent-color: #168fd0; }.exam-options .exam-rich-content { font-size: 16px; line-height: 1.45; }.answer-state { padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }.answer-state.correct, .instant-answer.correct { color: #187844; background: #eaf8ef; }.answer-state.incorrect, .instant-answer.incorrect { color: #a33b3b; background: #fff0f0; }.instant-answer { margin-top: 18px; padding: 14px 16px; border-radius: 10px; }.instant-answer strong { display: block; margin-bottom: 6px; }.instant-answer .exam-rich-content { font-size: 14px; }.exam-navigator { position: sticky; top: 24px; padding: 18px; border: 1px solid #cbddea; border-radius: 12px; background: #fff; box-shadow: 0 12px 26px rgba(43, 91, 129, .08); }.exam-navigator-heading { display: grid; gap: 6px; margin-bottom: 16px; }.exam-navigator-heading span { color: #657b91; font-size: 12px; }.exam-navigator-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }.exam-navigator-grid a { display: grid; place-items: center; min-height: 42px; border: 1px solid #c3ced7; border-radius: 5px; color: #33475a; background: #f5f7f8; text-decoration: none; font-weight: 700; }.exam-navigator-grid a.answered { border-color: #2d9a62; color: #fff; background: #2d9a62; }.exam-submit-side { width: 100%; margin-top: 20px; }.exam-loading { display: grid; place-items: center; min-height: 70vh; }
.exam-admin-form { display: grid; gap: 14px; max-width: 820px; }.exam-admin-form input, .exam-admin-form textarea, .exam-admin-form select { width: 100%; padding: 12px 14px; border: 1px solid #cfe0ee; border-radius: 9px; background: #fff; color: #1a2b40; font: inherit; }.exam-admin-form textarea { min-height: 100px; resize: vertical; }.exam-admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.exam-admin-list { display: grid; gap: 10px; margin-top: 12px; }.exam-admin-list article { display: grid; gap: 5px; padding: 14px; border: 1px solid #d5e4ef; border-radius: 10px; background: #fff; }.exam-admin-list span { color: #64788e; font-size: 12px; }.exam-admin-list a { color: #1388c1; font-weight: 700; }
.exam-manager-tabs { display: flex; gap: 8px; margin: 22px 0; border-bottom: 1px solid #d8e5ef; }.exam-manager-tabs button { padding: 12px 18px; border: 0; border-bottom: 3px solid transparent; color: #60758b; background: transparent; font-weight: 700; cursor: pointer; }.exam-manager-tabs button.active { border-color: #168fd0; color: #0874ad; }.exam-manager-columns { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(320px, 1.25fr); gap: 18px; align-items: start; }.exam-manager-form { display: grid; gap: 15px; }.exam-manager-form label, .exam-answer-settings label, .exam-subject-select { display: grid; gap: 7px; color: #445c74; font-size: 12px; font-weight: 700; }.exam-manager-form input, .exam-manager-form textarea, .exam-manager-form select, .exam-answer-settings input, .exam-answer-settings select, .exam-subject-select select { width: 100%; padding: 11px 12px; border: 1px solid #cbddea; border-radius: 8px; background: #fff; color: #1a2b40; font: inherit; }.exam-manager-form textarea { min-height: 95px; resize: vertical; }.exam-manager-list { display: grid; gap: 10px; }.exam-manager-list article { display: flex; gap: 12px; align-items: flex-start; padding: 15px; border: 1px solid #d4e3ee; border-radius: 11px; background: rgba(255,255,255,.8); }.exam-manager-list article strong { color: #162a41; }.exam-manager-list article p { margin: 5px 0; color: #60758a; font-size: 12px; line-height: 1.5; }.exam-manager-list article a { color: #087fbd; font-size: 12px; font-weight: 700; }.exam-list-icon { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #087fbd; background: #e5f5ff; }.exam-question-builder { display: grid; gap: 16px; }.exam-builder-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 16px; }.exam-builder-heading h3 { margin: 4px 0 0; }.question-editor-tools { display: flex; gap: 12px; align-items: center; margin-top: 10px; color: #71849a; font-size: 12px; }.question-editor-tools label { cursor: pointer; }.exam-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }.exam-option-grid .rich-editor { margin-top: 5px; }.exam-answer-settings { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.exam-bulk-toolbar { display: flex; align-items: center; gap: 16px; margin: 18px 0 12px; padding: 12px 14px; border: 1px solid #d5e3ed; border-radius: 10px; background: #f8fcff; color: #536b82; font-size: 13px; }.exam-bulk-toolbar label { display: flex; align-items: center; gap: 8px; font-weight: 700; }.exam-bulk-toolbar span { margin-right: auto; }.editor-button.danger { border-color: #f0b8c1; color: #be3850; background: #fff5f6; }.exam-question-table { display: grid; gap: 10px; }.exam-question-table article { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 15px; border: 1px solid #d4e3ee; border-radius: 11px; background: #fff; }.exam-question-table article > input { margin-top: 4px; }.exam-question-preview { min-width: 0; color: #50677e; font-size: 13px; line-height: 1.55; }.exam-question-preview strong { display: block; margin-bottom: 6px; color: #182a40; }.exam-question-preview p { margin: 0; }.exam-question-preview img { max-width: 180px; max-height: 90px; object-fit: contain; }
.resume-light .admin-dashboard .exam-manager .admin-button { min-height: 46px; color: #fff !important; background: linear-gradient(135deg, #1677d2 0%, #25b9e8 58%, #5367dc 100%) !important; box-shadow: 0 10px 22px rgba(26, 126, 199, .2); }
.subject-overview-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; }.subject-overview-actions .admin-button, .subject-overview-actions .editor-button { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }.subject-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }.subject-overview-grid article { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border: 1px solid #d4e3ee; border-radius: 12px; background: rgba(255,255,255,.82); }.subject-overview-grid article strong { color: #162a41; }.subject-overview-grid article p { margin: 6px 0; color: #60758a; font-size: 12px; line-height: 1.5; }.subject-overview-grid article small { color: #1388c1; font-size: 11px; font-weight: 700; }
.redesigned-question-builder { max-width: 980px; }.question-authoring-card, .question-options-card, .question-explanation-card { box-shadow: 0 12px 28px rgba(46, 105, 149, .07); }.question-options-card .exam-builder-heading { align-items: center; }.question-help { color: #71849a; font-size: 12px; }.rich-option-grid > label { display: grid; gap: 8px; color: #445c74; font-size: 12px; font-weight: 700; }.rich-option-grid .rich-editor { min-height: 155px; }.rich-option-grid .rich-editor .tiptap-content { min-height: 72px; }.latex-editor { margin-top: 15px; padding: 15px; border: 1px solid #cddfeb; border-radius: 11px; background: linear-gradient(145deg, #f5fbff, #f4f3ff); }.latex-editor-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }.latex-editor-heading strong, .latex-editor-heading span { display: block; }.latex-editor-heading strong { color: #1e3853; font-size: 13px; }.latex-editor-heading span { margin-top: 4px; color: #71849a; font-size: 11px; line-height: 1.5; }.latex-editor-heading .material-symbols-rounded { color: #4b65d8; font-size: 22px; }.latex-editor textarea { display: block; width: 100%; min-height: 76px; margin: 12px 0; padding: 12px; border: 1px solid #cbd9eb; border-radius: 8px; outline: none; resize: vertical; color: #233a59; background: #fff; font: 13px/1.6 'DM Mono', monospace; }.latex-editor textarea:focus { border-color: #448ed0; box-shadow: 0 0 0 3px rgba(68,142,208,.12); }.latex-editor-footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; }.latex-editor-footer code { min-width: 0; overflow: auto; color: #546a83; font-size: 11px; white-space: nowrap; }.question-explanation-card > h3 { margin: 4px 0 15px; }
.question-csv-importer { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 980px; margin-bottom: 18px; padding: 18px 20px; }.question-csv-importer h3 { margin: 3px 0 6px; }.question-csv-importer p { margin: 0; }.question-csv-importer code { padding: 2px 4px; border-radius: 4px; color: #275b7a; background: #eaf5fb; }.question-csv-importer .row-actions { flex-shrink: 0; }.question-csv-importer label.admin-button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ai-question-form { max-width: 980px; }.ai-question-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }.ai-question-form-grid label { display: grid; gap: 7px; color: #445c74; font-size: 12px; font-weight: 700; }.ai-question-form-grid input, .ai-question-form-grid select { width: 100%; padding: 11px 12px; border: 1px solid #cbddea; border-radius: 8px; color: #1a2b40; background: #fff; font: inherit; }.ai-question-form-grid .ai-key-field { grid-column: 1 / -1; }.ai-question-preview { max-width: 980px; margin-top: 22px; }.ai-question-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }.ai-question-preview-heading h3 { margin: 3px 0 0; }.ai-question-preview-list { display: grid; gap: 12px; }.ai-question-preview-list article { padding: 17px; border: 1px solid #d4e3ee; border-radius: 11px; background: #fff; }.ai-question-preview-list strong { color: #1c3047; }.ai-question-preview-list strong > span { font-weight: 700; }.ai-question-preview-list ol { display: grid; gap: 5px; margin: 10px 0; padding-left: 25px; color: #546c82; }.ai-question-preview-list li.correct { color: #18814a; font-weight: 700; }.ai-question-preview-list small { color: #71849a; line-height: 1.5; }
.ai-question-form .ai-topic-field { grid-column: 1 / -1; }.ai-question-form .ai-topic-field textarea { min-height: 150px; width: 100%; padding: 12px; border: 1px solid #cbddea; border-radius: 8px; resize: vertical; color: #1a2b40; background: #fff; font: inherit; }.ai-question-batch-status { max-width: 980px; margin-top: 22px; padding: 20px; border: 1px solid #d4e3ee; border-radius: 12px; background: #fff; }.ai-question-batch-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }.ai-question-batch-summary span { padding: 9px 12px; border-radius: 8px; color: #536b82; background: #f1f7fb; font-size: 13px; }.ai-question-batch-summary strong { color: #168ac4; }
.ai-question-form .ai-prompt-field { grid-column: 1 / -1; display: grid; gap: 7px; color: #445c74; font-size: 12px; font-weight: 700; }.ai-question-form .ai-prompt-field textarea { width: 100%; padding: 12px; border: 1px solid #cbddea; border-radius: 8px; resize: vertical; color: #1a2b40; background: #fff; font: inherit; }
.redesigned-question-builder .exam-answer-settings { grid-template-columns: 1fr; }.redesigned-question-builder .exam-answer-settings label:nth-child(n+2) { display: none; }
.searchable-subject-picker { position: relative; display: grid; gap: 7px; min-width: 220px; color: #445c74; font-size: 12px; font-weight: 700; }.searchable-subject-input { position: relative; }.searchable-subject-input input { width: 100%; padding: 11px 38px 11px 12px; border: 1px solid #cbddea; border-radius: 8px; background: #fff; color: #1a2b40; font: inherit; }.searchable-subject-input input:focus { outline: none; border-color: #329bd1; box-shadow: 0 0 0 3px rgba(50,155,209,.12); }.searchable-subject-input .material-symbols-rounded { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #168dc5; font-size: 18px; pointer-events: none; }.searchable-subject-results { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; max-height: 230px; overflow: auto; margin-top: 5px; padding: 5px; border: 1px solid #cbddea; border-radius: 9px; background: #fff; box-shadow: 0 14px 28px rgba(36,89,130,.16); }.searchable-subject-results button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 6px; background: transparent; color: #243c55; text-align: left; cursor: pointer; }.searchable-subject-results button:hover { background: #eaf7ff; color: #087fbd; }.searchable-subject-results small { display: block; padding: 10px; color: #71849a; }.rich-option-field { display: grid; gap: 8px; color: #445c74; font-size: 12px; font-weight: 700; }
.redesigned-question-builder .rich-option-grid { grid-template-columns: 1fr; gap: 18px; }.redesigned-question-builder .rich-option-grid > label { display: block; }.redesigned-question-builder .rich-option-grid .rich-editor { width: 100%; }
@media (max-width: 650px) { .exam-card { align-items: flex-start; flex-wrap: wrap; }.exam-card .admin-button { width: 100%; justify-content: center; }.exam-player > header { align-items: flex-start; flex-direction: column; }.exam-admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .exam-browse-body { grid-template-columns: 1fr; }.exam-filter-card { order: 2; }.exam-quiz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .exam-browse-search strong, .exam-browse-search > .material-symbols-rounded, .exam-profile-avatar { display: none; }.exam-browse-search label { flex: 1; }.exam-hero-banner { padding: 22px; }.exam-hero-icon { width: 62px; height: 62px; }.exam-hero-icon .material-symbols-rounded { font-size: 34px; }.exam-hero-banner h1 { font-size: 24px; }.exam-hero-banner span { font-size: 12px; }.exam-browse-heading { align-items: stretch; flex-direction: column; }.exam-quiz-search { width: 100%; margin-left: 0; }.exam-search-button { justify-content: center; }.exam-quiz-grid { grid-template-columns: 1fr; }.exam-subject-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 850px) { .exam-manager-columns { grid-template-columns: 1fr; }.exam-option-grid, .exam-answer-settings { grid-template-columns: 1fr; }.exam-builder-heading, .question-editor-tools { align-items: stretch; flex-direction: column; }.exam-layout { grid-template-columns: 1fr; }.exam-navigator { position: static; order: -1; }.exam-player-header { align-items: flex-start; flex-direction: column; } }
@media (max-width: 850px) { .exam-site-shell { grid-template-columns: 1fr; }.exam-site-sidebar { padding: 20px; border-right: 0; border-bottom: 1px solid #d8e5ee; }.exam-site-sidebar h2 { margin-bottom: 16px; }.exam-site-sidebar nav { grid-template-columns: repeat(3, 1fr); }.exam-sidebar-tip { display: none; } }
.exam-navigator-grid button { display: grid; place-items: center; min-height: 42px; border: 1px solid #c3ced7; border-radius: 5px; color: #33475a; background: #f5f7f8; font: inherit; font-weight: 700; cursor: pointer; }
.exam-navigator-grid button.answered { border-color: #2d9a62; color: #fff; background: #2d9a62; }
.exam-navigator-grid button.current { outline: 3px solid rgba(22,143,208,.2); border-color: #168fd0; }
.exam-question-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.celery-status-panel { margin-top: 24px; }
.celery-worker-list, .celery-task-list { display: grid; gap: 8px; margin-top: 16px; }
.celery-worker-row, .celery-task-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line, #d7e3ef); border-radius: 10px; background: rgba(239, 247, 253, .65); }
.celery-worker-row span, .celery-task-row em { color: #62758d; font-size: .9rem; font-style: normal; }
.celery-task-row code { margin-left: auto; color: #62758d; font-size: .78rem; }
.celery-task-row em { min-width: 68px; text-align: right; text-transform: capitalize; }
.exam-options label.selected.incorrect-option { border-color: #d9534f; background: #fff0f0; color: #9d3030; }
.exam-options label.correct-option { border-color: #2d9a62; background: #effaf2; }
.exam-options label.incorrect-option input { accent-color: #d9534f; }
.exam-navigator-grid button.incorrect { border-color: #d9534f; color: #fff; background: #d9534f; }
.ai-topic-picker { margin: 4px 0 20px; padding: 16px; border: 1px solid #cbddea; border-radius: 10px; background: #f8fbfe; }
.ai-topic-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ai-topic-picker-heading strong, .ai-topic-picker-heading span { display: block; }
.ai-topic-picker-heading strong { color: #233b55; }
.ai-topic-picker-heading span { margin-top: 4px; color: #71849a; font-size: 12px; }
.ai-topic-picker-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ai-topic-discover-button { display: inline-flex; align-items: center; gap: 6px; }
.ai-topic-label { color: #2d9a62 !important; font-weight: 600; }
.ai-topic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ai-topic-list label { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #d5e2ec; border-radius: 8px; background: #fff; cursor: pointer; }
.ai-topic-list label.selected { border-color: #2d9a62; background: #effaf2; }
.ai-topic-list input { margin-top: 3px; accent-color: #2d9a62; }
.ai-topic-list strong, .ai-topic-list small { display: block; }
.ai-topic-list strong { color: #243a52; font-size: 13px; }
.ai-topic-list small { margin-top: 4px; color: #71849a; font-size: 11px; line-height: 1.4; }
@media (max-width: 650px) { .ai-topic-list { grid-template-columns: 1fr; } }
.exam-loading-card { display: grid; justify-items: center; max-width: 430px; padding: 36px 32px; border: 1px solid #cfe1ef; border-radius: 18px; background: rgba(255,255,255,.78); box-shadow: 0 18px 40px rgba(45,108,160,.1); text-align: center; }
.exam-loading-card h1 { margin: 10px 0 8px; font-size: clamp(30px, 4vw, 48px); }
.exam-loading-card p:not(.admin-kicker) { margin: 0; color: #62778d; line-height: 1.6; }
.exam-loading-animation { display: flex; align-items: center; justify-content: center; gap: 8px; width: 76px; height: 76px; margin-bottom: 22px; border-radius: 24px; background: linear-gradient(145deg, #43b7e7, #5263d8); box-shadow: 0 12px 24px rgba(48,127,203,.22); }
.exam-loading-animation span { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: exam-loading-bounce 1s ease-in-out infinite; }
.exam-loading-animation span:nth-child(2) { animation-delay: .14s; }
.exam-loading-animation span:nth-child(3) { animation-delay: .28s; }
.exam-loading-copy { margin: 0 0 18px !important; }
@keyframes exam-loading-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-10px); opacity: 1; } }