@font-face{font-family:Sarabun;src:url('fonts/Sarabun-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Sarabun;src:url('fonts/Sarabun-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600 900;font-display:swap}
:root{--ink:#0b1f33;--brand:#087f73;--brand-dark:#08675f;--accent:#0f9f8f;--brand-light:#eefbf8;--ring:#d5f5ee;--canvas:#f8fafc;--surface:#fff;--text:#1e293b;--secondary:#475569;--muted:#64748b;--border:#e2e8f0;--radius:12px;--panel-radius:16px;--shadow:0 14px 40px rgba(15,42,67,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:104px}body{margin:0;background:var(--surface);font-family:Sarabun,Tahoma,Arial,sans-serif;color:var(--text);font-size:16px;line-height:1.65}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{color:var(--ink);font-weight:600;line-height:1.45}h1{font-size:30px}h2{font-size:28px}h3{font-size:18px}a{color:var(--brand);text-decoration:none}a:hover{color:var(--brand-dark)}button,input,select,textarea{font:inherit;font-size:16px}button,a,input,select,textarea,summary{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}a,button,input,select,textarea,summary{transition:background .18s,border-color .18s,color .18s,box-shadow .18s}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 4px var(--ring)}[hidden]{display:none!important}.container{width:calc(100% - 96px);max-width:1296px;margin-inline:auto}.icon{width:24px;height:24px;flex:none;vertical-align:middle}.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}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;padding:12px 20px;background:white}.skip-link:focus{top:12px}.button{display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:48px;padding:11px 22px;font-weight:600;border:1px solid transparent;border-radius:var(--radius);line-height:1.5;text-align:center;white-space:normal}.primary{background:var(--brand);color:#fff}.primary:hover{background:var(--brand-dark);color:#fff}.secondary{background:white;color:var(--ink);border-color:#cbd5e1}.secondary:hover{background:var(--canvas);border-color:var(--accent)}.large{min-height:58px;padding:14px 26px;font-size:18px}.white{background:white;color:var(--brand)}.white:hover{background:var(--brand-light)}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--border);background:white;border-radius:12px;color:var(--ink)}.full-width{width:100%}.muted{color:var(--muted)}.center{text-align:center}.text-link{display:inline-block;margin-bottom:24px;font-weight:600}
.site-header{height:88px;border-bottom:1px solid #edf2f6;background:rgba(255,255,255,.98);position:relative;z-index:10}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:flex;gap:13px;align-items:center;color:var(--ink);flex:none}.brand>.icon{height:48px;width:40px;color:var(--brand);stroke-width:1.6}.brand strong{font-size:28px;letter-spacing:-1.2px;line-height:1.1;display:block}.brand small{font-size:14px;color:var(--muted);display:block;margin-top:5px}.desktop-nav{display:flex;gap:32px}.desktop-nav a{color:var(--ink);font-size:15px;font-weight:600}.desktop-nav a:hover{color:var(--brand)}.header-actions{display:flex;gap:10px;align-items:center}.header-actions .button{font-size:15px;padding-inline:20px}.mobile-menu{display:none}.mobile-drawer{border:0;margin:0 0 0 auto;height:100dvh;max-height:none;width:min(340px,90vw);padding:24px;box-shadow:var(--shadow);color:var(--ink)}.mobile-drawer::backdrop{background:#0b1f3380}.drawer-heading{display:flex;justify-content:space-between;align-items:center;font-size:24px}.mobile-drawer nav{display:grid;margin-top:25px;gap:12px}.mobile-drawer nav a{padding:12px}
.hero{background:linear-gradient(115deg,#fff 5%,#f3fbfa 90%);padding:64px 0 0}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:510px}.hero h1{font-size:clamp(42px,4.1vw,59px);line-height:1.36;letter-spacing:-1.5px}.hero h1 span{color:var(--brand)}.hero-description{font-size:18px;line-height:1.85;color:var(--secondary);margin-top:25px;max-width:550px}.agency{font-size:16px;line-height:1.8;color:var(--secondary);margin-top:7px}.hero-actions{display:flex;gap:12px;margin-top:31px}.hero-visual{position:relative;padding:10px 0 15px}.hero-visual:before{content:"";position:absolute;width:115%;height:105%;background:linear-gradient(130deg,#d5f1ee 0%,#eafaf780 80%);border-radius:55% 15% 50% 30%;transform:rotate(-13deg);top:-38px;left:-30px;pointer-events:none}.preview-window{position:relative;background:#f8fafcf0;border:1px solid #e8eef3;border-radius:20px;padding:16px;box-shadow:var(--shadow)}.window-dots{display:flex;gap:8px;padding:0 12px 15px}.window-dots i{width:8px;height:8px;background:#f58a89;border-radius:50%}.window-dots i:nth-child(2){background:#f0cf87}.window-dots i:nth-child(3){background:#75b7a3}.preview-content{background:white;border-radius:14px;padding:24px 20px}.preview-content h2{font-size:25px}.preview-content>.muted{font-size:14px;margin-top:2px}.preview-document{display:flex;gap:14px;align-items:center;border:1px solid var(--border);border-radius:12px;margin-top:20px;padding:14px}.preview-document>div{flex:1}.preview-document strong{font-size:16px}.preview-document p{font-size:14px;color:var(--muted);margin-top:3px}.preview-document>.icon{width:18px;color:var(--muted)}.icon-tile{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;background:var(--brand-light);color:var(--brand);border-radius:12px;flex:none}.icon-tile .icon{width:30px;height:30px}.icon-tile.blue{background:#edf6f9;color:#036985}.preview-progress{display:flex;list-style:none;padding:0;margin:30px -8px 32px}.preview-progress li{position:relative;flex:1;text-align:center;line-height:1.4}.preview-progress li:before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--border)}.preview-progress li:first-child:before{display:none}.preview-progress .done:before,.preview-progress .current:before{background:var(--accent)}.preview-progress li>span{position:relative;width:27px;height:27px;border-radius:50%;background:#eef1f5;border:2px solid #b4c0ce;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}.preview-progress li strong{font-size:13px;white-space:nowrap;font-weight:600}.preview-progress li.done>span{background:#0b9e78;border-color:#0b9e78;color:white}.preview-progress li .icon{width:17px;height:17px}.preview-progress li.current>span{border-color:#0b9e78;background:#0b9e78;box-shadow:0 0 0 5px #d5f5ee}.preview-progress .current i{width:7px;height:7px;background:white;border-radius:50%}.preview-progress .current strong{color:var(--brand)}.preview-notice{border:1px solid #daf1e9;border-radius:12px;background:#f0faf7;padding:14px;display:flex;gap:12px;align-items:center}.preview-notice .icon-tile{background:#d5f5ee;width:48px;height:52px}.preview-notice>div{flex:1}.preview-notice strong{font-size:15px}.preview-notice p{font-size:13px;color:var(--secondary);margin-top:4px}.preview-notice>.icon{color:var(--brand);width:22px}.benefit-strip{position:relative;margin-top:55px;display:grid;grid-template-columns:repeat(3,1fr);padding:30px 20px;background:white;border:1px solid #e9eff4;border-radius:var(--panel-radius);transform:translateY(35px)}.benefit-strip>div{display:flex;gap:20px;padding:0 24px;align-items:center}.benefit-strip>div+div{border-left:1px solid var(--border)}.benefit-icon{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:#eff9f7;color:var(--brand);flex:none}.benefit-icon .icon{width:34px;height:34px}.benefit-strip h3{font-size:18px}.benefit-strip p{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.75}
.section{padding:80px 0}.services-section{padding-top:112px}.section-heading{text-align:center;margin-bottom:36px}.section-heading h2{font-size:32px}.section-heading p{margin-top:10px;color:var(--muted);font-size:17px}.catalog-search{display:flex;gap:14px;max-width:780px;margin:0 auto 22px}.search-field{position:relative;flex:1}.search-field>.icon{position:absolute;left:16px;top:15px;color:var(--muted);width:22px}.search-field input{width:100%;padding:14px 18px 14px 50px;min-height:54px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:var(--ink)}input::placeholder{color:var(--muted)}.catalog-search select{border:1px solid var(--border);border-radius:12px;padding:12px;background:white;color:var(--secondary);max-width:230px}.js .catalog-search select,.js .search-submit{display:none}.category-filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.category-filters button{border:1px solid var(--border);border-radius:12px;background:white;color:var(--secondary);padding:10px 15px;font-size:14px;min-height:44px}.category-filters button[aria-pressed=true]{background:var(--brand);color:white;border-color:var(--brand)}.category-filters button:hover{border-color:var(--brand)}.result-count{min-height:25px;color:var(--muted);font-size:14px;margin:10px 0 13px}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.service-card{position:relative;border:1px solid var(--border);border-radius:16px;padding:25px 22px;display:flex;gap:18px;min-height:199px;background:white;transition:box-shadow .18s,border-color .18s}.service-card:not(.disabled):hover{border-color:#8ccabe;box-shadow:0 8px 26px #0f2a4308}.service-number{position:absolute;right:16px;top:13px;font-size:13px;color:var(--muted)}.service-card>.icon-tile{width:60px;height:64px;margin-top:6px}.service-card-body{display:flex;flex-direction:column;min-width:0;flex:1}.service-card h3{font-size:17px;padding:6px 12px 0 0;line-height:1.65;overflow-wrap:anywhere}.service-card p{font-size:14px;color:var(--muted);margin-top:6px}.service-card a{display:inline-flex;align-items:center;gap:13px;font-size:15px;font-weight:600;margin-top:auto;padding-top:15px;min-height:44px;align-self:flex-start}.service-card a:after{content:"";position:absolute;inset:0;border-radius:16px}.service-card a .icon{width:20px;height:20px}.service-card.disabled{background:var(--canvas)}.service-card.disabled h3{color:#64748b}.disabled .icon-tile{background:#eef1f5;color:#8491a2}.disabled-label{display:inline-block;align-self:flex-start;color:var(--secondary);background:#e9eef3;border-radius:8px;font-size:13px;padding:4px 10px;margin-top:14px}.catalog-note{display:flex;justify-content:center;gap:10px;color:var(--muted);font-size:14px;text-align:center;margin-top:28px}.catalog-note .icon{width:20px;height:23px}.empty-state{text-align:center;padding:50px;background:var(--canvas);border-radius:16px}.empty-state>.icon{width:40px;height:40px;color:var(--muted);margin-bottom:12px}.empty-state p{margin:8px 0 18px;color:var(--secondary)}
.how-section{background:var(--canvas);padding:65px 0}.heading-rule{display:block;width:48px;height:4px;background:var(--brand);border-radius:4px;margin-top:20px}.section-heading .heading-rule{margin-inline:auto}.steps{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:0;gap:30px;text-align:center}.steps li{position:relative;display:flex;align-items:center;flex-direction:column}.step-number{background:#e6f4f1;color:var(--brand);width:55px;height:55px;border-radius:50%;display:grid;place-items:center;font-size:23px;font-weight:600;margin-bottom:15px;position:relative;z-index:1}.steps li:not(:last-child):after{content:"";height:1px;background:#acd7cc;position:absolute;left:calc(50% + 43px);top:27px;width:calc(100% - 56px)}.steps li>.icon{width:35px;height:35px;margin:4px 0 15px;color:#1e6570}.steps h3{font-size:19px}.steps p{font-size:15px;color:var(--secondary);margin-top:8px}.faq-grid{display:grid;grid-template-columns:1fr 1.65fr;gap:70px}.faq-grid>.heading-rule{margin:0}.faq-grid h2{font-size:32px;margin-top:20px}.faq-grid>div>p{color:var(--secondary);margin-top:12px;font-size:18px}.faq-list details{border-bottom:1px solid var(--border)}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;font-size:18px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary .icon{width:18px;transform:rotate(90deg);transition:transform .18s}.faq-list details[open]{background:#f1f9f7;border-radius:12px;border-color:transparent;margin-bottom:8px}.faq-list details[open] summary{color:var(--brand)}.faq-list details[open] summary .icon{transform:rotate(-90deg)}.faq-list details>p{padding:0 22px 22px;color:var(--secondary);font-size:15px;line-height:1.85}.final-cta{position:relative;overflow:hidden;background:linear-gradient(110deg,#08675f,#087f73);color:white;border-radius:24px;padding:38px 42px;display:flex;justify-content:space-between;align-items:center;margin-bottom:65px}.final-cta h2{color:white;font-size:30px}.final-cta p{color:#e0f7f1;font-size:18px;margin-top:6px}.final-cta .button{margin-top:22px}.final-cta>.icon{width:145px;height:145px;color:#ffffff45;stroke-width:1;transform:rotate(5deg);margin-right:36px}.site-footer{border-top:1px solid var(--border);padding:30px 0}.footer-inner{display:flex;align-items:center;gap:28px}.footer-brand{font-size:25px;letter-spacing:-1px;color:var(--ink);font-weight:600;padding-right:28px;border-right:1px solid var(--border);white-space:nowrap}.footer-brand span{color:var(--brand)}.footer-inner strong{font-size:14px;color:var(--ink)}.footer-inner p{font-size:14px;color:var(--muted);margin-top:3px}.back-top{margin-left:auto;white-space:nowrap;font-size:14px}.back-top .icon{width:18px;transform:rotate(-90deg)}
.detail-page{padding-block:48px 80px;min-height:65vh}.detail-heading{display:flex;gap:20px;align-items:center;margin-bottom:30px}.detail-heading>.icon-tile{width:74px;height:80px}.detail-heading h1{font-size:30px;margin-top:5px}.detail-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:25px;align-items:start}.panel{padding:30px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.panel h2{font-size:22px;margin-bottom:15px}.panel>p{color:var(--secondary);margin-bottom:25px}.panel h2:not(:first-child){margin-top:30px}.checklist{padding:0;list-style:none}.checklist li{display:flex;gap:12px;margin:15px 0}.checklist .icon{color:var(--brand);width:20px}.alert{padding:16px 20px;border-radius:12px;display:flex;gap:12px;margin:20px 0;line-height:1.75}.alert.info{background:#f0f9ff;color:#0369a1}.alert.success{background:#ecfdf5;color:#047857}.alert.error,.alert.danger{background:#fff1f2;color:#be123c}.alert.warning{background:#fffbeb;color:#92400e}.alert p{margin:0}.form-panel{width:calc(100% - 32px);max-width:560px;margin:50px auto;padding:36px;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}.form-panel h1{font-size:28px}.form-panel h1+p{margin-top:8px;color:var(--secondary)}.form-panel form{margin-top:24px}.field{margin-bottom:18px}.field label{font-size:14px;font-weight:600;display:block;margin-bottom:7px}.field input:not([type=checkbox]),.field select,.field textarea{border:1px solid #cbd5e1;border-radius:12px;background:white;padding:11px 14px;width:100%;color:var(--text);min-height:48px}.field small{font-size:14px;color:var(--muted);display:block;margin-top:5px}.field-error,.error-message{font-size:14px;color:#be123c;margin-top:5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid .field{margin-bottom:0}.form-grid .full{grid-column:1/-1}.form-panel .button{margin-top:10px}.auth-links{text-align:center;margin-top:22px}.auth-links a{text-decoration:underline}.dashboard-content{padding:40px 0}.dashboard-hero{background:linear-gradient(110deg,#08675f,#087f73);padding:32px;border-radius:24px;color:white;margin-bottom:24px}.dashboard-hero h1{color:white}.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(min-width:1441px){.hero h1{font-size:61px}}
@media(max-width:1199px){.container{width:calc(100% - 64px)}.desktop-nav{gap:17px}.header-inner{gap:20px}.brand strong{font-size:24px}.brand>.icon{width:34px}.header-actions .button{padding-inline:15px}.hero-grid{gap:32px}.hero h1{font-size:46px}.preview-content{padding:20px 12px}.preview-progress li strong{font-size:12px}.benefit-strip>div{gap:13px;padding-inline:16px}.benefit-icon{width:54px;height:54px}.benefit-strip h3{font-size:16px}.service-card{padding:24px 18px;gap:13px}.service-card>.icon-tile{width:44px;height:50px}.service-card h3{font-size:16px}.footer-inner{gap:18px}.footer-brand{padding-right:18px}}
@media(max-width:1023px){.desktop-nav{display:none}.mobile-menu{display:inline-flex}.hero{padding-top:45px}.hero-grid{gap:25px;min-height:460px}.hero h1{font-size:40px;letter-spacing:-1px}.hero-description{font-size:16px}.agency{font-size:14px}.hero-actions{flex-wrap:wrap}.large{font-size:16px;padding:12px 18px;min-height:52px}.preview-window{padding:10px}.preview-content{padding:18px 12px}.preview-content h2{font-size:20px}.preview-document{gap:8px;padding:10px}.preview-document .icon-tile{width:40px;height:45px}.preview-document strong{font-size:14px}.preview-document p{font-size:12px}.preview-progress{margin:24px -10px}.preview-progress li strong{font-size:11px;white-space:normal}.preview-notice{gap:8px;padding:10px}.preview-notice strong{font-size:13px}.preview-notice p{font-size:12px}.preview-notice>.icon{display:none}.benefit-strip{padding:24px 10px}.benefit-strip>div{flex-direction:column;align-items:flex-start;padding-inline:17px}.benefit-strip p br{display:none}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card{min-height:190px}.service-card>.icon-tile{width:55px;height:60px}.steps{gap:20px}.steps h3{font-size:17px}.steps p{font-size:14px}.faq-grid{gap:35px;grid-template-columns:1fr 1.6fr}.faq-grid h2{font-size:27px}.faq-list summary{font-size:16px}.footer-inner{flex-wrap:wrap}.footer-inner>div{flex:1}.back-top{margin-left:0}.detail-grid{grid-template-columns:1.4fr 1fr}}
@media(max-width:639px){html{scroll-padding-top:30px}.container{width:calc(100% - 32px)}.site-header{height:76px}.header-inner{gap:10px}.brand{gap:8px}.brand strong{font-size:23px}.brand small{font-size:12px}.brand>.icon{width:32px;height:39px}.header-actions .login-link,.header-actions .signup-link{display:none}.header-actions .button{font-size:14px;padding:9px 12px}.hero{padding-top:36px;overflow:hidden}.hero-grid{grid-template-columns:1fr;gap:42px;min-height:auto}.hero h1{font-size:39px;line-height:1.38;letter-spacing:-1.2px}.hero-description{font-size:16px;max-width:360px;margin-top:20px}.agency{font-size:14px;line-height:1.8}.hero-actions{gap:10px;margin-top:24px;flex-wrap:nowrap}.hero-actions .button{font-size:15px;flex:1;padding:12px 10px;gap:8px}.hero-visual{padding:0 0 10px}.hero-visual:before{left:5%;top:-12%;width:110%;height:110%}.preview-window{padding:12px;border-radius:18px}.preview-content{padding:20px 14px}.preview-content h2{font-size:23px}.preview-content>.muted{font-size:14px}.preview-document strong{font-size:15px}.preview-document p{font-size:14px}.preview-document .icon-tile{width:45px;height:52px}.preview-progress{margin:28px -7px}.preview-progress li strong{font-size:12px;white-space:normal}.preview-notice strong{font-size:14px}.preview-notice p{font-size:13px}.benefit-strip{margin-top:22px;grid-template-columns:1fr;transform:none;padding:6px 20px}.benefit-strip>div{flex-direction:row;align-items:center;padding:22px 0;gap:18px}.benefit-strip>div+div{border-left:0;border-top:1px solid var(--border)}.benefit-strip h3{font-size:17px}.benefit-strip p{font-size:14px}.benefit-icon{width:58px;height:58px}.section{padding:55px 0}.services-section{padding-top:55px}.section-heading{margin-bottom:26px}.section-heading h2{font-size:27px}.section-heading p{font-size:15px}.catalog-search{gap:8px;flex-wrap:wrap;margin-bottom:15px}.catalog-search select{max-width:100%}.search-field{flex-basis:100%}.category-filters{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:4px 0 8px;scrollbar-width:thin}.category-filters button{flex:none;white-space:nowrap}.service-grid{grid-template-columns:1fr;gap:12px}.service-card{min-height:174px;padding:22px 18px;gap:18px}.service-card h3{font-size:17px}.service-card>.icon-tile{width:58px;height:64px}.service-card a{padding-top:12px}.service-card.disabled{min-height:160px}.catalog-note{text-align:left;align-items:flex-start;font-size:14px;margin-top:23px}.steps{grid-template-columns:1fr 1fr;row-gap:30px;column-gap:18px}.steps li:after{display:none}.steps h3{font-size:16px}.steps p{font-size:14px}.step-number{width:48px;height:48px;font-size:21px}.faq-grid{grid-template-columns:1fr;gap:25px}.faq-grid .heading-rule{margin-top:0}.faq-grid h2{font-size:28px;margin-top:14px}.faq-grid>div>p{font-size:16px}.faq-list summary{padding:18px 12px;font-size:16px}.faq-list details>p{padding:0 14px 18px;font-size:15px}.final-cta{padding:30px 24px;margin-bottom:42px;border-radius:20px}.final-cta h2{font-size:25px}.final-cta p{font-size:16px}.final-cta>.icon{display:none}.site-footer{padding:28px 0}.footer-inner{display:block}.footer-brand{display:inline-block;border:0;padding:0;margin-bottom:14px}.footer-inner strong,.footer-inner p{font-size:14px}.back-top{display:inline-flex;align-items:center;gap:6px;margin-top:22px;min-height:44px}.detail-page{padding-block:32px 50px}.detail-heading{align-items:flex-start;gap:13px}.detail-heading h1{font-size:24px}.detail-heading>.icon-tile{width:50px;height:58px}.detail-grid{grid-template-columns:1fr}.panel{padding:23px}.form-panel{padding:26px 22px;margin:30px auto}.form-grid{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}.dashboard-hero{padding:24px}}
.category-filters{display:none}.js .category-filters{display:flex}label.field{display:block;font-size:14px;font-weight:600}label.field input,label.field select{margin-top:7px;font-weight:400}.hero{overflow:clip}.hero-copy{position:relative;z-index:1}.preview-progress li strong{font-size:14px;white-space:normal}.preview-notice p,.preview-notice strong,.preview-document p,.brand small,.service-number,.disabled-label{font-size:14px}
.hero{padding-bottom:35px}.services-section{padding-top:77px}
@media(min-width:1280px){.hero h1{font-size:64px}.hero-grid{grid-template-columns:1.04fr 1fr;gap:44px}.hero-description{font-size:19px}.agency{font-size:17px}}
@media(max-width:639px){.hero{padding-bottom:0}.services-section{padding-top:55px}.hero h1{font-size:39px}.preview-progress li strong{font-size:14px}.brand small{font-size:12px}.preview-document strong{font-size:15px}}
.app-body{background:var(--canvas)}.app-sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:var(--ink);padding:26px 18px;color:#cbd5e1;display:flex;flex-direction:column;z-index:20}.app-sidebar .brand{color:white;gap:10px;margin:0 8px 35px}.app-sidebar .brand strong{font-size:24px}.app-sidebar .brand small{color:#cbd5e1}.app-sidebar .brand>.icon{color:#d5f5ee}.app-nav{display:grid;gap:8px}.app-nav>a{padding:13px 14px;display:flex;gap:14px;align-items:center;color:#cbd5e1;border-radius:12px;font-size:16px;min-height:48px}.app-nav>a:hover,.app-nav>a[aria-current=page]{background:#ffffff1a;color:white}.app-nav>a[aria-current=page]{box-shadow:inset 3px 0 var(--accent)}.app-nav .icon{width:23px}.sidebar-account{margin-top:auto;padding:22px 10px 0;border-top:1px solid #ffffff26}.sidebar-account strong,.sidebar-account small{display:block;overflow-wrap:anywhere}.sidebar-account small{font-size:14px;margin-top:5px}.sidebar-account button{margin-top:20px;color:white;background:none;border:0;display:flex;gap:12px;align-items:center;padding:10px 0}.app-main{margin-left:260px;min-height:100vh}.app-header{height:94px;padding:16px 32px;display:flex;justify-content:space-between;align-items:center;background:white;border-bottom:1px solid var(--border);gap:18px}.app-header p{color:var(--secondary);font-size:14px}.app-header h1{font-size:27px}.account-link{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:15px}.account-link .icon{width:36px;height:36px;padding:7px;background:#f1f5f9;border-radius:50%}.app-content{padding:26px 32px;max-width:1440px;margin:auto}.app-footer{padding:15px 32px 30px;color:var(--muted);font-size:14px}.dashboard-hero{display:flex;justify-content:space-between;align-items:center;overflow:hidden}.dashboard-hero h2{font-size:31px;color:white}.dashboard-hero p{color:#e3f7f3;font-size:18px;margin-top:8px}.dashboard-hero .button{margin-top:23px}.dashboard-hero>.icon{width:130px;height:150px;stroke-width:1;color:#ffffff30;margin-right:35px;transform:rotate(5deg)}.readiness-grid{margin-bottom:24px;gap:16px}.readiness-card{display:flex;gap:16px;padding:22px 18px}.readiness-card:hover{border-color:var(--accent)}.readiness-card .icon-tile{width:50px;height:50px;border-radius:50%}.readiness-card p{font-size:14px;color:var(--secondary);margin-top:12px}.readiness-card h3{font-size:18px}.status-badge{display:inline-block;border-radius:20px;padding:3px 11px;font-size:14px;margin-top:8px;white-space:normal}.status-badge.success{color:#047857;background:#ecfdf5}.status-badge.warning{color:#92400e;background:#fffbeb}.dashboard-detail-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:20px}.dashboard-detail-grid>.panel{padding:24px}.onboarding-list{list-style:none;padding:0;margin:0}.onboarding-list li{display:flex;align-items:center;gap:15px;padding:20px 0;border-bottom:1px solid var(--border)}.onboarding-list li:last-child{border-bottom:0;padding-bottom:0}.onboarding-list li>span{width:40px;height:40px;background:var(--brand);color:white;display:grid;place-items:center;border-radius:50%;flex:none}.onboarding-list li>div{flex:1}.onboarding-list h3{font-size:17px}.onboarding-list p{font-size:14px;color:var(--secondary);margin-top:3px}.onboarding-list .button{font-size:14px;padding:10px 14px}.dashboard-catalog-icon{display:grid;place-items:center;padding:30px;margin-bottom:20px;background:var(--canvas);border-radius:12px}.dashboard-catalog-icon>.icon{width:90px;height:100px;color:#9dbec9;stroke-width:1}.app-drawer{background:var(--ink);color:white}.app-drawer .app-nav{margin-bottom:28px}.app-content>.form-panel{max-width:850px;width:100%;margin:0 auto}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:16px;background:white}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border)}th{background:var(--canvas);font-weight:600;color:var(--secondary)}td .button{font-size:14px;padding:8px 12px}.page-actions{display:flex;justify-content:space-between;gap:15px;margin-bottom:24px;align-items:center}
@media(max-width:1279px){.readiness-card{display:block}.readiness-card>.icon-tile{margin-bottom:12px}.dashboard-detail-grid{grid-template-columns:1.6fr 1fr}.onboarding-list{font-size:14px}.onboarding-list li{flex-wrap:wrap}.onboarding-list li .button{margin-left:55px}.app-content{padding:24px}.dashboard-hero>.icon{width:100px;margin-right:0}.dashboard-hero h2{font-size:28px}}
@media(max-width:1023px){.app-sidebar{display:none}.app-main{margin-left:0}.app-header{padding:16px 24px}.app-header>.mobile-menu{order:-1}.app-header>div{flex:1}.app-header .account-link span{display:none}.app-header h1{font-size:25px}.app-content{padding:24px}.app-footer{padding:20px 24px}.readiness-card{display:flex}.dashboard-detail-grid{grid-template-columns:1.6fr 1fr}.app-drawer .app-nav>a{padding:14px}}
@media(max-width:767px){.readiness-card{display:block}.dashboard-detail-grid{grid-template-columns:1fr}.onboarding-list li .button{margin-left:0}}
@media(max-width:639px){.app-header{padding:14px 16px;height:88px;gap:12px}.app-header h1{font-size:22px}.app-header p{font-size:13px}.app-content{padding:20px 16px}.app-footer{padding:15px 16px}.dashboard-hero h2{font-size:26px}.dashboard-hero p{font-size:16px}.dashboard-hero>.icon{display:none}.readiness-card{display:flex}.readiness-grid{gap:12px}.onboarding-list li>div{min-width:calc(100% - 60px)}.onboarding-list li .button{margin-left:55px}.dashboard-detail-grid>.panel{padding:21px}.page-actions{align-items:flex-start;flex-direction:column}}
.error-page{min-height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:60px;gap:18px}.error-code{font-size:64px;color:var(--brand);font-weight:600}.error-page p{color:var(--secondary);max-width:520px}.error-page>div{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;justify-content:center}fieldset{border:0;padding:0;margin:26px 0}legend{font-size:22px;font-weight:600;color:var(--ink);margin-bottom:18px;width:100%;padding-bottom:12px;border-bottom:1px solid var(--border)}
.history-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}.history-filters .form-actions{grid-column:1/-1}.history-results{margin-top:24px}.history-item{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border-top:1px solid var(--border)}.history-item h3{font-size:18px;margin-top:6px}.history-item p{font-size:14px;color:var(--secondary);margin-top:7px}.history-empty{text-align:center;padding:45px 15px}.history-empty .icon-tile{margin:0 auto 18px}.history-empty p{margin:10px 0 22px}.pagination-links{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}.history-item .status-badge{background:#eef5f7;color:var(--ink);flex-shrink:0}.app-content>.panel{padding:24px}.history-results .section-heading{margin-bottom:14px}
@media(max-width:639px){.history-filters{grid-template-columns:1fr}.history-item{align-items:flex-start;flex-direction:column;gap:8px}.app-content>.panel{padding:20px}.history-results h2{font-size:22px}}
.development-notice{padding:10px 20px;text-align:center;background:#fff8e8;color:#805218;font-size:14px;border-bottom:1px solid #efe2c5}
.admin-service-list{display:grid;gap:20px}.admin-service-list>.panel{padding:24px}.admin-service-list h2{font-size:20px}.service-settings-form{display:flex;gap:18px;align-items:flex-end}.service-settings-form>.field{flex:1}.service-settings-form>.button{flex-shrink:0;margin-bottom:18px}.field small:empty,.field-error:empty{display:none}
@media(max-width:639px){.service-settings-form{display:block}.service-settings-form>.button{margin-bottom:0}.admin-service-list>.panel{padding:20px}}
.dashboard-overview{margin-bottom:26px}.dashboard-overview>.page-actions p{font-size:14px;color:var(--secondary);margin-top:5px}.year-filter{display:flex;align-items:center;gap:10px}.year-filter select{border:1px solid var(--border);border-radius:12px;padding:10px;background:white;font:inherit;min-height:44px}.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.stat-grid:has(>.stat-card:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}.stat-card{padding:22px}.stat-card p{font-size:15px;color:var(--secondary);margin-top:14px}.stat-card>strong{font-size:32px;display:block;margin-top:6px;color:var(--ink)}.stat-card .icon-tile{width:44px;height:44px}.recent-requests{padding:24px;margin-top:22px}.summary-breakdown{margin-top:20px}.count-row{display:flex;justify-content:space-between;gap:20px;font-size:14px;padding:12px 0;border-bottom:1px solid var(--border)}
@media(max-width:767px){.stat-grid,.stat-grid:has(>.stat-card:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card{padding:18px}.year-filter{flex-wrap:wrap}.dashboard-overview>.page-actions{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.app-sidebar{overflow-y:auto}.app-nav small{display:block;font-size:12px;line-height:1.5;margin-top:3px;opacity:.85}.app-nav>a>.icon{flex-shrink:0}.app-nav>a>span{min-width:0;overflow-wrap:anywhere}.app-sidebar .sidebar-account{margin-top:24px;flex-shrink:0}

/* Form Control & Spacing Polish */
fieldset{border:1px solid #e2e8f0;border-radius:16px;padding:24px 28px;margin:28px 0;background:#ffffff}
fieldset>legend{font-size:20px;font-weight:600;color:var(--ink);padding:0 12px;margin-bottom:20px;width:auto;border-bottom:none;display:inline-flex;align-items:center;gap:8px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.form-grid .field{margin-bottom:0}
.field label{font-size:15px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:4px;margin-bottom:0}
.field label span{color:#dc2626;font-weight:700}
.form-control,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]),
select,
textarea{
    font-family:inherit;
    font-size:15px;
    line-height:1.5;
    color:var(--text);
    background:#ffffff;
    border:1px solid #cbd5e1;
    border-radius:12px;
    padding:11px 16px;
    width:100%;
    min-height:48px;
    box-sizing:border-box;
    transition:border-color .18s,box-shadow .18s,background-color .18s;
}
textarea{min-height:96px;resize:vertical}
.form-control:hover,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):hover,
select:hover,
textarea:hover{border-color:#94a3b8}
.form-control:focus,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--brand);
    box-shadow:0 0 0 4px var(--ring);
}
input[type=file].form-control,
input[type=file]{
    padding:9px 12px;
    cursor:pointer;
    background:#f8fafc;
    border:1px dashed #cbd5e1;
    min-height:50px;
    display:flex;
    align-items:center;
}
input[type=file]::file-selector-button{
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    background:#ffffff;
    border:1px solid #cbd5e1;
    border-radius:8px;
    padding:6px 14px;
    margin-right:14px;
    cursor:pointer;
    transition:background .15s,border-color .15s;
}
input[type=file]::file-selector-button:hover{
    background:#f1f5f9;
    border-color:var(--accent);
}
.field small{font-size:13px;line-height:1.5;color:var(--muted);margin-top:2px}
.field-error,#error-message,.error-message{font-size:13px;font-weight:600;color:#dc2626;margin-top:4px}
.field span[role=alert]{display:block;font-size:13px;font-weight:600;color:#dc2626;margin-top:4px}
.panel{margin-bottom:28px}
.panel h2{font-size:22px;margin-bottom:14px;line-height:1.4}
.panel p{margin-bottom:14px;line-height:1.7}
.form-actions{display:flex;gap:14px;align-items:center;margin-top:28px;flex-wrap:wrap}
@media(max-width:767px){
    fieldset{padding:20px 16px}
    .form-grid{grid-template-columns:1fr;gap:18px}
}

/* Nav Badge & Status Pills */
.nav-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:11px;
    background:#ef4444;
    color:#ffffff;
    font-size:12px;
    font-weight:700;
    line-height:1;
    margin-left:auto;
    box-shadow:0 2px 4px rgba(239,68,68,.3);
    flex-shrink:0;
}
.status-pill{
    display:inline-flex;
    align-items:center;
    padding:4px 12px;
    border-radius:9999px;
    font-size:13px;
    font-weight:600;
    line-height:1.4;
    background:#f1f5f9;
    color:var(--secondary);
    border:1px solid #e2e8f0;
}
.status-pill.pending{
    background:#eff6ff;
    color:#1d4ed8;
    border-color:#bfdbfe;
}
.status-pill.review{
    background:#fffbeb;
    color:#b45309;
    border-color:#fde68a;
}
.status-pill.approved{
    background:#ecfdf5;
    color:#047857;
    border-color:#a7f3d0;
}
.status-pill.action{
    background:#fef2f2;
    color:#b91c1c;
    border-color:#fecaca;
}
.table-wrap{
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:16px;
    background:#ffffff;
    box-shadow:var(--shadow);
    margin-bottom:24px;
}
.table-wrap table{
    width:100%;
    border-collapse:collapse;
    text-align:left;
}
.table-wrap th{
    background:#f8fafc;
    color:var(--ink);
    font-weight:600;
    padding:14px 18px;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}
.table-wrap td{
    padding:14px 18px;
    border-bottom:1px solid var(--border);
    color:var(--text);
    vertical-align:middle;
}
.table-wrap tr:last-child td{
    border-bottom:none;
}
.table-wrap tr:hover td{
    background:#f8fafc;
}

/* SweetAlert2 Brand Theme Customization */
.swal2-popup{
    font-family:Sarabun,Tahoma,Arial,sans-serif !important;
    border-radius:20px !important;
    padding:28px 24px !important;
    box-shadow:0 20px 50px rgba(11,31,51,.18) !important;
}
.swal2-title{
    font-size:22px !important;
    font-weight:700 !important;
    color:var(--ink) !important;
    line-height:1.4 !important;
    padding:12px 10px 0 !important;
}
.swal2-html-container{
    font-size:16px !important;
    color:var(--secondary) !important;
    line-height:1.65 !important;
    margin-top:12px !important;
}
.swal2-actions{
    gap:12px !important;
    margin-top:24px !important;
}
.swal2-confirm.button-swal-confirm{
    background:var(--brand) !important;
    color:#fff !important;
    border-radius:12px !important;
    font-size:16px !important;
    font-weight:600 !important;
    padding:11px 24px !important;
    box-shadow:none !important;
    border:none !important;
    cursor:pointer !important;
}
.swal2-confirm.button-swal-confirm:hover{
    background:var(--brand-dark) !important;
}
.swal2-cancel.button-swal-cancel{
    background:#f1f5f9 !important;
    color:var(--secondary) !important;
    border:1px solid #cbd5e1 !important;
    border-radius:12px !important;
    font-size:16px !important;
    font-weight:600 !important;
    padding:11px 22px !important;
}
.swal2-cancel.button-swal-cancel:hover{
    background:#e2e8f0 !important;
    color:var(--ink) !important;
}

/* Fixed Footer Bar */
.app-main{
    padding-bottom:64px;
}
.app-footer{
    position:fixed;
    bottom:0;
    right:0;
    left:260px;
    height:56px;
    padding:0 32px;
    background:#ffffff;
    border-top:1px solid var(--border);
    color:var(--secondary);
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    z-index:30;
    box-shadow:0 -4px 16px rgba(11,31,51,.04);
}
.app-footer .footer-left{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.app-footer .footer-right{
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
    flex-shrink:0;
}
@media(max-width:1023px){
    .app-footer{
        left:0;
        padding:0 20px;
    }
}
@media(max-width:639px){
    .app-footer{
        height:auto;
        padding:8px 16px;
        flex-direction:column;
        align-items:flex-start;
        gap:2px;
    }
    .app-main{
        padding-bottom:76px;
    }
    .app-footer .footer-right{
        display:none;
    }
}

/* Card Header & Status Banner */
.panel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    border-bottom:1px solid #f1f5f9;
    padding-bottom:18px;
    margin-bottom:20px;
    flex-wrap:wrap;
}
.panel-header h2{
    margin-bottom:0 !important;
}
.panel-header-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.card-status-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 14px;
    border-radius:8px;
    margin-bottom:14px;
    border:1px solid transparent;
}
.card-status-banner.pending{
    background:#eff6ff;
    color:#1e40af;
    border-color:#bfdbfe;
}
.card-status-banner.review{
    background:#fffbeb;
    color:#92400e;
    border-color:#fde68a;
}
.card-status-banner.approved{
    background:#ecfdf5;
    color:#065f46;
    border-color:#a7f3d0;
}
.card-status-banner.action{
    background:#fef2f2;
    color:#991b1b;
    border-color:#fecaca;
}
.card-status-banner .banner-title{
    font-size:13.5px;
    font-weight:700;
}
.card-status-banner .banner-desc{
    font-size:13px;
    opacity:0.9;
}

/* Action Forms & Checkbox Separation */
form .checkbox-field,
label:has(> input[type=checkbox]):not(.swal2-checkbox),
.panel label:has(> input[type=checkbox]):not(.swal2-checkbox){
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:18px 0 !important;
    font-size:15px !important;
    font-weight:500 !important;
    cursor:pointer !important;
    color:var(--text) !important;
    line-height:1.5 !important;
    width:100% !important;
}
.swal2-container .swal2-checkbox {
    display: none !important;
}
input[type=checkbox]{
    width:18px !important;
    height:18px !important;
    min-height:18px !important;
    accent-color:var(--brand) !important;
    cursor:pointer !important;
    margin:0 !important;
    flex-shrink:0 !important;
}
.panel form button.button{
    margin-top:16px !important;
    display:inline-flex !important;
}
.panel form .field + button.button,
.panel form label:has(> input[type=checkbox]) + button.button{
    display:block !important;
    margin-top:18px !important;
}
.form-actions,
.panel form .form-actions{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    margin-top:20px !important;
}
.form-actions button.button,
.form-actions a.button,
.form-actions .button,
.panel form .form-actions button.button,
.panel form .form-actions a.button{
    margin-top:0 !important;
    margin-bottom:0 !important;
    display:inline-flex !important;
    vertical-align:middle !important;
}

/* ── Status Stepper ──────────────────────────────────────────── */
.status-stepper{
    display:flex;
    align-items:flex-start;
    padding:6px 0 2px;
    margin:0 0 16px;
    max-width:480px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.status-stepper::-webkit-scrollbar{display:none}
.stepper-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:1;
    min-width:54px;
    position:relative;
    text-align:center;
}
.stepper-step:not(:last-child)::after{
    content:'';
    position:absolute;
    top:11px;
    left:calc(50% + 13px);
    right:calc(-50% + 13px);
    height:2px;
    background:#e2e8f0;
    z-index:0;
    transition:background .3s;
}
.stepper-step.done:not(:last-child)::after,
.stepper-step.current:not(:last-child)::after{
    background:var(--brand);
}
.stepper-dot{
    width:24px;
    height:24px;
    border-radius:50%;
    border:2px solid #cbd5e1;
    background:#f1f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    transition:background .25s,border-color .25s,box-shadow .25s;
    flex-shrink:0;
}
.stepper-dot svg{
    width:12px;height:12px;
    display:none;
    flex-shrink:0;
}
.stepper-step.done .stepper-dot{
    background:var(--brand);
    border-color:var(--brand);
}
.stepper-step.done .stepper-dot svg{display:block}
.stepper-step.current .stepper-dot{
    background:var(--brand);
    border-color:var(--brand);
    box-shadow:0 0 0 3px var(--ring);
}
.stepper-step.current .stepper-dot::before{
    content:'';
    width:6px;height:6px;
    background:#fff;
    border-radius:50%;
}
.stepper-step.pending .stepper-dot{
    background:#f1f5f9;
    border-color:#cbd5e1;
}
.stepper-label{
    margin-top:5px;
    font-size:11px;
    font-weight:600;
    color:#94a3b8;
    line-height:1.25;
    max-width:68px;
    word-break:break-word;
}
.stepper-step.done .stepper-label{color:var(--brand)}
.stepper-step.current .stepper-label{
    color:var(--brand);
    font-weight:700;
}
@media(max-width:639px){
    .stepper-label{font-size:10px;max-width:54px}
    .stepper-dot{width:20px;height:20px}
    .stepper-step:not(:last-child)::after{top:9px;left:calc(50% + 11px);right:calc(-50% + 11px)}
}

/* ── Definition Lists in Grids (Profile Review & Admin User Inspect) ── */
dl.form-grid,
.review-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px 28px;
    margin:0;
}
dl.form-grid > .field,
dl.form-grid > div,
.review-row{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin:0 !important;
    padding:4px 0;
    font-size:15px;
    line-height:1.6;
}
dl.form-grid dt,
.review-row dt{
    font-weight:600;
    color:var(--secondary);
    flex-shrink:0;
    margin:0;
}
dl.form-grid dt::after,
.review-row dt::after{
    content:" :";
    color:#94a3b8;
}
dl.form-grid dd,
.review-row dd{
    margin:0;
    color:var(--ink);
    word-break:break-word;
}

/* Document Info List: light label, bold value, same line, wrap when long */
.document-info-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:18px 0;
    padding:0;
}
.document-info-row{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:6px 8px;
    font-size:15px;
    line-height:1.6;
    margin:0 !important;
    padding:2px 0;
}
.document-info-row dt{
    font-weight:400;
    color:var(--secondary);
    flex-shrink:0;
    margin:0;
}
.document-info-row dt::after{
    content:" :";
    color:#94a3b8;
    margin-right:2px;
}
.document-info-row dd{
    font-weight:600;
    color:var(--ink);
    margin:0;
    word-break:break-word;
}
@media(max-width:767px){
    dl.form-grid,
    .review-grid{
        grid-template-columns:1fr;
        gap:6px;
    }
}

/* ── Compact History Timeline in Aside ───────────────────────── */
.history-timeline{
    list-style:none;
    padding:0;
    margin:0;
}
.history-timeline li{
    padding:10px 0;
    border-bottom:1px solid #f1f5f9;
}
.history-timeline li:last-child{
    border-bottom:none;
    padding-bottom:0;
}
.history-timeline li:first-child{
    padding-top:2px;
}
.history-timeline-header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:8px;
}
.history-timeline-header strong{
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    line-height:1.4;
}
.history-timeline-header time{
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
    flex-shrink:0;
}
.history-timeline-body{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:4px;
    flex-wrap:wrap;
}
.history-timeline-body .status-badge{
    font-size:11.5px;
    padding:2px 8px;
    border-radius:6px;
    margin-top:0;
    background:#f1f5f9;
    color:#475569;
    line-height:1.3;
}
.history-timeline-reason{
    font-size:12px;
    color:var(--secondary);
    line-height:1.3;
}
aside.panel .onboarding-list li{
    padding:10px 0 !important;
    align-items:flex-start !important;
}
aside.panel .onboarding-list li h3{
    font-size:14px !important;
    margin-bottom:2px !important;
}
aside.panel .onboarding-list li p{
    font-size:13px !important;
    margin-top:2px !important;
}

/* ── Collapsible Sidebar Navigation Polish ───────────────────── */
.nav-section-title{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:#64748b;
    padding:14px 14px 4px;
    user-select:none;
}
.app-nav > .nav-section-title:first-child{
    padding-top:4px;
}
.nav-group{
    border-radius:12px;
    transition:background .2s;
}
.nav-group-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    color:#cbd5e1;
    font-size:15px;
    font-weight:600;
    border-radius:12px;
    cursor:pointer;
    list-style:none;
    user-select:none;
    min-height:46px;
    transition:background .18s,color .18s;
}
.nav-group-summary::-webkit-details-marker{
    display:none;
}
.nav-group-summary:hover{
    background:#ffffff14;
    color:#ffffff;
}
.nav-group[open] > .nav-group-summary{
    color:#ffffff;
}
.nav-group-title{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:1;
}
.nav-group-title > .icon{
    width:21px;
    height:21px;
    color:#94a3b8;
    flex-shrink:0;
}
.nav-group[open] > .nav-group-summary .nav-group-title > .icon{
    color:var(--accent);
}
.nav-chevron{
    width:16px;
    height:16px;
    color:#64748b;
    transition:transform .2s ease;
    flex-shrink:0;
}
.nav-group[open] > .nav-group-summary .nav-chevron{
    transform:rotate(90deg);
    color:#cbd5e1;
}
.nav-sub-list{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:4px 0 6px 14px;
    margin-left:10px;
    border-left:1px solid #334155;
}
.nav-sub-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    font-size:13.5px;
    line-height:1.45;
    color:#94a3b8;
    border-radius:8px;
    transition:background .15s,color .15s;
    min-height:36px;
}
.nav-sub-link:hover{
    background:#ffffff14;
    color:#ffffff;
}
.nav-sub-link[aria-current=page]{
    background:#08675f;
    color:#ffffff;
    font-weight:600;
}
.nav-sub-link > .icon{
    width:16px;
    height:16px;
    color:inherit;
    opacity:0.85;
    flex-shrink:0;
}
.nav-sub-link > span{
    min-width:0;
    overflow-wrap:anywhere;
}
.nav-sub-link .nav-badge{
    min-width:18px;
    height:18px;
    font-size:11px;
    padding:0 5px;
}

/* Compact & Clean Audit Trail Table */
.audit-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.audit-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.audit-hero-info h2 {
    font-size: 20px;
    color: var(--ink);
    margin: 0 0 4px 0;
}
.audit-hero-info p {
    font-size: 13.5px;
    color: var(--secondary);
    margin: 0;
}
.audit-stats-chips {
    display: flex;
    gap: 10px;
    align-items: center;
}
.audit-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
}
.audit-chip strong {
    color: var(--brand);
}
.audit-filter-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.audit-filter-bar .search-input {
    flex: 1 1 280px;
    height: 42px;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: #ffffff;
    color: var(--ink);
}
.audit-filter-bar .filter-select {
    flex: 0 0 220px;
    height: 42px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    background: #ffffff;
    color: var(--ink);
}
.audit-filter-bar .button {
    flex: 0 0 auto;
    min-height: 42px;
    height: 42px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.audit-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}
.audit-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.audit-table tbody tr:hover td {
    background: #f8fafc;
}
.audit-timestamp {
    white-space: nowrap;
    font-size: 12.5px;
    color: #334155;
    font-variant-numeric: tabular-nums;
}
.audit-timestamp .time {
    display: block;
    color: #64748b;
    font-size: 11.5px;
}
.audit-ip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.audit-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.audit-badge.blue {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #dbeafe;
}
.audit-badge.green {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #d1fae5;
}
.audit-badge.amber {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fef3c7;
}
.audit-badge.purple {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ede9fe;
}
.audit-badge.gray {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.audit-actor {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.audit-actor-name {
    font-weight: 500;
    color: var(--ink);
}
.audit-actor-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #64748b;
}
.audit-context-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.audit-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11.5px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}
.audit-details {
    margin-top: 4px;
}
.audit-details summary {
    font-size: 11px;
    color: var(--brand);
    cursor: pointer;
    user-select: none;
    padding: 2px 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    display: inline-block;
}
.audit-details summary:hover {
    background: #e2e8f0;
}
.audit-details pre {
    margin: 6px 0 0 0;
    padding: 8px 10px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 6px;
    font-size: 11px;
    max-height: 160px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Universal Admin UI Styles */
.admin-page-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    background: #ffffff;
    padding: 18px 24px;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.admin-section-header-info h2 {
    font-size: 21px;
    color: var(--ink);
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}
.admin-section-header-info p {
    font-size: 13.5px;
    color: var(--secondary);
    margin: 0;
}
.admin-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.admin-kpi-card {
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.admin-kpi-card .kpi-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}
.admin-kpi-card .kpi-label {
    font-size: 13px;
    color: var(--secondary);
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.admin-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    padding: 11px 16px;
    font-size: 13px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    text-align: left;
}
.admin-table td {
    padding: 11px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: var(--text);
}
.admin-table tbody tr:hover td {
    background: #f8fafc;
}
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}
.admin-badge.green {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.admin-badge.amber {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.admin-badge.red {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.admin-badge.blue {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.admin-badge.purple {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}
.admin-badge.gray {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.admin-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.admin-inline-form input[type=text] {
    height: 36px;
    min-height: 36px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}
.admin-table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-table-actions .button {
    font-size: 13px;
    padding: 6px 12px;
    min-height: 34px;
    height: 34px;
    border-radius: 6px;
}

/* Header User Actions & Logout */
.header-user-section {
    display: flex;
    align-items: center;
    gap: 16px;
}
.account-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--ink);
    padding: 4px 8px;
    border-radius: 8px;
    transition: background .15s ease;
}
.account-link:hover {
    background: #f8fafc;
}
.account-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}
.account-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    display: block;
}
.account-role {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    display: block;
    margin-top: 2px;
}
.header-logout-button {
    min-height: 38px;
    height: 38px;
    padding: 6px 14px;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    color: #b91c1c;
    border-color: #fecaca;
    background: #ffffff;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.header-logout-button:hover {
    background: #fef2f2;
    border-color: #f87171;
    color: #991b1b;
}
.header-logout-button .icon {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}
@media (max-width: 1023px) {
    .account-details {
        display: none !important;
    }
}
@media (max-width: 640px) {
    .header-logout-button span {
        display: none;
    }
    .header-logout-button {
        padding: 6px 10px;
    }
}

/* History Page Modern Redesign */
.history-header {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.history-header-info h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px 0;
}
.history-header-info p {
    font-size: 13.5px;
    color: var(--secondary);
    margin: 0;
}
.history-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--ink);
    flex-shrink: 0;
}
.history-stat-chip strong {
    font-size: 16px;
    color: var(--brand);
}

.history-toolbar-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.history-toolbar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    align-items: end;
}
.history-toolbar-grid .field {
    margin: 0;
}
.history-toolbar-grid .field label {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
    display: block;
}
.history-toolbar-grid .field input,
.history-toolbar-grid .field select {
    height: 38px;
    min-height: 38px;
    font-size: 13px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 100%;
    background: #ffffff;
}
.history-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
}
.history-toolbar-actions .button {
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    white-space: nowrap;
}

.history-table-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    overflow: hidden;
}
.history-table-header {
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: #fafbfc;
}
.history-table-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

@media (max-width: 900px) {
    .history-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}
@media (max-width: 640px) {
    .history-toolbar-grid {
        grid-template-columns: 1fr;
    }
    .history-toolbar-actions {
        flex-direction: column;
        height: auto;
    }
    .history-toolbar-actions .button {
        width: 100%;
        justify-content: center;
    }
}

/* Premium Dashboard Modern Styling */
.dash-hero {
    background: linear-gradient(135deg, #0B1F33 0%, #112d4a 45%, #064e3b 100%);
    border-radius: 18px;
    padding: 28px 32px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px -4px rgba(11, 31, 51, 0.2);
    position: relative;
    overflow: hidden;
}
.dash-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.dash-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border-radius: 9999px;
    font-size: 12.5px;
    color: #a7f3d0;
    margin-bottom: 10px;
    font-weight: 500;
}
.dash-hero-title {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
    letter-spacing: -0.3px;
}
.dash-hero-desc {
    font-size: 14px;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.5;
    max-width: 580px;
}
.dash-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.dash-hero-btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff !important;
    border: none;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transition: transform .15s, box-shadow .15s;
}
.dash-hero-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
}
.dash-hero-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.dash-hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
}

.dash-year-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.dash-year-bar h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-year-form {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dash-year-form select {
    height: 36px;
    min-height: 36px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: #ffffff;
}
.dash-year-form button {
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 8px;
}

.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.dash-kpi-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 130px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: transform .2s ease, box-shadow .2s ease;
}
.dash-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.dash-kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dash-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-kpi-icon .icon {
    width: 22px;
    height: 22px;
}
.dash-kpi-icon.blue { background: #eff6ff; color: #2563eb; }
.dash-kpi-icon.purple { background: #f5f3ff; color: #7c3aed; }
.dash-kpi-icon.green { background: #ecfdf5; color: #059669; }
.dash-kpi-icon.amber { background: #fffbeb; color: #d97706; }
.dash-kpi-value {
    font-size: 30px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
    margin-top: 12px;
    font-feature-settings: 'tnum';
}
.dash-kpi-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
    margin-top: 4px;
}
.dash-kpi-sub {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.dash-readiness-panel {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.dash-readiness-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.dash-readiness-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.dash-readiness-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fafbfc;
    transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.dash-readiness-card:hover {
    background: #ffffff;
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.dash-readiness-card .icon-tile {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-readiness-card .icon-tile .icon {
    width: 20px;
    height: 20px;
    color: var(--brand);
}
.dash-readiness-card h4 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px 0;
}
.dash-readiness-card p {
    font-size: 12.5px;
    color: var(--secondary);
    margin: 4px 0 0 0;
    line-height: 1.4;
}
.dash-readiness-card.is-confirmed {
    background: #ffffff;
    border-color: #d1fae5;
}
.dash-readiness-card.is-confirmed:hover {
    border-color: #10b981;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.12);
}
.dash-readiness-card .icon-tile.green {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #86efac;
    color: #15803d;
}
.dash-readiness-card .icon-tile.green svg {
    color: #15803d;
}

/* Dashboard Review Confirmed Banner */
.dash-review-confirmed-banner {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 45%, #e6f4f1 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 16px -2px rgba(16, 185, 129, 0.1);
    position: relative;
    overflow: hidden;
}
.dash-review-confirmed-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.dash-confirmed-icon-wrap {
    flex-shrink: 0;
}
.dash-confirmed-icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}
.dash-confirmed-icon-circle svg {
    width: 26px;
    height: 26px;
}
.dash-confirmed-content {
    flex: 1;
    min-width: 0;
}
.dash-confirmed-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dash-confirmed-title {
    font-size: 17.5px;
    font-weight: 800;
    color: #065f46;
    margin: 0;
    letter-spacing: -0.2px;
}
.dash-confirmed-desc {
    font-size: 13px;
    color: #047857;
    margin: 5px 0 10px 0;
    line-height: 1.5;
}
.dash-confirmed-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dash-confirmed-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: #065f46;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 3px 10px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
}
.dash-confirmed-action {
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .dash-review-confirmed-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }
    .dash-confirmed-action {
        width: 100%;
        margin-top: 10px;
    }
    .dash-confirmed-action a {
        width: 100%;
        justify-content: center;
    }
}

.dash-recent-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    margin-bottom: 24px;
    overflow: hidden;
}
.dash-card-header {
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: #fafbfc;
}
.dash-card-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-card-header a {
    font-size: 13px;
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dash-card-header a:hover {
    text-decoration: underline;
}

.dash-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.dash-breakdown-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.dash-breakdown-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 18px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-progress-row {
    margin-bottom: 14px;
}
.dash-progress-row:last-child {
    margin-bottom: 0;
}
.dash-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    margin-bottom: 6px;
}
.dash-progress-label {
    font-weight: 500;
    color: var(--ink);
}
.dash-progress-count {
    font-weight: 700;
    color: var(--secondary);
    font-size: 13px;
}
.dash-progress-track {
    height: 8px;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
}
.dash-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    transition: width .4s ease;
}
.dash-progress-fill.blue {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}
.dash-progress-fill.purple {
    background: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%);
}
.dash-progress-fill.amber {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.dash-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.dash-service-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dash-service-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand);
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.dash-service-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--brand);
    background: #ecfdf5;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 8px;
}
.dash-service-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 6px 0;
    line-height: 1.35;
}
.dash-service-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--brand);
    font-weight: 600;
    margin-top: 10px;
}

/* Chart Cards & Layout */
.dash-charts-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.dash-chart-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dash-chart-body {
    padding: 20px 24px;
    position: relative;
    flex: 1;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-chart-body canvas {
    max-height: 280px;
    width: 100% !important;
}

@media (max-width: 1024px) {
    .dash-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dash-charts-grid {
        grid-template-columns: 1fr;
    }
    .dash-readiness-grid {
        grid-template-columns: 1fr;
    }
    .dash-breakdown-grid {
        grid-template-columns: 1fr;
    }
    .dash-hero {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 640px) {
    .dash-hero {
        padding: 22px 20px;
    }
    .dash-hero-title {
        font-size: 22px;
    }
    .dash-kpi-grid {
        grid-template-columns: 1fr;
    }
    .dash-year-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .dash-year-form {
        width: 100%;
    }
    .dash-year-form select {
        flex: 1;
    }
    .dash-chart-body {
        padding: 16px;
        min-height: 240px;
    }
}

/* ==========================================================================
   Signature Vault & Studio Modernization
   ========================================================================== */
.sig-page-header {
    margin-bottom: 24px;
}
.sig-page-header h1,
.sig-page-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sig-page-header p {
    color: var(--secondary);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}
.sig-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.sig-security-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}

.sig-studio-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 32px;
}
@media (max-width: 992px) {
    .sig-studio-layout {
        grid-template-columns: 1fr;
    }
}

.sig-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 24px;
    position: relative;
}
.sig-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.sig-card-title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tabs */
.sig-mode-tabs {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    gap: 4px;
    margin-bottom: 20px;
}
.sig-mode-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sig-mode-tab:hover {
    color: var(--ink);
}
.sig-mode-tab.active {
    background: #ffffff;
    color: var(--brand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Canvas Area */
.sig-pad-box {
    position: relative;
    background: #fafbfc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    touch-action: none;
    cursor: crosshair;
    transition: border-color 0.2s, background-color 0.2s;
}
.sig-pad-box:hover,
.sig-pad-box:focus-within {
    border-color: var(--brand);
    background: #ffffff;
}
.sig-canvas-guide {
    position: absolute;
    bottom: 42px;
    left: 40px;
    right: 40px;
    border-bottom: 1.5px dashed #cbd5e1;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 4px;
}
.sig-canvas-guide span {
    font-size: 11px;
    color: #94a3b8;
    user-select: none;
}
#signature-draw {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    background: transparent;
}

/* Canvas Toolbar */
.sig-tools-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.sig-tool-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sig-tool-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary);
}
.sig-color-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1.5px #cbd5e1;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sig-color-btn:hover {
    transform: scale(1.15);
}
.sig-color-btn.active {
    box-shadow: 0 0 0 2.5px var(--brand);
    transform: scale(1.15);
}
.sig-color-btn.active::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.sig-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s ease;
}
.sig-action-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* Upload Dropzone */
.sig-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 36px 20px;
    text-align: center;
    background: #fafbfc;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.sig-dropzone:hover,
.sig-dropzone.dragover {
    border-color: var(--brand);
    background: #f0f7ff;
}
.sig-dropzone input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.sig-dropzone-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: var(--brand);
    background: #e0f2fe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sig-dropzone-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}
.sig-dropzone-subtitle {
    font-size: 12.5px;
    color: var(--secondary);
    margin: 0;
}
.sig-uploaded-indicator {
    display: none;
    margin-top: 10px;
    font-size: 12px;
    color: #0284c7;
    font-weight: 600;
}

/* Advanced Accordion */
.sig-advanced-details {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fafbfc;
    overflow: hidden;
}
.sig-advanced-summary {
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--secondary);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sig-advanced-summary:hover {
    color: var(--ink);
    background: #f1f5f9;
}
.sig-advanced-body {
    padding: 16px;
    background: #ffffff;
    border-top: 1px solid var(--border);
}

/* Document Paper Simulation (Right Column) */
.sig-paper-container {
    background: #f1f5f9;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 18px;
}
.sig-paper-sheet {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    padding: 24px 20px;
    position: relative;
    font-family: inherit;
}
.sig-paper-sheet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1e3a8a, #3b82f6);
    border-radius: 6px 6px 0 0;
}
.sig-paper-title {
    font-size: 12px;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 12px;
}
.sig-paper-body-text {
    font-size: 11.5px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 24px;
    padding: 8px 12px;
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
    border-radius: 4px;
}
.sig-paper-signature-zone {
    margin: 10px auto 0;
    max-width: 320px;
    text-align: center;
}
.sig-preview-canvas-box {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: repeating-conic-gradient(#f8fafc 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    overflow: hidden;
}
#signature-preview {
    max-width: 100%;
    height: auto;
    max-height: 110px;
    object-fit: contain;
    display: block;
}
.sig-paper-line {
    border-bottom: 1px dotted #64748b;
    width: 220px;
    margin: 10px auto 6px;
}
.sig-paper-signer-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.sig-paper-signer-role {
    font-size: 11.5px;
    color: var(--secondary);
    margin-top: 2px;
}

/* Status & Consent */
.sig-feedback-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    margin-bottom: 16px;
}
.sig-consent-box {
    background: #fafbfc;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.sig-consent-box label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    margin: 0;
}
.sig-consent-box input[type="checkbox"] {
    margin-top: 3px;
}
.sig-consent-note {
    font-size: 11.5px;
    color: var(--secondary);
    margin: 6px 0 0 24px;
    line-height: 1.4;
}

/* Gallery of Signatures */
.sig-gallery-section {
    margin-top: 36px;
}
.sig-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.sig-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.sig-item-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sig-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}
.sig-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fafbfc;
    border-bottom: 1px solid var(--border);
}
.sig-id-badge {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand);
    background: #e0f2fe;
    padding: 2px 8px;
    border-radius: 6px;
}
.sig-date-text {
    font-size: 11.5px;
    color: var(--secondary);
}
.sig-item-preview {
    height: 130px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-conic-gradient(#f8fafc 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
}
.sig-item-preview img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
.sig-item-footer {
    padding: 12px 16px;
    background: #ffffff;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.sig-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sig-delete-btn:hover {
    background: #fee2e2;
    border-color: #f87171;
}
.sig-default-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
}
.sig-default-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sig-default-btn:hover {
    background: #fef3c7;
    color: #b45309;
    border-color: #fde68a;
}
.sig-label-tag {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sig-quota-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.sig-quota-title {
    font-size: 14px;
    font-weight: 700;
    color: #0369a1;
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sig-quota-sub {
    font-size: 12.5px;
    color: #0284c7;
    margin: 0;
}
.sig-label-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.sig-label-pill {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: var(--secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.sig-label-pill:hover {
    background: #e2e8f0;
    color: var(--ink);
}
.sig-label-pill.active {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0284c7;
    font-weight: 700;
}
.sig-empty-state {
    text-align: center;
    padding: 40px 20px;
    background: #fafbfc;
    border: 1px dashed var(--border);
    border-radius: 14px;
}
.sig-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: #94a3b8;
}

/* ==========================================================================
   Profile Page & Empty Field Soft Tint Styling
   ========================================================================== */

/* Subtle warm soft tint for empty fields */
.field-empty,
.is-empty,
input.is-empty,
select.is-empty,
textarea.is-empty,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=search]):placeholder-shown {
    background-color: #fffdf2 !important;
    border-color: #f6d89e !important;
    color: #1e293b;
}

.field-empty:hover,
.is-empty:hover,
input.is-empty:hover,
select.is-empty:hover,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=search]):placeholder-shown:hover {
    background-color: #fffaf0 !important;
    border-color: #f5c777 !important;
}

.field-empty:focus,
.is-empty:focus,
input.is-empty:focus,
select.is-empty:focus,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=search]):placeholder-shown:focus {
    background-color: #ffffff !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 4px var(--ring) !important;
}

/* Smooth transition when fields change state */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
select,
textarea {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Target field highlight on quick jump */
:target {
    scroll-margin-top: 120px;
    animation: profileFieldFlash 2.5s ease-out;
}
@keyframes profileFieldFlash {
    0% {
        outline: 3px solid #f59e0b;
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.25);
    }
    60% {
        outline: 3px solid #f59e0b;
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.15);
    }
    100% {
        outline: none;
        box-shadow: none;
    }
}

/* Profile Hero Card */
.profile-hero-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.profile-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.profile-user-info {
    display: flex;
    align-items: center;
    gap: 16px;
}
.profile-avatar-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #087f73 0%, #065e55 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(8, 127, 115, 0.25);
}
.profile-avatar-circle svg {
    width: 28px;
    height: 28px;
}
.profile-user-text h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
}
.profile-user-text p {
    font-size: 14px;
    color: var(--secondary);
    margin: 3px 0 0 0;
}
.profile-hero-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
}
.badge-pill svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.badge-pill.success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.badge-pill.warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.badge-pill.info {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.badge-pill.neutral {
    background: #f8fafc;
    color: var(--secondary);
    border: 1px solid var(--border);
}
.badge-pill .empty-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background-color: #fffdf2;
    border: 1px solid #f6d89e;
    display: inline-block;
}

/* Guidance Tip Banner */
.profile-guidance-box {
    background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
    border: 1px solid #ccfbf1;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #134e4a;
    line-height: 1.6;
}
.profile-guidance-box svg {
    width: 20px;
    height: 20px;
    color: var(--brand);
    flex-shrink: 0;
}
.profile-guidance-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.profile-guidance-list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Missing Fields Details */
.profile-missing-details {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-left: 5px solid #f59e0b;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.profile-missing-details summary {
    font-size: 15px;
    font-weight: 600;
    color: #92400e;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}
.profile-missing-details summary::-webkit-details-marker {
    display: none;
}
.profile-missing-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f59e0b;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}
.profile-missing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0 0;
    padding: 0;
    list-style: none;
}
.profile-missing-chips a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #fde68a;
    color: #b45309;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}
.profile-missing-chips a:hover {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #78350f;
    transform: translateY(-1px);
}

/* Fieldset styling */
.profile-section-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 28px;
    margin: 0 0 24px 0;
    box-shadow: 0 2px 12px rgba(15,42,67,0.02);
}
.profile-section-card legend {
    float: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 20px;
    padding: 0 0 14px 0;
    border-bottom: 1px solid #f1f5f9;
}
.profile-legend-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.profile-legend-icon.teal {
    background: #eefbf8;
    color: var(--brand);
}
.profile-legend-icon.indigo {
    background: #eef2ff;
    color: #4f46e5;
}
.profile-legend-icon.amber {
    background: #fffbeb;
    color: #d97706;
}
.profile-legend-icon svg {
    width: 20px;
    height: 20px;
}
.profile-legend-text {
    display: flex;
    flex-direction: column;
}
.profile-legend-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}
.profile-legend-sub {
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    margin-top: 2px;
}

/* Field Header & Badges */
.field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.field-label-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.req-star {
    color: #e11d48;
    font-weight: 700;
}
.opt-tag {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 6px;
}

/* Organization Picker Box */
.org-picker-box {
    grid-column: 1 / -1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.org-picker-box .search-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.org-picker-box .select-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.org-picker-results {
    font-size: 13px;
    color: var(--brand);
    font-weight: 600;
}

/* Bottom Action Bar */
.profile-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 24px;
    margin-top: 24px;
    box-shadow: var(--shadow);
}
.profile-action-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.profile-action-note {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.profile-action-note svg {
    width: 16px;
    height: 16px;
    color: var(--brand);
}

/* ── Profile Review Page Styling ── */
.review-hero-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.review-cycle-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
}
.review-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}
.review-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.review-edit-jump-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.review-edit-jump-link:hover {
    background: var(--brand);
    color: #ffffff;
    border-color: var(--brand);
    transform: translateY(-1px);
}
.review-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
}
.review-tile {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.15s ease;
}
.review-tile:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}
.review-tile-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.review-tile-value {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.5;
    word-break: break-word;
}
.review-tile-value.empty {
    font-size: 13px;
    font-style: italic;
    font-weight: 500;
    color: #94a3b8;
}
.review-confirmed-banner {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid #a7f3d0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08);
    margin-bottom: 24px;
}
.review-confirmed-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #059669;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}
.review-confirmed-icon svg {
    width: 28px;
    height: 28px;
}
.review-confirm-form-card {
    background: #ffffff;
    border: 2px solid #087f73;
    border-radius: 16px;
    padding: 26px 28px;
    box-shadow: 0 8px 24px rgba(8, 127, 115, 0.1);
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.review-confirm-checkbox-box {
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.review-confirm-checkbox-box:hover {
    background: #e6fffa;
    border-color: #99f6e4;
}
.review-confirm-checkbox-box input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: #087f73;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.review-confirm-checkbox-text {
    font-size: 15px;
    font-weight: 600;
    color: #0f766e;
    line-height: 1.5;
}
.review-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.review-action-btns {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    .review-grid-modern {
        grid-template-columns: 1fr;
    }
    .review-action-row {
        flex-direction: column;
        align-items: stretch;
    }
    .review-action-btns {
        flex-direction: column;
    }
    .review-action-btns .button {
        width: 100%;
        justify-content: center;
    }
}

/* ── Inline Edit & Autosave Mode Styles ── */
.profile-section-card .review-view-container {
    display: block;
    animation: fadeInMode 0.2s ease-in-out;
}
.profile-section-card .review-edit-container {
    display: none;
    animation: fadeInMode 0.2s ease-in-out;
}
.profile-section-card.is-editing .review-view-container {
    display: none;
}
.profile-section-card.is-editing .review-edit-container {
    display: block;
}

@keyframes fadeInMode {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.section-toggle-btn:hover {
    background: var(--brand);
    color: #ffffff;
    border-color: var(--brand);
    transform: translateY(-1px);
}
.profile-section-card.is-editing .section-toggle-btn {
    background: #eef2ff;
    color: #4f46e5;
    border-color: #c7d2fe;
}
.profile-section-card.is-editing .section-toggle-btn:hover {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

/* Autosave Floating & Inline Badges */
.autosave-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.autosave-status-pill.idle {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.autosave-status-pill.saving {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.autosave-status-pill.saved {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.autosave-status-pill.error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* Spinner indicator */
.autosave-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #b45309;
    border-top-color: transparent;
    border-radius: 50%;
    animation: autosaveSpin 0.7s linear infinite;
    display: inline-block;
}
@keyframes autosaveSpin {
    to { transform: rotate(360deg); }
}

/* Sticky floating autosave toast */
.floating-autosave-bar {
    position: fixed;
    bottom: 24px;
    right: 28px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 10px 18px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.floating-autosave-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ==========================================================================
   Public Landing Page Modern Redesign & Premium Polish
   ========================================================================== */

/* Header Polish */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 84px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03);
    transition: background 0.2s, box-shadow 0.2s;
}

.brand {
    gap: 14px;
}

.brand > .icon {
    width: 42px;
    height: 42px;
    padding: 9px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ecfdf5, #e0f2fe);
    color: var(--brand);
    border: 1px solid #d1fae5;
    box-shadow: 0 2px 8px rgba(8, 127, 115, 0.12);
}

.brand strong {
    font-size: 26px;
    letter-spacing: -0.8px;
    color: var(--ink);
}

.brand small {
    font-size: 13.5px;
    color: var(--muted);
    font-weight: 500;
}

.desktop-nav a {
    position: relative;
    padding: 8px 4px;
    color: #334155;
    font-size: 15.5px;
    font-weight: 600;
    transition: color 0.18s ease;
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2.5px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    border-radius: 2px;
    transition: width 0.2s ease;
}

.desktop-nav a:hover {
    color: var(--brand);
}

.desktop-nav a:hover::after {
    width: 100%;
}

.header-actions .button.primary {
    background: linear-gradient(135deg, #087f73 0%, #0d9488 100%);
    box-shadow: 0 4px 14px rgba(8, 127, 115, 0.28);
    border-radius: 10px;
    border: none;
    font-size: 14.5px;
    padding: 9px 18px;
}

.header-actions .button.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(8, 127, 115, 0.38);
}

.header-actions .button.secondary {
    border-radius: 10px;
    border-color: #cbd5e1;
    color: #334155;
    font-size: 14.5px;
    padding: 9px 16px;
}

.header-actions .button.secondary:hover {
    background: #f8fafc;
    border-color: var(--brand);
    color: var(--brand);
}

/* Development Notice Banner */
.development-notice {
    padding: 10px 24px;
    text-align: center;
    background: #fffbeb;
    color: #92400e;
    font-size: 13.5px;
    font-weight: 500;
    border-bottom: 1px solid #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Hero Section */
.hero {
    background: 
        radial-gradient(1000px 500px at 85% 15%, rgba(8, 127, 115, 0.08) 0%, transparent 60%),
        radial-gradient(800px 400px at 15% 85%, rgba(14, 165, 233, 0.06) 0%, transparent 60%),
        #ffffff;
    padding: 56px 0 24px;
    position: relative;
    overflow: hidden;
}

.hero-grid {
    align-items: center;
    gap: 50px;
    min-height: 480px;
}

.hero-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.pulse-indicator {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.pulse-indicator::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #10b981;
    opacity: 0.75;
    animation: pulsePing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulsePing {
    0% { transform: scale(1); opacity: 0.8; }
    75%, 100% { transform: scale(2.4); opacity: 0; }
}

.hero h1 {
    font-size: clamp(38px, 4.2vw, 56px);
    line-height: 1.32;
    letter-spacing: -1.2px;
    font-weight: 700;
    color: #0b1f33;
}

.hero h1 span,
.hero-highlight {
    background: linear-gradient(135deg, #087f73 0%, #0d9488 45%, #0284c7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero-description {
    font-size: 18px;
    line-height: 1.75;
    color: #475569;
    margin-top: 20px;
    max-width: 540px;
}

.agency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: #334155;
    margin-top: 14px;
    padding: 6px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.agency .icon {
    width: 17px;
    height: 17px;
    color: var(--brand);
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 28px;
    align-items: center;
}

.hero-actions .button.primary {
    background: linear-gradient(135deg, #087f73 0%, #0d9488 100%);
    box-shadow: 0 10px 24px -5px rgba(8, 127, 115, 0.38);
    border: none;
    border-radius: 14px;
    padding: 13px 28px;
    font-size: 16.5px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-actions .button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -5px rgba(8, 127, 115, 0.48);
}

.hero-actions .button.secondary {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 13px 26px;
    font-size: 16.5px;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-actions .button.secondary:hover {
    background: #f8fafc;
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

/* Modern Hero Visual Preview */
.hero-visual {
    position: relative;
    padding: 15px 0;
}

.hero-visual::before {
    content: "";
    position: absolute;
    inset: -15px;
    background: radial-gradient(circle at 65% 35%, rgba(8, 127, 115, 0.16) 0%, rgba(14, 165, 233, 0.08) 50%, transparent 75%);
    filter: blur(35px);
    pointer-events: none;
    z-index: 0;
    border-radius: 30px;
    transform: none;
}

.preview-window {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 24px 48px -12px rgba(15, 42, 67, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.6);
}

.window-dots {
    display: flex;
    gap: 7px;
    padding: 2px 6px 14px;
}

.window-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.window-dots i:nth-child(1) { background: #f87171; }
.window-dots i:nth-child(2) { background: #fbbf24; }
.window-dots i:nth-child(3) { background: #34d399; }

.preview-content {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 24px 22px;
}

.preview-content h2 {
    font-size: 23px;
    font-weight: 700;
    color: var(--ink);
}

.preview-content > .muted {
    font-size: 13.5px;
    color: #64748b;
    margin-top: 3px;
}

.preview-document {
    display: flex;
    gap: 14px;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-top: 18px;
    padding: 13px 16px;
    background: #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.preview-document:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 42, 67, 0.06);
    border-color: #cbd5e1;
}

.preview-document > div {
    flex: 1;
}

.preview-document strong {
    font-size: 15.5px;
    color: var(--ink);
    display: block;
}

.preview-document p {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}

.preview-document > .icon {
    width: 18px;
    height: 18px;
    color: #94a3b8;
}

.preview-progress {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 26px -6px 28px;
}

.preview-progress li {
    position: relative;
    flex: 1;
    text-align: center;
    line-height: 1.35;
}

.preview-progress li::before {
    content: "";
    position: absolute;
    top: 14px;
    left: -50%;
    width: 100%;
    height: 2.5px;
    background: #e2e8f0;
}

.preview-progress li:first-child::before {
    display: none;
}

.preview-progress .done::before,
.preview-progress .current::before {
    background: linear-gradient(90deg, #087f73, #10b981);
}

.preview-progress li > span {
    position: relative;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #f8fafc;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    transition: all 0.2s ease;
}

.preview-progress li strong {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    white-space: normal;
}

.preview-progress li.done > span {
    background: #087f73;
    border-color: #087f73;
    color: white;
}

.preview-progress li.done strong {
    color: #087f73;
}

.preview-progress li.current > span {
    border-color: #087f73;
    background: #087f73;
    box-shadow: 0 0 0 5px #d1fae5, 0 0 16px rgba(8, 127, 115, 0.35);
}

.preview-progress .current i {
    width: 7px;
    height: 7px;
    background: white;
    border-radius: 50%;
}

.preview-progress .current strong {
    color: #087f73;
    font-weight: 700;
}

.preview-notice {
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdf9 0%, #ecfdf5 100%);
    padding: 13px 16px;
    display: flex;
    gap: 13px;
    align-items: center;
}

.preview-notice .icon-tile {
    background: #d1fae5;
    color: #065f46;
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.preview-notice > div {
    flex: 1;
}

.preview-notice strong {
    font-size: 14.5px;
    color: #065f46;
    display: block;
}

.preview-notice p {
    font-size: 12.5px;
    color: #047857;
    margin-top: 2px;
}

.preview-notice > .icon {
    color: #059669;
    width: 20px;
    height: 20px;
}

/* Benefit Strip */
.benefit-strip {
    position: relative;
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 24px 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 16px 36px -10px rgba(15, 42, 67, 0.08);
    transform: none;
}

.benefit-strip > div {
    display: flex;
    gap: 18px;
    padding: 8px 24px;
    align-items: center;
}

.benefit-strip > div + div {
    border-left: 1px solid #f1f5f9;
}

.benefit-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #ecfdf5;
    color: #059669;
    flex: none;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12);
}

.benefit-strip > div:nth-child(2) .benefit-icon {
    background: #f0f9ff;
    color: #0284c7;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
}

.benefit-strip > div:nth-child(3) .benefit-icon {
    background: #f5f3ff;
    color: #7c3aed;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.12);
}

.benefit-icon .icon {
    width: 28px;
    height: 28px;
}

.benefit-strip h3 {
    font-size: 17.5px;
    font-weight: 700;
    color: #0b1f33;
}

.benefit-strip p {
    font-size: 13.5px;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.6;
}

/* Statistics Section */
.stats-section {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    padding: 85px 0;
}

.badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e6f6f4;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.badge-tag .icon {
    width: 15px;
    height: 15px;
}

.stats-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}

.stat-metric-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 4px 14px rgba(15, 42, 67, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.stat-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 42, 67, 0.08);
    border-color: #cbd5e1;
}

.stat-metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-metric-icon .icon {
    width: 24px;
    height: 24px;
}

.stat-metric-icon.emerald { background: #ecfdf5; color: #059669; }
.stat-metric-icon.teal { background: #f0fdfa; color: #0d9488; }
.stat-metric-icon.sky { background: #f0f9ff; color: #0284c7; }
.stat-metric-icon.violet { background: #f5f3ff; color: #7c3aed; }

.stat-metric-content {
    flex: 1;
    min-width: 0;
}

.stat-metric-val {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
}

.stat-metric-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-top: 4px;
}

.stat-metric-desc {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.4;
}

/* Charts Grid */
.landing-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 24px;
    align-items: stretch;
}

.landing-chart-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 26px 28px;
    box-shadow: 0 4px 20px rgba(15, 42, 67, 0.04);
    display: flex;
    flex-direction: column;
    position: relative;
}

.landing-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 12px;
}

.landing-chart-header h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
}

.landing-chart-header p {
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 3px;
}

.chart-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}

.chart-badge.success {
    background: #ecfdf5;
    color: #059669;
}

.landing-chart-canvas-wrap {
    position: relative;
    height: 250px;
    width: 100%;
}

.landing-chart-canvas-wrap.doughnut-wrap {
    height: 220px;
}

/* Category Legend List */
.chart-category-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
}

.category-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.legend-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-name {
    color: var(--secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legend-count {
    font-weight: 600;
    color: var(--ink);
    font-size: 12.5px;
}

/* Performance Footer */
.chart-performance-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
}

.perf-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.perf-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.perf-dot.blue { background-color: #0ea5e9; }
.perf-dot.amber { background-color: #f59e0b; }
.perf-dot.emerald { background-color: #10b981; }

.perf-label {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.perf-item strong {
    font-size: 14px;
    color: var(--ink);
}

/* Services Catalog Polish */
.services-section {
    padding: 85px 0;
    background: #ffffff;
}

.section-heading h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.6px;
}

.section-heading p {
    margin-top: 8px;
    color: #64748b;
    font-size: 16.5px;
}

.catalog-search {
    display: flex;
    gap: 10px;
    max-width: 760px;
    margin: 0 auto 20px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.catalog-search:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--ring), 0 8px 24px -4px rgba(15, 23, 42, 0.08);
}

.search-field {
    position: relative;
    flex: 1;
}

.search-field > .icon {
    position: absolute;
    left: 14px;
    top: 14px;
    color: #94a3b8;
    width: 20px;
    height: 20px;
}

.search-field input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    min-height: 46px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: 15.5px;
}

.search-field input:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.category-filters {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.category-filters button {
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    background: #f8fafc;
    color: #475569;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 600;
    min-height: 38px;
    transition: all 0.18s ease;
}

.category-filters button:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
    color: #0f172a;
}

.category-filters button[aria-pressed=true] {
    background: linear-gradient(135deg, #087f73, #0d9488);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(8, 127, 115, 0.28);
}

.result-count {
    text-align: center;
    color: #64748b;
    font-size: 13.5px;
    min-height: 22px;
    margin: 6px 0 16px;
    font-weight: 500;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.service-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    box-shadow: 0 4px 16px rgba(15, 42, 67, 0.03);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
}

.service-card:not(.disabled):hover {
    transform: translateY(-4px);
    border-color: #5eead4;
    box-shadow: 0 18px 36px -10px rgba(8, 127, 115, 0.14), 0 0 0 1px #a7f3d0;
}

.service-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.service-card .icon-tile {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #ecfdf5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.service-card:hover .icon-tile {
    transform: scale(1.05);
}

.service-card .icon-tile .icon {
    width: 26px;
    height: 26px;
}

.service-number {
    position: static;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 3px 9px;
    border-radius: 9999px;
    letter-spacing: 0.5px;
}

.service-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.service-card h3 {
    font-size: 17.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.45;
}

.service-card p {
    font-size: 13.5px;
    color: #64748b;
    margin-top: 5px;
}

.service-card a {
    margin-top: auto;
    padding-top: 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
}

.service-card a .icon {
    width: 17px;
    height: 17px;
    transition: transform 0.2s ease;
}

.service-card:hover a .icon {
    transform: translateX(4px);
}

.service-card.disabled {
    background: #f8fafc;
    border-color: #eef2f6;
    opacity: 0.8;
}

.service-card.disabled .icon-tile {
    background: #e2e8f0;
    color: #94a3b8;
}

.disabled-label {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding: 3px 10px;
    background: #e2e8f0;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
}

.catalog-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 14px;
    margin-top: 32px;
}

.catalog-note .icon {
    width: 18px;
    height: 18px;
    color: var(--brand);
}

/* How It Works Polish */
.how-section {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 85px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
}

.steps li {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 16px rgba(15, 42, 67, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.steps li:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(15, 42, 67, 0.09);
    border-color: #cbd5e1;
}

.step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #087f73, #0d9488);
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(8, 127, 115, 0.28);
}

.steps li > .icon {
    width: 32px;
    height: 32px;
    color: #087f73;
    margin-bottom: 14px;
}

.steps h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0b1f33;
}

.steps p {
    font-size: 14px;
    color: #64748b;
    margin-top: 6px;
    line-height: 1.6;
}

/* FAQ Polish */
.faq-section {
    padding: 85px 0;
    background: #ffffff;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.65fr;
    gap: 60px;
    align-items: start;
}

.faq-list details {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-list details:hover {
    border-color: #cbd5e1;
}

.faq-list details[open] {
    background: #f7fdfb;
    border-color: #087f73;
    box-shadow: 0 4px 16px rgba(8, 127, 115, 0.08);
}

.faq-list summary {
    padding: 18px 22px;
    font-size: 17px;
    font-weight: 700;
    color: #0b1f33;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary .icon {
    width: 18px;
    height: 18px;
    color: #94a3b8;
    transform: rotate(0deg);
    transition: transform 0.25s ease, color 0.2s ease;
}

.faq-list details[open] summary .icon {
    transform: rotate(180deg);
    color: #087f73;
}

.faq-list details > p {
    padding: 0 22px 20px;
    color: #475569;
    font-size: 14.5px;
    line-height: 1.75;
}

/* Final CTA Polish */
.final-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #064e46 0%, #087f73 50%, #0d9488 100%);
    color: white;
    border-radius: 28px;
    padding: 52px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 70px;
    box-shadow: 0 24px 48px -12px rgba(8, 127, 115, 0.35);
}

.final-cta h2 {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
}

.final-cta p {
    color: #ccfbf1;
    font-size: 17.5px;
    margin-top: 8px;
}

.final-cta .button.white {
    background: #ffffff;
    color: #065f46;
    font-weight: 700;
    font-size: 16px;
    padding: 13px 26px;
    border-radius: 12px;
    margin-top: 22px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
}

.final-cta .button.white:hover {
    background: #f0fdf4;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.final-cta > .icon {
    width: 160px;
    height: 160px;
    color: rgba(255, 255, 255, 0.14);
    stroke-width: 1;
    transform: rotate(8deg);
    margin-right: 15px;
    flex-shrink: 0;
}

/* Footer Polish */
.site-footer {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 38px 0;
}

.footer-inner {
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer-brand {
    font-size: 25px;
    font-weight: 700;
    color: #0b1f33;
    padding-right: 30px;
    border-right: 1px solid #cbd5e1;
    white-space: nowrap;
}

.footer-brand span {
    color: #087f73;
}

.footer-inner strong {
    font-size: 14.5px;
    color: #0f172a;
}

.footer-inner p {
    font-size: 13.5px;
    color: #64748b;
    margin-top: 2px;
}

.back-top {
    margin-left: auto;
    font-weight: 600;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.back-top:hover {
    color: #087f73;
    border-color: #087f73;
    background: #f0fdf9;
}

/* Responsive Polish */
@media (max-width: 1024px) {
    .stats-counter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .landing-charts-grid {
        grid-template-columns: 1fr;
    }
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 640px) {
    .hero {
        padding: 36px 0 20px;
    }
    .hero h1 {
        font-size: 34px;
    }
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .hero-actions .button {
        width: 100%;
    }
    .benefit-strip {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 16px;
    }
    .benefit-strip > div + div {
        border-left: none;
        border-top: 1px solid #f1f5f9;
        padding-top: 16px;
    }
    .stats-section {
        padding: 55px 0;
    }
    .stats-counter-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .landing-chart-card {
        padding: 20px 16px;
    }
    .chart-category-legend {
        grid-template-columns: 1fr;
    }
    .chart-performance-footer {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .service-grid {
        grid-template-columns: 1fr;
    }
    .steps {
        grid-template-columns: 1fr;
    }
    .final-cta {
        padding: 32px 24px;
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .final-cta > .icon {
        display: none;
    }
    .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    .footer-brand {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 14px;
    }
    .back-top {
        margin-left: 0;
    }
}

/* ==========================================================================
   USER GUIDES HUB & INTERACTIVE UI MOCKUPS (#user-guides)
   ========================================================================== */
.user-guides-section {
    background: linear-gradient(180deg, #f8fafc 0%, #f0f7f5 100%);
    padding: 85px 0 95px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}
.user-guides-section::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(8,127,115,0.06) 0%, rgba(255,255,255,0) 70%);
    top: -100px;
    right: -100px;
    pointer-events: none;
    border-radius: 50%;
}
.guide-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: #e6f4f1;
    color: #087f73;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 14px;
}
.guide-header-badge .icon {
    width: 16px;
    height: 16px;
}

/* 3 Main Guide Tabs Navigation */
.guide-tabs-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 40px 0 35px;
}
.guide-tab-btn {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 22px;
    text-align: left;
    cursor: pointer;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(15, 42, 67, 0.03);
    position: relative;
}
.guide-tab-btn:hover {
    border-color: #a7d9ce;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(8, 127, 115, 0.08);
}
.guide-tab-btn.active {
    background: #ffffff;
    border-color: #087f73;
    box-shadow: 0 10px 28px rgba(8, 127, 115, 0.12);
}
.guide-tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 24px;
    right: 24px;
    height: 4px;
    background: #087f73;
    border-radius: 4px 4px 0 0;
}
.guide-tab-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    background: #f1f5f9;
    color: #475569;
    transition: all 0.2s;
}
.guide-tab-btn.active .guide-tab-icon {
    background: #087f73;
    color: #ffffff;
}
.guide-tab-info {
    flex: 1;
}
.guide-tab-num {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #087f73;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 3px;
}
.guide-tab-title {
    font-size: 16.5px;
    font-weight: 700;
    color: #0b1f33;
    line-height: 1.4;
    display: block;
}
.guide-tab-desc {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.5;
    display: block;
}

/* Tab Panels */
.guide-panel {
    display: none;
    animation: guideFadeIn 0.25s ease-out forwards;
}
.guide-panel.active {
    display: block;
}
@keyframes guideFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Step Bar / Progress Line */
.guide-step-bar-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 26px;
    box-shadow: 0 2px 8px rgba(15, 42, 67, 0.02);
}
.guide-step-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.guide-step-item {
    flex: 1;
    text-align: center;
    position: relative;
    cursor: pointer;
    background: none;
    border: none;
    padding: 10px 8px;
    border-radius: 10px;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.guide-step-item:hover {
    background: #f8fafc;
}
.guide-step-item.active {
    background: #eefbf8;
}
.guide-step-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.18s;
    border: 2px solid #e2e8f0;
}
.guide-step-item.active .guide-step-badge {
    background: #087f73;
    color: #ffffff;
    border-color: #087f73;
    box-shadow: 0 0 0 4px #d5f5ee;
}
.guide-step-item.completed .guide-step-badge {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}
.guide-step-name {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    text-align: left;
    line-height: 1.35;
}
.guide-step-item.active .guide-step-name {
    color: #087f73;
    font-weight: 700;
}
.guide-step-arrow {
    color: #cbd5e1;
    font-size: 16px;
    flex-shrink: 0;
}

/* Step Views & Screens Grid */
.guide-view-card {
    display: none;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 36px;
    align-items: start;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 34px;
    box-shadow: 0 16px 40px rgba(15, 42, 67, 0.05);
    animation: guideFadeIn 0.22s ease-out forwards;
}
.guide-view-card.active {
    display: grid;
}

/* Browser Mockup Window */
.mockup-browser {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(15, 42, 67, 0.08);
    overflow: hidden;
    position: relative;
}
.mockup-window-header {
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.mockup-dots {
    display: flex;
    gap: 6px;
}
.mockup-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.mockup-dots span.dot-red { background: #ef4444; }
.mockup-dots span.dot-yellow { background: #f59e0b; }
.mockup-dots span.dot-green { background: #10b981; }
.mockup-url-bar {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12.5px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.mockup-url-bar .lock-icon {
    color: #10b981;
    width: 13px;
    height: 13px;
}
.mockup-window-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: #e2e8f0;
    color: #475569;
}
.mockup-window-badge.live {
    background: #eefbf8;
    color: #087f73;
}
.mockup-window-body {
    background: #f8fafc;
    padding: 22px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Mockup Elements: Form Fields, Badges, Tables, Cards */
.mockup-form-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 4px 12px rgba(15, 42, 67, 0.03);
}
.mockup-form-header {
    margin-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
}
.mockup-form-title {
    font-size: 16px;
    font-weight: 700;
    color: #0b1f33;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mockup-form-sub {
    font-size: 12.5px;
    color: #64748b;
    margin-top: 3px;
}
.mockup-input-group {
    margin-bottom: 12px;
}
.mockup-label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}
.mockup-input {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13.5px;
    color: #0b1f33;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}
.mockup-input.valid {
    border-color: #10b981;
    background: #f0fdf4;
}
.mockup-input.focused {
    border-color: #087f73;
    box-shadow: 0 0 0 3px rgba(8, 127, 115, 0.15);
}
.mockup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    border: none;
    cursor: default;
    width: 100%;
}
.mockup-btn.primary {
    background: #087f73;
    color: #ffffff;
}
.mockup-btn.success {
    background: #10b981;
    color: #ffffff;
}

/* Email Mockup Component */
.mockup-email-envelope {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 6px 16px rgba(15, 42, 67, 0.05);
}
.mockup-email-meta {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.6;
}
.mockup-email-meta strong {
    color: #0b1f33;
}
.mockup-email-content {
    font-size: 13.5px;
    color: #334155;
    line-height: 1.6;
}
.mockup-email-btn-wrap {
    text-align: center;
    margin: 20px 0 14px;
}
.mockup-email-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #087f73;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
}

/* Profile Mockup Component */
.mockup-profile-hero {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mockup-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #e6f4f1;
    color: #087f73;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}
.mockup-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}
.mockup-badge-pill.success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.mockup-badge-pill.warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.mockup-badge-pill.info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* Timeline & Download Mockup Component */
.mockup-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mockup-timeline-item {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
}
.mockup-timeline-item.active {
    border-color: #087f73;
    background: #f0faf7;
}
.mockup-timeline-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.mockup-timeline-icon.done {
    background: #10b981;
    color: #ffffff;
}
.mockup-timeline-icon.current {
    background: #087f73;
    color: #ffffff;
}
.mockup-doc-download-card {
    background: #ffffff;
    border: 2px dashed #087f73;
    border-radius: 14px;
    padding: 24px;
    text-align: center;
}
.mockup-doc-icon {
    width: 60px;
    height: 60px;
    background: #fef2f2;
    color: #ef4444;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.mockup-seal-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    color: #065f46;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Guide Explanation Sidebar (Right Side) */
.guide-info-pane {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.guide-step-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #087f73;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.guide-info-pane h3 {
    font-size: 24px;
    font-weight: 700;
    color: #0b1f33;
    line-height: 1.35;
    margin: 0;
}
.guide-info-pane p {
    font-size: 15.5px;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}
.guide-checklist {
    list-style: none;
    padding: 0;
    margin: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.guide-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: #334155;
    line-height: 1.5;
}
.guide-checklist-item .icon {
    width: 18px;
    height: 18px;
    color: #087f73;
    flex-shrink: 0;
    margin-top: 2px;
}
.guide-tip-box {
    background: #f0faf7;
    border: 1px solid #c9eee5;
    border-left: 4px solid #087f73;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: #134e4a;
    line-height: 1.6;
}
.guide-warning-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: #78350f;
    line-height: 1.6;
}
.guide-action-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}
.guide-step-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    transition: all 0.18s;
}
.guide-step-nav-btn:hover {
    background: #f8fafc;
    border-color: #087f73;
    color: #087f73;
}
.guide-step-nav-btn.primary {
    background: #087f73;
    color: #ffffff;
    border-color: #087f73;
}
.guide-step-nav-btn.primary:hover {
    background: #08675f;
}

/* Quick Floating / Mini Download Manual Bar */
.guide-manual-footer-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 28px;
    margin-top: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 4px 16px rgba(15, 42, 67, 0.04);
}
.guide-manual-footer-info {
    display: flex;
    align-items: center;
    gap: 16px;
}
.guide-manual-footer-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e6f4f1;
    color: #087f73;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.guide-manual-footer-text h4 {
    font-size: 16px;
    color: #0b1f33;
    margin: 0;
}
.guide-manual-footer-text p {
    font-size: 13.5px;
    color: #64748b;
    margin: 3px 0 0;
}

/* Responsive Rules for Guides */
@media (max-width: 1023px) {
    .guide-tabs-nav {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .guide-view-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }
    .guide-step-bar {
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .guide-step-item {
        flex: none;
        white-space: nowrap;
    }
    .guide-manual-footer-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}
@media (max-width: 639px) {
    .user-guides-section {
        padding: 55px 0 65px;
    }
    .guide-view-card {
        padding: 18px 14px;
    }
    .mockup-window-body {
        padding: 16px 12px;
        min-height: auto;
    }
    .guide-info-pane h3 {
        font-size: 20px;
    }
    .guide-info-pane p {
        font-size: 14.5px;
    }
    .guide-step-name {
        display: none;
    }
}

/* ==========================================================================
   E-DOCUMENT ULTRA-MODERN LUXURY DESIGN SYSTEM (PUBLIC & INTERNAL APP)
   ========================================================================== */

/* --- 1. Brand Logo Emblem & Status Indicators --- */
.brand-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #0d9488 0%, #059669 100%);
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
    flex-shrink: 0;
    transition: all 0.22s ease;
}
.brand-icon-wrap.mini {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
.brand-icon-wrap .icon {
    width: 22px;
    height: 22px;
    color: #ffffff;
}
.brand-icon-wrap.mini .icon {
    width: 16px;
    height: 16px;
}
.brand:hover .brand-icon-wrap {
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.45);
}
.brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.brand-name {
    font-size: 20px;
    font-weight: 800;
    color: #0b1f33;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.app-sidebar .brand-name {
    color: #ffffff;
}
.brand-org {
    font-size: 12px;
    color: #64748b;
    line-height: 1.2;
}
.app-sidebar .brand-org {
    color: #94a3b8;
}
.brand-status-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #34d399;
    margin-top: 4px;
    font-weight: 600;
}
.status-pulse-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}
.status-pulse-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #10b981;
    animation: statusPulseAnim 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
@keyframes statusPulseAnim {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* --- 2. Public Site Header Glassmorphism --- */
.site-header {
    height: 82px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(11, 31, 51, 0.03);
    transition: all 0.2s ease;
}
.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}
.desktop-nav a {
    color: #334155;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 0;
    position: relative;
    transition: color 0.18s ease;
}
.desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #087f73;
    border-radius: 2px;
    transition: width 0.2s ease;
}
.desktop-nav a:hover {
    color: #087f73;
}
.desktop-nav a:hover::after {
    width: 100%;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.header-actions .button {
    font-size: 14.5px;
    padding: 9px 18px;
    border-radius: 10px;
    font-weight: 600;
}
.header-portal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #087f73 0%, #0d9488 100%);
    box-shadow: 0 4px 14px rgba(8, 127, 115, 0.3);
}

/* --- 3. Hero Section & Mac Preview Window --- */
.hero {
    background: radial-gradient(circle at 10% 15%, rgba(13, 148, 136, 0.08) 0%, transparent 45%),
                radial-gradient(circle at 90% 85%, rgba(14, 165, 233, 0.07) 0%, transparent 45%),
                linear-gradient(135deg, #ffffff 0%, #f6fbf9 50%, #edf7f4 100%);
    padding: 65px 0 35px;
    position: relative;
}
.hero-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: #ffffff;
    border: 1px solid #d1fae5;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #047857;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.08);
    margin-bottom: 20px;
}
.hero-highlight {
    background: linear-gradient(135deg, #087f73 0%, #0d9488 50%, #0284c7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.hero-visual::before {
    background: linear-gradient(130deg, rgba(13, 148, 136, 0.12) 0%, rgba(14, 165, 233, 0.06) 80%);
}
.preview-window {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    box-shadow: 0 20px 45px -10px rgba(15, 42, 67, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    padding: 0;
}
.preview-window-top {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.window-dots {
    display: flex;
    gap: 6px;
    padding: 0;
}
.window-dots span,
.mockup-dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.15);
}
.window-dots span.dot-red,
.mockup-dots span.dot-red { background: #ff5f56; border: 1px solid #e0443e; }
.window-dots span.dot-yellow,
.mockup-dots span.dot-yellow { background: #ffbd2e; border: 1px solid #dea123; }
.window-dots span.dot-green,
.mockup-dots span.dot-green { background: #27c93f; border: 1px solid #1aab29; }
.preview-address-bar {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 12px;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    display: flex;
    align-items: center;
    gap: 6px;
}
.preview-address-bar .mini-shield {
    width: 13px;
    height: 13px;
    color: #10b981;
}
.preview-live-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: #ecfdf5;
    color: #047857;
}
.preview-content {
    padding: 24px;
}
.preview-content h2 {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}
.preview-document {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    transition: all 0.2s ease;
}
.preview-document:hover {
    border-color: #a7d9ce;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(8, 127, 115, 0.06);
}
.preview-notice {
    border: 1px solid #c9eee5;
    background: #f0faf7;
    border-radius: 14px;
}

/* --- 4. Benefit Strip Glass Card --- */
.benefit-strip {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 16px 36px -8px rgba(15, 42, 67, 0.08);
    padding: 28px 20px;
}
.benefit-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #e6f7f4 0%, #d5f1ee 100%);
    color: #087f73;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(8, 127, 115, 0.12);
}
.benefit-icon .icon {
    width: 28px;
    height: 28px;
}

/* --- 5. Services Section & Cards --- */
.service-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(15, 42, 67, 0.02);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:not(.disabled):hover {
    transform: translateY(-4px);
    border-color: #087f73;
    box-shadow: 0 14px 30px rgba(8, 127, 115, 0.1);
}
.service-card a .icon {
    transition: transform 0.2s ease;
}
.service-card:hover a .icon {
    transform: translateX(4px);
}

/* --- 6. Internal System: Luxury Midnight Sidebar --- */
.app-body {
    background: #f8fafc;
}
.app-sidebar {
    width: 270px;
    background: linear-gradient(180deg, #061320 0%, #0a1d30 50%, #08192a 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 16px 18px;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    z-index: 50;
}
.app-sidebar .brand {
    padding: 4px 8px 22px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.app-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    flex: 1;
}
.nav-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    padding: 14px 12px 6px;
}
.app-nav > a {
    padding: 10px 14px;
    border-radius: 10px;
    color: #cbd5e1;
    font-size: 14.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.18s ease;
    text-decoration: none;
    min-height: 44px;
}
.app-nav > a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transform: translateX(3px);
}
.app-nav > a[aria-current=page] {
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.24) 0%, rgba(13, 148, 136, 0.05) 100%);
    color: #2dd4bf;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #14b8a6;
}
.app-nav > a[aria-current=page] .icon {
    color: #2dd4bf;
}
.nav-group {
    border-radius: 10px;
}
.nav-group-summary {
    padding: 10px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: #cbd5e1;
    border-radius: 10px;
    transition: all 0.18s ease;
}
.nav-group-summary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.nav-group[open] > .nav-group-summary {
    color: #ffffff;
    font-weight: 600;
}
.nav-sub-list {
    margin-left: 14px;
    padding: 4px 0 6px 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-sub-link {
    padding: 8px 12px;
    font-size: 13px;
    color: #94a3b8;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.16s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-sub-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transform: translateX(2px);
}
.nav-sub-link[aria-current=page] {
    background: rgba(13, 148, 136, 0.22);
    color: #2dd4bf;
    font-weight: 600;
    box-shadow: inset 2px 0 0 #14b8a6;
}
.nav-badge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 7px;
    color: #ffffff;
}

/* Sidebar User Footer */
.sidebar-user-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.18s ease;
    text-decoration: none;
}
.sidebar-user-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(20, 184, 166, 0.3);
}
.sidebar-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0d9488 0%, #0284c7 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}
.sidebar-user-meta {
    flex: 1;
    min-width: 0;
}
.sidebar-user-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    margin-top: 2px;
}
.sidebar-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.18s ease;
    cursor: pointer;
}
.sidebar-logout-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

/* --- 7. Internal System: Sticky Glassmorphic App Header --- */
.app-main {
    margin-left: 270px;
    min-height: 100vh;
    background: #f8fafc;
}
.app-header {
    height: 80px;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    position: sticky;
    top: 0;
    z-index: 40;
    transition: all 0.2s ease;
}
.header-breadcrumbs {
    font-size: 12.5px;
    font-weight: 500;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.breadcrumb-sep {
    color: #cbd5e1;
}
.header-title-text {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
    margin: 0;
}
.header-user-section {
    display: flex;
    align-items: center;
    gap: 14px;
}
.account-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(15, 42, 67, 0.03);
    text-decoration: none;
    transition: all 0.18s ease;
}
.account-link:hover {
    border-color: #087f73;
    box-shadow: 0 4px 12px rgba(8, 127, 115, 0.1);
    transform: translateY(-1px);
}
.account-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488 0%, #087f73 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.account-details {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.account-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}
.account-role-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    align-self: flex-start;
    margin-top: 2px;
}
.role-admin { background: #f3e8ff; color: #7e22ce; }
.role-district_officer { background: #ecfdf5; color: #047857; }
.role-approver { background: #eff6ff; color: #1d4ed8; }
.role-user { background: #f0fdfa; color: #0f766e; }
.header-logout-button {
    min-height: 38px;
    padding: 7px 14px;
    font-size: 13px;
    gap: 6px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    color: #64748b;
    background: #ffffff;
}
.header-logout-button:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #ef4444;
}

/* --- 8. Internal Dashboard: Hero, KPI, Readiness --- */
.dash-hero {
    background: linear-gradient(135deg, #042f2e 0%, #064e47 40%, #0f766e 100%);
    border-radius: 20px;
    padding: 30px 36px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    box-shadow: 0 12px 30px -6px rgba(4, 47, 46, 0.25);
    position: relative;
    overflow: hidden;
}
.dash-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.2) 0%, transparent 70%);
    pointer-events: none;
}
.dash-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 12.5px;
    color: #a7f3d0;
    margin-bottom: 12px;
    font-weight: 600;
}
.dash-hero-title {
    font-size: 27px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.4px;
}
.dash-hero-desc {
    font-size: 14.5px;
    color: #ccfbf1;
    margin: 0;
    line-height: 1.55;
    max-width: 600px;
}
.dash-hero-btn-primary {
    background: #ffffff !important;
    color: #042f2e !important;
    border: none;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 12px;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s, box-shadow 0.18s;
}
.dash-hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    background: #f0fdfa !important;
}
.dash-hero-btn-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 12px;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.18s ease;
}
.dash-hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
}
.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.dash-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
    box-shadow: 0 2px 8px rgba(15, 42, 67, 0.03);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.dash-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background 0.2s ease;
}
.dash-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 42, 67, 0.08);
    border-color: #cbd5e1;
}
.dash-kpi-card:nth-child(1):hover::before { background: #0ea5e9; }
.dash-kpi-card:nth-child(2):hover::before { background: #8b5cf6; }
.dash-kpi-card:nth-child(3):hover::before { background: #10b981; }
.dash-kpi-card:nth-child(4):hover::before { background: #f59e0b; }
.dash-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.dash-kpi-icon.blue { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); color: #0284c7; }
.dash-kpi-icon.purple { background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); color: #7c3aed; }
.dash-kpi-icon.green { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); color: #16a34a; }
.dash-kpi-icon.amber { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #d97706; }
.dash-kpi-value {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-top: 8px;
}
.dash-kpi-label {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin-top: 4px;
}
.dash-kpi-sub {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

/* Readiness Hub */
.dash-readiness-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 26px 28px;
    margin-bottom: 28px;
    box-shadow: 0 4px 16px rgba(15, 42, 67, 0.04);
}
.dash-readiness-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.dash-readiness-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.dash-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.dash-readiness-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dash-readiness-card:hover {
    background: #ffffff;
    border-color: #087f73;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(8, 127, 115, 0.08);
}
.dash-readiness-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}
.dash-readiness-card p {
    font-size: 12.5px;
    color: #64748b;
    margin-top: 5px;
    line-height: 1.5;
}

/* Popular Services Grid */
.dash-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.dash-service-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(15, 42, 67, 0.02);
    min-height: 170px;
}
.dash-service-card:hover {
    border-color: #087f73;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(8, 127, 115, 0.1);
}
.dash-service-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: #087f73;
    background: #e6f4f1;
    padding: 3px 9px;
    border-radius: 6px;
    margin-bottom: 10px;
}
.dash-service-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin: 0 0 6px 0;
}
.dash-service-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #087f73;
    margin-top: 14px;
    transition: gap 0.2s ease;
}
.dash-service-card:hover .dash-service-action {
    gap: 10px;
}

/* --- 9. Internal Tables & History Page --- */
.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    padding: 26px 30px;
    border-radius: 18px;
    margin-bottom: 22px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.history-header h2 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 6px;
}
.history-header p {
    color: #94a3b8;
    font-size: 14px;
    margin: 0;
}
.history-stat-chip {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.history-toolbar-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(15, 42, 67, 0.03);
}
.history-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 42, 67, 0.04);
}
.history-table-header {
    padding: 18px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.history-table-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.admin-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 20px;
    border-bottom: 2px solid #e2e8f0;
}
.admin-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}
.admin-table tbody tr {
    transition: background 0.15s ease;
}
.admin-table tbody tr:hover {
    background: #f8fbfb;
}

/* Status Pills */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.status-pill.approved {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.status-pill.review, .status-pill.pending {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.status-pill.action {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.status-pill.rejected {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.status-pill.draft {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* --- 10. Responsive Tweaks --- */
@media (max-width: 1279px) {
    .dash-kpi-grid,
    .dash-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-readiness-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 1023px) {
    .app-sidebar {
        display: none;
    }
    .app-main {
        margin-left: 0;
    }
    .app-header {
        padding: 0 20px;
    }
}
@media (max-width: 639px) {
    .dash-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }
    .dash-hero-actions {
        width: 100%;
    }
    .dash-hero-actions a {
        flex: 1;
        justify-content: center;
    }
    .dash-kpi-grid,
    .dash-services-grid {
        grid-template-columns: 1fr;
    }
}

/* Modern Back Button */
.btn-back,
.page-actions > a:first-child:not(.button) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    min-height: 40px;
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    color: var(--secondary, #475569);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-back:hover,
.page-actions > a:first-child:not(.button):hover {
    background: #ffffff;
    border-color: var(--brand, #087f73);
    color: var(--brand, #087f73);
    box-shadow: 0 3px 8px rgba(8, 127, 115, 0.12);
    transform: translateX(-3px);
}

.btn-back svg,
.page-actions > a:first-child:not(.button) svg {
    width: 16px;
    height: 16px;
    color: currentColor;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-back:hover svg,
.page-actions > a:first-child:not(.button):hover svg {
    transform: translateX(-3px);
}






/* Action Accordion Component */
details.action-accordion {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 12px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
details.action-accordion:hover {
    border-color: #cbd5e1;
}
details.action-accordion[open] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
details.action-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: #ffffff;
    transition: background 0.15s;
}
details.action-accordion > summary::-webkit-details-marker,
details.action-accordion > summary::marker {
    display: none !important;
}
details.action-accordion > summary:hover {
    background: #f8fafc;
}
details.action-accordion[open] > summary {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
details.action-accordion > summary .chevron-icon {
    transition: transform 0.2s ease;
}
details.action-accordion[open] > summary .chevron-icon {
    transform: rotate(180deg);
}
.action-accordion-body {
    padding: 20px;
    background: #fafbfc;
}

.audit-filter-bar .date-field {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: #475569;
    font-weight: 500;
    white-space: nowrap;
}
.audit-filter-bar .date-field input {
    height: 42px;
    min-height: 42px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    background: #ffffff;
    color: var(--ink);
}
.audit-table tbody tr:nth-child(even) td {
    background: #fcfdfe;
}
.audit-table tbody tr:hover td {
    background: #f1f5f9;
}
.audit-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: #ffffff;
    padding: 12px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
}
.audit-pager-info {
    font-size: 13px;
    color: var(--secondary);
}
.audit-pager nav { margin: 0; }

/* Pagination (shared) */
.pager { margin: 16px 0 4px; }
.pager-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pager-item a, .pager-item span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 8px;
    background: #ffffff; color: var(--ink); font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.pager-item a:hover { background: #f1f5f9; border-color: #cbd5e1; }
.pager-item.active span { background: var(--brand); border-color: var(--brand); color: #ffffff; font-weight: 700; }
.pager-item.disabled span { color: #94a3b8; background: #f8fafc; cursor: default; }
.audit-pager .pager { margin: 0; }