@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/dm-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2')}
:root{--canvas:#f7f6f2;--surface:#fff;--ink:#18252b;--muted:#65716f;--line:#e4e6df;--accent:#0B635B;--accent-soft:#edf4ed;--danger:#a43030;--radius:9px;--sidebar:244px;--font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font:400 14px/1.6 var(--font);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:not-allowed}svg,img,canvas{max-width:100%}a,button,input,select,textarea,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #658f87;outline-offset:3px}h1,h2,h3,p{margin-top:0}h1{font-size:32px;font-weight:600;letter-spacing:-1.1px;line-height:1.2;margin-bottom:9px}h2{font-size:16px;font-weight:600;letter-spacing:-.25px;margin-bottom:12px}h3{font-size:14px;font-weight:600;margin-top:22px;margin-bottom:9px}p{margin-bottom:16px}input,select,textarea{min-height:44px;border:1px solid #b6beb8;border-radius:6px;padding:10px 13px;background:#fff;color:var(--ink);width:100%;min-width:0}input:disabled{background:#f1f2ee}input[type=file]{border:1px dashed #abb7af;padding:12px}input[type=file]::file-selector-button{font:inherit;border:0;border-radius:4px;padding:6px 10px;margin-inline-end:12px;background:#edf1eb;color:var(--ink);cursor:pointer}textarea{resize:vertical;min-height:120px}select{padding-inline-end:30px}pre{white-space:pre-wrap;overflow-wrap:anywhere}small{font-size:12px}summary{cursor:pointer;padding:10px 0}details>p{margin-top:10px}code,.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;overflow-wrap:anywhere}.muted{color:var(--muted)}.small{font-size:12px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--muted);margin-bottom:10px}.section-space{margin-block:22px}.stack{display:grid;gap:18px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field>label{font-size:13px;font-weight:500}.button{min-height:42px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:12px;line-height:1.45;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:white;font-weight:500;font-size:12px;white-space:normal;text-align:center;transition:background .15s ease,box-shadow .15s ease}.button:hover{background:#084f49;border-color:#084f49}.button.secondary{background:var(--surface);border-color:#d8ddd5;color:var(--ink)}.button.secondary:hover{background:#f1f3ed}.button.disabled{opacity:.45;pointer-events:none}.full-width{width:100%}.icon-button{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:0;border-radius:6px;color:var(--muted)}.icon-button:hover{background:#eff2ea;color:var(--ink)}.quiet-link{font-size:12px;font-weight:500;color:var(--accent);text-decoration:underline;text-underline-offset:3px}.wordmark{display:flex;align-items:center;font-size:22px;font-weight:700;letter-spacing:-1px;color:#18342c;white-space:nowrap}.brand-suffix{color:#738077;font-weight:400}.brand-mark{font-size:15px;display:inline-flex;align-items:center;justify-content:center;width:33px;height:33px;color:#fff;background:#174d40;border-radius:7px;margin-inline-end:9px}.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:10px;left:10px;z-index:100;background:white;padding:10px;transform:translateY(-180%)}.skip-link:focus{transform:none}.notice{padding:14px 18px;border-radius:7px;border:1px solid var(--line);margin-bottom:22px;font-size:13px}.notice.success{background:#eef5ec;border-color:#d4e3ce;color:#285533}.notice.error{background:#fff0ed;border-color:#e7bdb5;color:#8f3030}.notice.neutral{background:#f0f2ec;color:#4f5d51}.notice ul{margin:7px 0 0;padding-inline-start:18px}.badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:500;line-height:1.5;padding:4px 8px;border-radius:4px;white-space:nowrap}.badge.neutral{background:#f0f2ec;color:#566150}.badge.positive{background:#eaf3e6;color:#35643e}.status-dot{height:5px;width:5px;border-radius:50%;background:#87917c}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:30px 18px 0;background:#fcfcf8;border-inline-end:1px solid var(--line);display:flex;flex-direction:column;z-index:40}.sidebar .wordmark{margin:0 12px 36px}.nav-caption{display:block;font-size:9px;letter-spacing:1.4px;font-weight:600;color:#8b9288;margin:20px 14px 10px}.sidebar>.nav-caption{margin-top:0}.nav-link{display:flex;gap:12px;align-items:center;font-size:12px;font-weight:500;color:#657064;padding:11px 14px;min-height:42px;margin-bottom:4px;border-radius:6px}.nav-link i{width:17px;text-align:center;font-size:13px;color:#86917f}.nav-link:hover{background:#f1f3eb}.nav-link.active{color:#205b3c;background:#edf2e6}.nav-link.active i{color:#4b733d}.sidebar-bottom{margin-top:auto;padding-bottom:12px}.account{border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:18px 10px 0;margin-top:18px}.avatar{width:32px;height:32px;border-radius:50%;background:#e8e9df;color:#65714f;display:grid;place-items:center;font-size:12px;font-weight:600}.account strong{font-size:11px;display:block}.account small{font-size:10px;color:#899080;display:block}.account form{margin-inline-start:auto}.admin-shell{margin-inline-start:var(--sidebar);min-height:100dvh;display:flex;flex-direction:column}.topbar{height:67px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 38px;background:var(--canvas)}.topbar-path{font-size:11px;color:#899182}.topbar-path span{margin:0 12px;color:#c1c6ba}.topbar-path strong{font-weight:500;color:#5e6a5d}.topbar time{font-size:11px;color:#788270;white-space:nowrap}.admin-main{padding:35px 38px 25px;max-width:1630px;width:100%;margin:auto;flex:1;min-width:0}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:29px}.page-heading .muted{font-size:12px;margin:0}.heading-actions{display:flex;gap:8px}.page-heading .eyebrow{font-size:9px;letter-spacing:1.6px;color:#839076}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:23px;margin-bottom:23px;min-width:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.panel-heading h2{margin:0;font-size:14px}.panel-heading p{font-size:10px;margin:5px 0 0}.panel>h2{font-size:15px}.metric-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--radius);background:white;margin-bottom:25px}.metric{padding:22px 23px;border-inline-end:1px solid var(--line)}.metric:last-child{border:0}.metric-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#768170;font-weight:500}.metric-label i{color:#9aa38e}.metric>strong{display:block;font-size:37px;font-weight:500;line-height:1.15;letter-spacing:-1.6px;margin:15px 0 8px;font-variant-numeric:tabular-nums}.metric>span{font-size:9px;color:#87917e}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);gap:23px}.chart-wrap{height:205px;position:relative}.chart-note{font-size:10px;color:#899080;margin-top:16px;margin-bottom:0}.traffic-panel details summary{font-size:10px}.coverage-list{margin-top:8px}.coverage-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f1eb}.coverage-item:last-child{border:0}.coverage-item:hover strong{color:var(--accent)}.language-code{width:31px;height:31px;display:grid;place-items:center;background:#f3f4ee;border-radius:5px;font-size:9px;color:#68755c}.coverage-item strong{font-size:11px;font-weight:500;display:block}.coverage-item small{font-size:10px;color:#9a9f94;display:block}.coverage-item b{margin-inline-start:auto;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}.table-scroll{position:relative;overflow-x:auto;max-width:100%;overscroll-behavior-inline:contain}table{width:100%;border-collapse:collapse;text-align:start;font-size:12px}th{text-align:start;color:#8a9181;font-size:9px;font-weight:500;letter-spacing:.3px;padding:11px 14px;border-bottom:1px solid var(--line);background:#fafbf7}td{padding:15px 14px;border-bottom:1px solid #eef0e8;vertical-align:middle;color:#5d6957}tbody tr:last-child td{border-bottom:0}td strong,.table-title{font-weight:500;color:#263c2b}.table-title:hover{text-decoration:underline;text-underline-offset:3px}.table-panel{padding:0}.table-panel>.panel-heading{padding:22px 23px 0}.native-title{display:block;font-size:11px;line-height:1.8;color:#8b9584;margin-top:3px;max-width:390px}.language-chip{font-size:9px;padding:4px 5px;border:1px solid #e5e8df;border-radius:4px;margin-inline-end:8px;color:#7a886e;white-space:nowrap}.priority{font-size:10px;color:#9a9f93}.priority.high{color:#836d37}.pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-top:1px solid var(--line)}.pagination>div{display:flex;align-items:center;gap:12px}.pagination .button{min-height:34px;padding:6px 10px;font-size:10px}.page-count{font-size:10px;color:#8b9481}.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.filter-bar .field{flex:0 1 190px}.filter-bar .search-field{flex:1 1 240px;position:relative}.search-field i{position:absolute;inset-inline-start:13px;top:16px;color:#8c9583;font-size:11px}.search-field input{padding-inline-start:37px}.filter-bar input,.filter-bar select{border-color:#e0e4d9;font-size:12px}.empty-state{text-align:center;padding:55px 20px;color:#7f8975;max-width:580px;margin:0 auto}.empty-state>i{font-size:23px;color:#9aa98c;margin-bottom:18px}.empty-state h2,.empty-state h3{color:#43563c;font-size:17px;font-weight:500;margin:0 0 9px}.empty-state p{font-size:12px;margin-bottom:0;max-width:420px;margin-inline:auto}.empty-state.compact{padding:32px 15px}.empty-state.compact h3{font-size:14px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:25px 0}.detail-grid dt,.health-list dt{font-size:11px;color:#89927f}.detail-grid dd{margin:5px 0;font-size:13px;overflow-wrap:anywhere}.tag-list{display:flex;gap:6px;flex-wrap:wrap}.tag-list>span{background:#f2f4ed;padding:5px 9px;border-radius:4px;color:#6b795f;font-size:11px}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:22px}.settings-row h2{margin:5px 0}.settings-row .eyebrow{font-size:9px}.setting-form{display:flex;align-items:center;gap:10px;flex:0 1 440px}.setting-form input{font-size:12px}.setting-form .button{white-space:nowrap}.upload-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}.upload-row .field{flex:1;min-width:200px}.data-preview{font-size:11px;margin:0;min-width:140px;max-width:360px}.health-list{margin:0}.health-list>div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:16px 0}.health-list>div:last-child{border-bottom:0}.health-list dd{font-size:12px;margin:0;text-align:end}.narrow-panel{max-width:690px}.narrow-panel>p{font-size:13px;color:var(--muted)}.qr-code{padding:14px;background:white;display:inline-block;border:1px solid var(--line);border-radius:8px;margin:8px 0 16px}.qr-code svg{display:block;width:192px;height:192px}.setup-key{display:block;padding:12px;background:#f3f5ee;overflow-wrap:anywhere}.recovery-codes{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.admin-footer{padding:22px 38px;display:flex;justify-content:space-between;font-size:9px;color:#9ba38f;border-top:1px solid var(--line);gap:15px}.mobile-menu{display:none}.auth-body{min-height:100dvh;display:grid;place-items:center;padding:25px}.auth-card{width:100%;max-width:420px;background:white;border:1px solid var(--line);padding:40px;border-radius:12px}.auth-card .wordmark{margin-bottom:42px}.auth-card h1{font-size:28px;margin-bottom:12px}.auth-card>.muted{font-size:13px;margin-bottom:25px}.auth-card .stack{margin:25px 0}.auth-card>.quiet-link{display:inline-block;margin-top:25px}.auth-card .eyebrow{font-size:9px}.recovery-details{margin-top:20px}.public-header{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;border-bottom:1px solid var(--line)}.public-nav{display:flex;align-items:center;gap:24px;font-size:13px}.public-main{max-width:1200px;margin:auto;padding:35px 26px 50px}.public-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.public-heading h1{font-size:30px}.language-options{display:flex;gap:8px;flex-wrap:wrap}.language-options>a{min-height:44px;display:inline-flex;align-items:center;padding:9px 14px;border:1px solid var(--line);border-radius:6px;background:white;font-size:13px}.language-options>a[aria-current]{border-color:var(--accent);color:var(--accent)}.directory-empty{margin-top:28px;border-block:1px solid var(--line);padding:38px 0}.directory-empty h2{font-size:20px}.directory-empty p{font-size:14px;color:var(--muted);max-width:520px}.public-footer{max-width:1200px;margin:auto;padding:20px 26px;border-top:1px solid var(--line);color:#86907c;font-size:11px;display:flex;justify-content:space-between}.tool-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}.result-panel{background:white;border:1px solid var(--line);border-radius:8px;padding:24px}.result-value{font-size:clamp(30px,4vw,52px);line-height:1.15;font-weight:600;letter-spacing:-1px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.tool-help{margin-top:30px;max-width:760px}.tool-help>summary{font-size:14px;font-weight:500}.tool-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}.tool-directory>a{background:var(--surface);padding:18px}.tool-directory>a:hover{background:var(--accent-soft)}[dir=rtl]{font-family:system-ui,"Segoe UI",Tahoma,sans-serif}[dir=rtl] h1,[dir=rtl] .result-value{letter-spacing:0}
@media(min-width:1600px){.admin-main{padding-top:45px}.chart-wrap{height:260px}.dashboard-grid{grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr)}}
@media(max-width:1150px){:root{--sidebar:218px}.admin-main{padding:28px 25px}.topbar{padding-inline:25px}.metric{padding:18px}.metric>strong{font-size:32px}.dashboard-grid{grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);gap:17px}.panel{padding:19px}.settings-row{align-items:flex-start;flex-direction:column}.setting-form{flex:auto;width:100%}}
@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}.coverage-list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.metric:nth-child(2){border-inline-end:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.heading-actions .button{font-size:11px}.tool-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){:root{--sidebar:244px}.sidebar{transform:translateX(-100%);transition:transform .18s ease;box-shadow:6px 0 24px #18252b12}.nav-open .sidebar{transform:translateX(0)}.admin-shell{margin:0}.mobile-menu{display:inline-flex}.topbar{height:57px;padding:0 15px;gap:10px}.topbar-path{flex:1;font-size:10px}.topbar time{font-size:10px}.admin-main{padding:25px 17px}.page-heading{align-items:flex-start;flex-wrap:wrap;gap:15px;margin-bottom:22px}h1{font-size:28px}.page-heading .muted{max-width:330px}.page-heading .eyebrow{margin-bottom:7px}.metric{padding:19px}.metric>strong{font-size:32px}.metric>span{font-size:9px}.panel{padding:18px;margin-bottom:18px}.panel.table-panel{padding:0}.table-panel>.panel-heading{padding:17px 18px 0}.metric-strip{margin-bottom:18px}.dashboard-grid{gap:0}.filter-bar{gap:8px}.filter-bar .field{flex:1 1 120px}.filter-bar .search-field{flex:1 1 100%}.filter-bar button{min-height:44px}.pagination{padding:15px;flex-wrap:wrap}.detail-grid{grid-template-columns:1fr;gap:15px}.setting-form{flex-wrap:wrap}.setting-form input{flex:1 1 170px}.setting-form .button{flex:0 1 auto}.health-list>div{flex-direction:column;gap:5px}.health-list dd{text-align:start}.admin-footer{padding:17px;flex-wrap:wrap}.auth-card{padding:30px 25px}.coverage-list{gap:0 12px}.public-header{padding:16px 18px}.public-header .wordmark{font-size:20px}.public-main{padding:27px 18px}.public-heading{align-items:start;flex-direction:column;gap:10px}.public-heading h1{font-size:28px}.public-nav{gap:15px;font-size:12px}.tool-workspace{grid-template-columns:1fr;gap:18px}.public-footer{padding:18px}.directory-empty{padding:27px 0}.tool-directory{grid-template-columns:1fr}}
@media(max-width:370px){.admin-main{padding:20px 12px}.metric{padding:15px}.metric-label{font-size:9px}.metric>strong{font-size:29px}.coverage-list{grid-template-columns:1fr}.topbar-path span{margin:0 6px}.panel-heading{flex-wrap:wrap}.recovery-codes{grid-template-columns:1fr}.public-header .wordmark{font-size:18px}.public-nav{gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.sidebar,.topbar,.admin-footer,.public-header,.public-footer,.button,.heading-actions{display:none!important}.admin-shell{margin:0}.admin-main,.public-main{padding:0}.panel{break-inside:avoid;box-shadow:none}.tool-workspace{display:block}body{background:white;color:black}}

@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-arabic-arabic-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-arabic-arabic-600-normal.woff2') format('woff2');
}

/* Shared public chrome. Keep the working area close to the header. */
.public-body {font-size:15px; line-height:1.6;}
html[lang=ar] .public-body {font-family:"Noto Sans Arabic",var(--font);}
.public-header,.public-main,.public-footer {max-width:1152px;}
.public-header {min-height:80px; padding:16px 24px; gap:20px;}
.public-header .wordmark {font-family:var(--font); direction:ltr; flex-shrink:0; font-size:24px;}
.public-header .brand-mark {width:35px; height:35px; border-radius:9px; font-size:15px;}
.public-header .brand-suffix {color:#5e6a58;}
.public-nav {gap:22px; min-width:0;}
.public-nav .all-tools-link {min-height:44px; display:flex; align-items:center; font-size:14px; line-height:1.4; border-radius:6px;}
.public-nav .all-tools-link:hover {color:var(--accent); text-decoration:underline; text-underline-offset:5px;}
.public-main {padding:32px 24px 36px;}
.public-footer {margin:0 auto; padding:18px 24px; font-size:13px; color:#5d6c57;}
.public-footer a {min-height:44px; display:inline-flex; align-items:center; text-decoration:underline; text-underline-offset:4px;}
.public-body [hidden] {display:none!important;}
.public-body input:focus-visible,.public-body select:focus-visible {outline:2px solid var(--accent); outline-offset:3px;}
.public-body .field-error {font-size:12px; line-height:1.65; color:#9b352c;}

/* Native language disclosure, with normal links and full keyboard access. */
.language-picker {position:relative; z-index:20;}
.language-picker>summary {display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 10px; list-style:none; font-size:13px; line-height:1.45; border-radius:7px;}
.language-picker>summary::-webkit-details-marker {display:none;}
.language-picker>summary:hover,.language-picker[open]>summary {background:#edf0e9;}
.language-picker .fa-language {font-size:16px; color:#435e4b;}
.language-picker .fa-chevron-down {font-size:9px; color:#596950; transition:transform .15s ease;}
.language-picker[open] .fa-chevron-down {transform:rotate(180deg);}
.language-list {position:absolute; inset-inline-end:0; top:calc(100% + 7px); min-width:190px; padding:6px; background:#fff; border:1px solid #d5ded0; border-radius:10px; box-shadow:0 12px 32px #1d352012;}
.language-list>a {display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:44px; padding:10px 12px; border-radius:6px; font-size:14px;}
.language-list>a>i {font-size:11px;}
.language-list>a:hover,.language-list>a[aria-current] {background:var(--accent-soft); color:var(--accent);}

/* The directory begins with actual tools, without a headline or language row. */
.directory-main {padding-top:30px;}
.tool-card-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
.tool-card {position:relative; display:flex; flex-direction:column; min-width:0; min-height:230px; padding:25px; background:#fff; border:1px solid #dce2d6; border-radius:12px; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
.tool-card:hover {border-color:#9aad96; box-shadow:0 7px 22px #243d2410; transform:translateY(-2px);}
.tool-card:focus-visible {outline:3px solid var(--accent); outline-offset:4px;}
.tool-card-top {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px;}
.tool-card-icon {display:grid; place-items:center; width:47px; height:47px; color:var(--accent); background:#edf4e9; border:1px solid #e0e9d9; border-radius:11px; font-size:20px;}
.tool-card-arrow {display:grid; place-items:center; width:34px; height:34px; color:#67775e; border-radius:50%; transition:background .15s ease,color .15s ease;}
.tool-card:hover .tool-card-arrow {background:#edf4e9; color:var(--accent);}
[dir=rtl] .tool-card-arrow>i {transform:scaleX(-1);}
.tool-card h2 {margin:0 0 9px; font-size:20px; line-height:1.4; letter-spacing:-.45px; font-weight:600; color:#21392a; overflow-wrap:anywhere;}
.tool-card p {margin:0; max-width:37ch; font-size:14px; line-height:1.7; color:#5f6d59;}
.directory-empty {margin:0; padding:28px 0; border:0;}

/* Calculator hierarchy and mode selection. */
.percentage-page {max-width:1104px; margin-inline:auto;}
.percentage-title {margin-bottom:24px;}
.percentage-title h1 {margin:0; font-size:clamp(28px,3.1vw,38px); line-height:1.25; letter-spacing:-1.25px; font-weight:600;}
.percentage-calculator {position:relative;}
.calculation-modes {position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; min-width:0; margin:0 0 22px; padding:0; border:0; background:transparent;}
.mode-option {position:relative; display:flex; min-width:0; cursor:pointer;}
.mode-option>input,.adjustment-choice input {position:absolute; inset:0; z-index:1; width:100%; height:100%; min-height:0; padding:0; margin:0; opacity:0; cursor:pointer;}
.mode-option>span {display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:56px; padding:11px 12px; border:1px solid #b5c0b3; border-radius:10px; background:#fff; color:#52634c; font-size:13px; line-height:1.5; text-align:center; transition:background .14s ease,border-color .14s ease,box-shadow .14s ease;}
.mode-option:hover>span {background:#f6f8f2;}
.mode-option>span .mode-check {display:none; flex-shrink:0; font-size:10px;}
.mode-option>input:checked+span {border-color:#0e665b; background:#eaf4ef; color:#164f3d; font-weight:600; box-shadow:inset 0 0 0 1px #0e665b;}
.mode-option>input:checked+span .mode-check {display:inline-block;}
.mode-option>input:focus-visible+span,.adjustment-choice input:focus-visible+span {outline:3px solid var(--accent); outline-offset:2px;}
.percentage-workspace {display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); overflow:hidden; border:1px solid #dbe2d4; border-radius:13px; background:#fff;}
.calculation-inputs {position:relative; min-width:0; padding:28px;}
.calculation-heading {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:21px;}
.calculation-heading h2 {margin:0; font-size:18px; font-weight:600; line-height:1.45; letter-spacing:-.4px;}
.example-button {flex-shrink:0; max-width:145px; min-height:44px; border:1px solid #d2ded6; border-radius:8px; padding:9px 12px; color:#285e4b; background:#f3f7f2; font-size:12px; font-weight:500; line-height:1.45; transition:background .14s ease,border-color .14s ease;}
.example-button:hover {color:#063e35; background:#e8f1e8; border-color:#8cae98;}
.calculation-fields {position:relative; min-width:0; padding:0; margin:0; border:0;}
.calculation-field-pair {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;}
.calculation-field-pair .field {gap:9px;}
.calculation-field-pair .field>label {font-size:14px; line-height:1.55; font-weight:600; color:#3e5037;}
.number-input {position:relative; display:flex; align-items:stretch; min-width:0; border:1px solid #8a9b8b; border-radius:10px; background:#f8faf7; box-shadow:0 1px 2px #1f3f2010; transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;}
.number-input input {flex:1; width:100%; min-width:0; height:66px; padding:13px 17px; border:0; border-radius:10px; background:transparent; color:#182a20; font-size:28px; line-height:1.3; font-weight:500; letter-spacing:-.65px; font-variant-numeric:tabular-nums; box-shadow:none;}
.number-input input::placeholder {color:#70816e; opacity:.8; font-weight:400;}
.number-input:hover {border-color:#4d7763; background:#fff;}
.number-input:focus-within {border-color:#0e665b; background:#fff; box-shadow:0 0 0 4px #0e665b17,inset 0 0 0 1px #0e665b;}
.public-body .number-input input:focus-visible {outline:0;}
.number-input input:focus {background:transparent;}
.number-input:has(input[aria-invalid=true]) {border-color:#aa3b31; background:#fff8f5; box-shadow:inset 0 0 0 1px #aa3b31;}
.number-input:has(input[aria-invalid=true]):focus-within {box-shadow:0 0 0 4px #aa3b3115,inset 0 0 0 1px #aa3b31;}
.number-input.has-unit input {padding-inline-end:12px;}
.number-input>span {display:flex; align-items:center; justify-content:center; flex:0 0 44px; margin:10px 0; border-inline-start:1px solid #ced9cd; color:#496551; pointer-events:none; font-size:19px; font-weight:500;}
.number-hint {margin:14px 0 22px; color:#5f6d57; font-size:12px; line-height:1.65;}
.calculation-actions {display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:13px;}
.calculate-button {justify-content:center; min-height:52px; padding:12px 22px; border-radius:10px; font-size:15px; font-weight:600; gap:14px; background:#155e50; border-color:#155e50; box-shadow:0 2px 3px #143e2020; transition:background .15s ease,box-shadow .15s ease,transform .1s ease;}
.calculate-button:hover {background:#104e42; border-color:#104e42; box-shadow:0 4px 9px #143e2025;}
.calculate-button:active {transform:translateY(1px); box-shadow:none;}
.calculate-button i {font-size:12px;}
.clear-button {min-width:80px; min-height:52px; padding:11px 16px; border:1px solid #a7b8a5; border-radius:10px; background:#fff; color:#465c3b; font-size:14px; line-height:1.45; transition:background .14s ease,border-color .14s ease;}
.clear-button:hover {background:#f2f5ed; border-color:#a4b39b;}
.adjustment-choice {position:relative; display:flex; gap:10px; padding:0; margin:17px 0 0; border:0;}
.adjustment-choice label {position:relative; cursor:pointer;}
.adjustment-choice span {display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; min-width:112px; padding:9px 15px; border:1px solid #aebda4; border-radius:8px; background:#fff; color:#405b33; font-size:13px;}
.adjustment-choice i {font-size:11px;}
.adjustment-choice input:checked+span {border-color:#527a42; background:#edf5e6; box-shadow:inset 0 0 0 1px #527a42; font-weight:600;}

/* A clear, stable result area; no placeholder zero or clipped values. */
.percentage-result {position:relative; display:flex; flex-direction:column; min-width:0; min-height:300px; padding:28px; border-inline-start:1px solid #d9e3d0; background:#edf3e8;}
.result-topline {display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:25px;}
.result-topline h2 {margin:0; color:#3d5d32; font-size:14px; font-weight:500; letter-spacing:0;}
.percentage-output {display:flex; align-items:baseline; flex-wrap:wrap; gap:3px; min-width:0; margin:31px 0 14px; direction:ltr; color:#526b47; font-size:19px; line-height:1.6;}
.percentage-output>bdi {min-width:0; max-width:100%; overflow-wrap:anywhere;}
.has-result .percentage-output {margin-top:24px; margin-bottom:11px; color:#204d35; font-size:clamp(46px,4.8vw,66px); font-weight:500; line-height:1.12; letter-spacing:-2.5px; font-variant-numeric:tabular-nums;}
.percentage-result[data-magnitude=large] .percentage-output {font-size:36px; line-height:1.25; letter-spacing:-.8px;}
.result-unit {margin-inline-start:3px; font-size:.55em; font-weight:400; letter-spacing:0;}
.approximation {margin-inline-end:4px; color:#4e6a42; font-size:.52em;}
.calculation-expression {min-height:24px; color:#536c46; font-size:14px; line-height:1.75; overflow-wrap:anywhere;}
.change-trend {align-self:flex-start; max-width:100%; margin-bottom:9px; padding:4px 9px; border:1px solid #c4d6b7; border-radius:5px; background:#e0ebd6; color:#35562b; font-size:12px; line-height:1.5;}
.result-controls {display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:auto; padding-top:22px; border-top:1px solid #cfdcc4;}
.copy-result {display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; min-inline-size:140px; padding:9px 13px; border:1px solid #9eb591; border-radius:7px; background:#fafff6; color:#315928; font-size:13px; line-height:1.4; transition:background .14s ease,border-color .14s ease;}
.copy-result>i {flex-shrink:0; font-size:13px;}
.copy-result:disabled {border-color:#c9d6bf; background:#edf3e8; color:#67775c; cursor:default;}
.copy-result:not(:disabled):hover {background:#fff; border-color:#527a42;}
.copy-result[data-copied] {background:#dfeecf; border-color:#7e9a68; color:#234a19;}
.precision-control {display:flex; align-items:center; gap:9px; min-width:0; margin-inline-start:auto;}
.precision-control label {max-width:88px; color:#506443; font-size:12px; line-height:1.45;}
.precision-select {position:relative; display:inline-flex; flex-shrink:0;}
.precision-control .precision-select select {appearance:none; -webkit-appearance:none; cursor:pointer; width:72px; min-height:44px; padding:8px 11px; padding-inline-end:27px; border:1px solid #8b9e7e; border-radius:8px; background:#fafff6; color:#253e1e; font-size:16px; font-weight:500; line-height:1.4; transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;}
.precision-select>i {position:absolute; inset-inline-end:11px; top:50%; transform:translateY(-50%); font-size:10px; color:#506443; pointer-events:none;}
.precision-control select:hover {background:#fff; border-color:#527a42;}
.copy-feedback {margin:12px 0 0; font-size:13px; line-height:1.6; color:#3a5b30;}
.percentage-help {max-width:1104px; margin-top:24px; padding:0; border-top:1px solid #dbe2d5;}
.percentage-help>summary {min-height:52px; padding:16px 0; color:#4b6040; font-size:14px; font-weight:500;}
.percentage-help>summary:hover {color:var(--accent);}
.formula-help-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:21px 32px; padding-top:14px;}
.formula-help-grid h2 {margin-bottom:9px; font-size:16px; letter-spacing:-.1px; line-height:1.5;}
.formula-help-grid p,.percentage-help>p {margin-bottom:14px; font-size:14px; line-height:1.8; color:#4e6143;}
.percentage-calculator .notice {margin:16px 0 0;}

html[lang=ar] .percentage-title h1 {font-size:clamp(28px,3vw,37px); line-height:1.7; letter-spacing:0;}
html[lang=ar] .number-input input,html[lang=ar] .tool-card h2 {letter-spacing:0;}
html[lang=ar] .calculation-heading h2 {letter-spacing:0; line-height:1.8;}
html[lang=ar] .percentage-output {font-family:"DM Sans","Noto Sans Arabic",sans-serif;}
html[lang=ar] .mode-option>span {line-height:1.85;}
html[lang=ar] .tool-card p {line-height:1.9;}

@media(min-width:1600px) {
  .public-main {padding-top:38px;}
  .percentage-result {min-height:316px;}
}
@media(max-width:1000px) {
  .tool-card-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .calculation-inputs,.percentage-result {padding:24px;}
  .calculation-heading {gap:10px;}
  .calculation-heading h2 {font-size:17px;}
  .example-button {font-size:12px; max-width:125px;}
  .result-controls {gap:10px;}
  .copy-result {min-inline-size:130px; font-size:12px;}
  .precision-control label {max-width:72px; font-size:11px;}
  .mode-option>span {font-size:12px; padding-inline:10px;}
  .calculation-field-pair {gap:14px;}
}
@media(max-width:720px) {
  .public-header {min-height:72px; padding-block:12px;}
  .public-header .wordmark {font-size:22px;}
  .public-main {padding-top:26px;}
  .percentage-title {margin-bottom:21px;}
  .percentage-title h1 {font-size:31px;}
  .calculation-modes {grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:19px; padding:0; gap:8px;}
  .mode-option>span {min-height:52px; padding:10px; font-size:13px;}
  .percentage-workspace {grid-template-columns:1fr;}
  .calculation-inputs {padding:23px;}
  .calculation-heading {margin-bottom:17px;}
  .calculation-heading h2 {font-size:17px;}
  .example-button {max-width:150px; font-size:12px;}
  .number-input input {height:61px; font-size:27px;}
  .calculation-field-pair .field>label {font-size:14px;}
  .number-hint {margin:13px 0 18px; font-size:12px;}
  .percentage-result {min-height:238px; padding:23px; border-inline-start:0; border-top:1px solid #d4dfcb;}
  .percentage-output {margin-top:25px; font-size:18px;}
  .has-result .percentage-output {font-size:59px; margin-top:20px;}
  .result-controls {margin-top:21px; padding-top:17px; gap:12px;}
  .copy-result {min-inline-size:143px; font-size:13px;}
  .precision-control label {max-width:86px; font-size:12px;}
  .percentage-help {margin-top:22px;}
  .formula-help-grid {grid-template-columns:1fr; gap:15px;}
  .percentage-result[data-magnitude=large] .percentage-output {font-size:32px;}
  html[lang=ar] .percentage-title h1 {font-size:31px;}
}
@media(max-width:520px) {
  .public-header {padding-inline:18px; gap:12px; min-height:66px;}
  .public-header .wordmark {font-size:21px;}
  .public-header .brand-mark {width:31px; height:31px; margin-inline-end:8px; font-size:13px;}
  .public-nav {gap:10px;}
  .public-nav .all-tools-link {font-size:12px; max-width:128px;}
  .language-picker>summary {padding-inline:7px; gap:7px; font-size:12px;}
  .language-picker .fa-language {font-size:15px;}
  .language-list {min-width:180px;}
  .public-main {padding:25px 18px 26px;}
  .directory-main {padding-top:24px;}
  .tool-card-grid {grid-template-columns:1fr; gap:16px;}
  .tool-card {min-height:219px; padding:23px;}
  .tool-card-top {margin-bottom:25px;}
  .tool-card h2 {font-size:21px;}
  .tool-card p {font-size:14px;}
  .percentage-title h1 {font-size:28px; letter-spacing:-.8px;}
  .calculation-inputs,.percentage-result {padding:20px;}
  .calculation-heading h2 {font-size:16px;}
  .example-button {font-size:11px; max-width:120px; padding-inline:10px;}
  .calculation-field-pair {gap:13px;}
  .number-input input {height:59px; font-size:26px; padding-inline-start:12px;}
  .number-input>span {inset-inline-end:13px; font-size:18px;}
  .number-input.has-unit input {padding-inline-end:9px;}
  .number-input>span {flex-basis:34px;}
  .mode-option>span {font-size:12px; min-height:54px; padding:9px; gap:6px;}
  .mode-check {font-size:9px;}
  .calculation-actions {gap:11px;}
  .clear-button {min-width:76px; padding-inline:12px;}
  .calculate-button {font-size:14px; min-height:52px;}
  .number-hint {font-size:11px; line-height:1.7;}
  .copy-result {min-inline-size:0; flex:1; padding:9px 10px; font-size:12px; gap:7px;}
  .precision-control {gap:7px; flex-shrink:0;}
  .precision-control label {max-width:70px; font-size:11px;}
  .precision-control select {width:59px; font-size:16px;}
  .precision-control .precision-select select {width:62px; padding-inline-start:9px; padding-inline-end:24px;}
  .precision-select>i {inset-inline-end:9px; font-size:9px;}
  .percentage-help>summary {font-size:13px;}
  html[lang=ar] .percentage-title h1 {font-size:29px; line-height:1.65;}
}
@media(max-width:380px) {
  .public-header {padding-inline:14px; gap:10px;}
  .public-header .wordmark {font-size:20px;}
  .public-header .brand-mark {width:29px; height:29px; margin-inline-end:7px;}
  .language-picker>summary {min-width:44px; justify-content:center; padding-inline:5px;}
  .language-current {display:none;}
  .directory-page .language-current {display:inline;}
  .public-nav .all-tools-link {font-size:12px; max-width:124px;}
  .public-main {padding-inline:14px;}
  .percentage-title h1 {font-size:26px;}
  .calculation-inputs,.percentage-result {padding:18px;}
  .calculation-heading {gap:8px; margin-bottom:14px;}
  .calculation-heading h2 {font-size:15px;}
  .example-button {font-size:11px; max-width:112px;}
  .calculation-field-pair {gap:11px;}
  .calculation-field-pair .field>label {font-size:12px;}
  .number-input input {font-size:24px; height:57px;}
  .mode-option>span {font-size:11px;}
  .precision-control label {max-width:62px;}
  .precision-control select {width:56px;}
  .copy-result {font-size:11px; padding-inline:9px;}
  .has-result .percentage-output {font-size:53px;}
  .percentage-result[data-magnitude=large] .percentage-output {font-size:28px;}
  html[lang=ar] .percentage-title h1 {font-size:27px;}
}
@media(forced-colors:active) {
  .tool-card,.percentage-workspace,.number-input,.copy-result,.clear-button {border-color:CanvasText;}
  .number-input:focus-within {outline:2px solid Highlight; outline-offset:2px;}
  .mode-option>input:checked+span,.adjustment-choice input:checked+span {border:2px solid Highlight; box-shadow:none;}
  .percentage-result {border-color:CanvasText;}
  .mode-check {forced-color-adjust:auto;}
}
@media(prefers-reduced-motion:reduce) {
  .tool-card,.mode-option>span,.language-picker .fa-chevron-down,.number-input,.calculate-button,.example-button,.precision-control select {transition:none;}
  .tool-card:hover {transform:none;}
  .calculate-button:active {transform:none;}
}
@media print {
  .calculation-modes,.calculation-actions,.example-button,.result-controls,.percentage-help>summary {display:none;}
  .percentage-workspace {display:block; overflow:visible; border:0;}
  .percentage-result {background:#fff; border:1px solid #84917b; break-inside:avoid;}
  .percentage-help {border:0;}
}