@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:56px; padding:6px 24px; gap:20px;}
.public-header .wordmark {font-family:var(--font); direction:ltr; flex-shrink:0; font-size:21px;}
.public-header .brand-mark {width:30px; height:30px; border-radius:8px; font-size:13px;}
.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:16px 24px 30px;}
.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;}

@media(max-width:1000px) {.tool-card-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:720px) {.public-header {min-height:56px; padding-block:6px;} .public-header .wordmark {font-size:21px;} .public-main {padding-top:14px;}}
@media(max-width:520px) {
  .public-header {padding-inline:18px; gap:12px; min-height:56px;}
  .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:12px 18px 24px;}
  .directory-main {padding-top:18px;}
  .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;}
  html[lang=ar] .tool-card h2 {letter-spacing:0;}
  html[lang=ar] .tool-card p {line-height:1.9;}
}
@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;}
}
@media(forced-colors:active) {.tool-card {border-color:CanvasText;}}
@media(prefers-reduced-motion:reduce) {.tool-card,.language-picker .fa-chevron-down {transition:none;} .tool-card:hover {transform:none;}}

/* Independent questions with a compact toolbar and an answer row. */
.tool-page .public-header {min-height:44px; padding-block:0;}
.tool-page .public-main {padding-top:2px;}
.percentage-page {margin:0;}
.percentage-title {margin-bottom:4px;}
.percentage-title h1 {margin:0; font-size:28px; line-height:1.3; letter-spacing:-.8px; font-weight:600;}
.question-calculators {display:grid; gap:0;}
.question-calculator {min-width:0; padding:0; border:0; border-bottom:1px solid #d5dfd5; border-radius:0; background:transparent;}
.question-topline {display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:32px; margin:0;}
.question-title {min-width:0; margin:0; color:#536957; font-size:12px; font-weight:500; letter-spacing:0; line-height:1.5;}
.question-toolbar {display:flex; align-items:center; flex-shrink:0; gap:2px;}
.question-workspace {display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:start; gap:14px; padding-bottom:4px;}
.question-answer-row {display:flex; align-items:flex-start; min-width:0; gap:10px;}
.question-sentence {display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; min-width:0; margin:0; padding:0; border:0;}
.question-phrase {display:inline-flex; align-items:center; min-height:44px; color:#263f33; font-size:18px; line-height:1.5;}
.question-field {display:inline-flex; flex-direction:column; width:90px; max-width:100%; flex:0 1 90px; min-width:0; gap:6px;}
.question-tail {display:inline-flex; align-items:flex-start; max-width:100%; gap:10px;}
.number-input {display:flex; min-width:0; border:0; border-radius:7px; background:#f8faf7; box-shadow:inset 0 0 0 1px #7d9685; transition:box-shadow .15s ease;}
.number-input input {width:100%; min-width:0; height:44px; padding:8px 9px; border:0; border-radius:7px; background:transparent; color:#182f24; font-size:16px; line-height:1.3; font-weight:500; font-variant-numeric:tabular-nums;}
.number-input input::placeholder {color:#728172; opacity:.75; font-weight:400;}
.number-input:hover {box-shadow:inset 0 0 0 1px #3e725a; background:#fff;}
.number-input:focus-within {border-color:#0e665b; background:#fff; box-shadow:0 0 0 3px #0e665b1c,inset 0 0 0 1px #0e665b;}
.public-body .number-input input:focus-visible {outline:0;}
.number-input:has(input[aria-invalid=true]) {box-shadow:inset 0 0 0 1px #ab4738; background:#fff9f6;}
.question-field .field-error {font-size:12px; line-height:1.5; overflow-wrap:anywhere;}
.calculate-button {flex-shrink:0; align-self:flex-start; min-height:44px; padding:9px 14px; gap:10px; border-radius:7px; background:#155e50; border-color:#155e50; font-size:13px; font-weight:500;}
.calculate-button:hover {background:#104b40; border-color:#104b40;}
.calculate-button>i {font-size:11px;}
.clear-button {min-width:44px; min-height:32px; padding:6px 10px; border:0; border-radius:7px; background:transparent; color:#536957; font-size:12px;}
.clear-button:hover {background:#f1f5ef; color:#234a35;}
.calculation-options {position:relative;}
.calculation-options>summary {display:flex; align-items:center; gap:8px; min-height:32px; padding:6px 10px; border-radius:7px; list-style:none; color:#536957; font-size:12px;}
.calculation-options>summary::-webkit-details-marker {display:none;}
.calculation-options>summary>i {font-size:9px;}
.calculation-options>summary:hover,.calculation-options[open]>summary {background:#f1f5ef;}
.question-options-panel {position:absolute; inset-inline-end:0; top:calc(100% + 5px); z-index:5; display:grid; gap:12px; width:240px; max-width:calc(100vw - 65px); padding:16px; border:1px solid #cbd8cd; border-radius:9px; background:#fff; box-shadow:0 8px 24px #193d201a;}
.precision-control {display:flex; align-items:center; justify-content:space-between; gap:10px;}
.precision-control label {color:#40583d; font-size:13px; line-height:1.5;}
.precision-select,.direction-select {position:relative; display:inline-flex; flex-shrink:0;}
.precision-select select,.direction-select select {appearance:none; -webkit-appearance:none; cursor:pointer; width:72px; min-height:44px; padding:8px 12px; padding-inline-end:28px; border:1px solid #7d9685; border-radius:7px; background:#f8faf7; color:#263f33; font-size:16px; line-height:1.5;}
.precision-select>i,.direction-select>i {position:absolute; inset-inline-end:11px; top:50%; transform:translateY(-50%); color:#536957; font-size:9px; pointer-events:none;}
.direction-select select {width:auto; max-width:145px; min-height:44px; padding-block:8px;}
.example-button {min-height:44px; padding:9px 12px; border:1px solid #c2d3c5; border-radius:7px; background:#f1f7ef; color:#315d43; font-size:13px;}
.example-button:hover {border-color:#74957c; background:#e9f1e5;}
.question-result {display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; flex:1; min-width:0; min-height:44px; padding:0 2px 0 10px; border:0; border-radius:7px; background:#f0f6eb; box-shadow:inset 0 0 0 1px #d8e5d4; gap:0 4px;}
.copy-result {display:inline-flex; align-items:center; justify-content:center; grid-column:2; grid-row:1; width:44px; height:44px; margin:0; border:1px solid transparent; border-radius:7px; background:transparent; color:#315d43; font-size:14px;}
.copy-result:hover:not(:disabled) {border-color:#b0c7a5; background:#fff;}
.copy-result:disabled {color:#6e7d64; opacity:.65; cursor:default;}
.copy-result[data-copied] {background:#dbeccb; color:#28511e;}
.percentage-output {display:flex; flex-wrap:wrap; align-items:baseline; grid-column:1; grid-row:1; gap:3px; min-width:0; margin:0; color:#5c7052; font-size:12px; line-height:1.5;}
.percentage-output>bdi {min-width:0; max-width:100%; overflow-wrap:anywhere;}
.has-result .percentage-output {color:#204d35; font-size:26px; line-height:1.25; letter-spacing:-.6px; font-weight:500; font-variant-numeric:tabular-nums;}
.question-result[data-magnitude=large] .percentage-output {font-size:20px; letter-spacing:0;}
.result-unit,.approximation {font-size:.6em; letter-spacing:0;}
.change-trend {display:inline-block; margin-inline-start:4px; color:#405e34; font-size:11px; font-weight:400; line-height:1.4; letter-spacing:0;}
.copy-feedback {grid-column:1 / -1; margin:6px 0 2px; color:#405e34; font-size:12px; line-height:1.5;}
.number-hint {margin:16px 0 0; color:#5a6c54; font-size:12px; line-height:1.7;}
.percentage-guide {margin-top:28px; padding-top:26px; border-top:1px solid #d5dfd2; font-size:16px; line-height:1.8; color:#405340;}
.percentage-guide h2 {margin:0 0 12px; color:#213c2b; font-size:25px; line-height:1.4; letter-spacing:-.5px;}
.guide-intro {max-width:76ch; margin-bottom:26px;}
.guide-sections {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 40px;}
.guide-sections>section {min-width:0;}
.percentage-guide h3 {margin:0 0 12px; color:#25462f; font-size:19px; line-height:1.5; letter-spacing:-.2px; font-weight:600;}
.percentage-guide p {margin:0 0 14px;}
.percentage-guide ol,.percentage-guide ul {margin:0 0 16px; padding-inline-start:24px;}
.percentage-guide li {padding-inline-start:4px; margin-bottom:8px;}
.percentage-guide li::marker {color:#345c3d; font-weight:600;}
.percentage-guide .guide-formula {padding:12px 15px; border-radius:7px; background:#eaf0e6; color:#26462f; font-size:15px; font-weight:500; line-height:1.8; overflow-wrap:anywhere; font-variant-numeric:tabular-nums;}
.percentage-guide .guide-example {padding-inline-start:14px; border-inline-start:3px solid #a6bda0; color:#294e32; font-weight:500;}
.guide-notes {margin-top:30px; padding-top:24px; border-top:1px solid #d5dfd2; max-width:90ch;}
html[lang=ar] .percentage-title h1 {letter-spacing:0; line-height:1.5;}
html[lang=ar] .percentage-guide {line-height:2;}
html[lang=ar] .percentage-guide h2,html[lang=ar] .percentage-guide h3 {letter-spacing:0; line-height:1.8;}
html[lang=ar] .question-phrase {line-height:2.2;}
html[lang=ar] .percentage-output {font-family:"DM Sans","Noto Sans Arabic",sans-serif;}
@media(max-width:1100px) {
  .question-workspace {grid-template-columns:minmax(0,1fr) 280px; gap:14px;}
  .question-field {width:110px; flex-basis:110px;}
}
@media(max-width:800px) {
  .question-workspace {grid-template-columns:1fr; gap:2px; padding-bottom:0;}
  .question-field {width:112px; flex-basis:112px;}
  .question-answer-row {gap:8px;}
  .guide-sections {grid-template-columns:1fr; gap:24px;}
  .percentage-guide {margin-top:24px; padding-top:20px;}
}
@media(max-width:520px) {
  .tool-page .public-main {padding:0 8px 24px;}
  .tool-page .public-header {padding-inline:8px;}
  .percentage-title h1 {font-size:20px; line-height:1.2; letter-spacing:-.4px;}
  .percentage-title {margin-bottom:2px;}
  html[lang=ar] .percentage-title h1 {line-height:1.3;}
  .question-topline {gap:6px;}
  .question-title {font-size:11px;}
  .question-toolbar {gap:0;}
  .clear-button,.calculation-options>summary {padding-inline:8px; font-size:11px;}
  .question-sentence {flex-wrap:nowrap; gap:4px;}
  .question-phrase {font-size:15px; white-space:nowrap;}
  .question-field {width:80px; flex-basis:80px;}
  .question-tail {flex-shrink:0; gap:3px;}
  .number-input input {padding:8px; font-size:16px;}
  .question-result {padding-inline-start:9px;}
  .ratio-question {flex-wrap:nowrap; gap:4px;}
  .ratio-question .question-phrase {font-size:14px; white-space:nowrap;}
  .ratio-question .question-field {flex-shrink:0;}
  .ratio-question .question-tail {flex-shrink:0; gap:3px;}
  .ratio-question .question-tail .question-phrase {font-size:13px;}
  .number-hint {font-size:11px;}
  .percentage-guide h2 {font-size:23px;}
  .percentage-guide h3 {font-size:18px;}
  .percentage-guide {padding-inline:10px;}
}
@media(max-width:380px) {
  .question-phrase {font-size:14px;}
  .question-sentence {gap:3px;}
  .ratio-question {gap:3px;}
  .ratio-question .question-phrase {font-size:13px;}
  .question-topline {gap:2px;}
  .clear-button,.calculation-options>summary {padding-inline:6px;}
  .calculate-button {padding-inline:12px; font-size:12px;}
}
@media(min-width:560px) and (max-height:540px) and (max-width:1000px) {
  .tool-page .public-main {padding:0 8px 24px;}
  .percentage-title h1 {font-size:20px; line-height:1.2;}
  .percentage-title {margin-bottom:2px;}
  html[lang=ar] .percentage-title h1 {line-height:1.3;}
  .question-calculators {grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:8px;}
  .question-workspace {grid-template-columns:1fr; gap:2px; padding-bottom:0;}
  .question-sentence {flex-wrap:nowrap; gap:2px;}
  .question-phrase,.ratio-question .question-phrase {font-size:13px; white-space:nowrap;}
  .question-field {width:80px; flex-basis:80px;}
  .question-tail {flex-shrink:0; gap:2px;}
  .question-title,.clear-button,.calculation-options>summary {font-size:11px;}
  .clear-button,.calculation-options>summary {padding-inline:6px;}
}
@media(forced-colors:active) {
  .question-calculator,.question-result,.number-input {border-color:CanvasText;}
  .number-input:focus-within {outline:2px solid Highlight; outline-offset:2px;}
  .copy-result:disabled {opacity:1; color:GrayText;}
}
@media(prefers-reduced-motion:reduce) {.number-input {transition:none;}}
@media print {
  .question-toolbar,.calculate-button,.copy-result {display:none;}
  .guide-sections {display:block;}
  .guide-sections>section {break-inside:avoid; margin-bottom:20px;}
  .question-calculator {break-inside:avoid;}
  .question-options-panel {display:none;}
}