.tools-two-column { grid-template-columns: 1fr; }
.tools-two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
@media (max-width:850px) { .tools-two-column { grid-template-columns:1fr; } }
.tools-page { --tools-ink:#162536; --tools-muted:#667789; --tools-line:#dfe8ee; --tools-blue:#1769aa; --tools-orange:#e97835; --tools-green:#16866a; background:#f5f8fa; min-height:calc(100vh - 76px); padding-top:76px; }.tools-page [v-cloak] { display:none; }.tools-hero { color:#fff; background:radial-gradient(circle at 12% 30%,rgba(48,154,176,.28),transparent 33%),linear-gradient(115deg,#102e45 0%,#174f66 56%,#1c7883 100%); overflow:hidden; }.tools-hero-inner { min-height:390px; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:40px; padding:64px 0; }.tools-kicker,.tools-eyebrow { color:#83e0d0; font-size:.82rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.tools-kicker i { margin-left:8px; }.tools-hero h1 { max-width:650px; margin:20px 0 14px; font-size:clamp(2.1rem,4.3vw,4rem); line-height:1.35; font-weight:800; }.tools-hero h1 strong { color:#8ee8dc; }.tools-hero p { max-width:620px; color:#d7e5e9; font-size:1.05rem; }.tools-hero-actions { display:flex; align-items:center; gap:20px; margin-top:30px; }.tools-hero-actions>span { color:#c0d8dc; font-size:.86rem; }.tools-hero-actions span i { color:#8ee8dc; margin-left:6px; }.tools-primary { display:inline-flex; align-items:center; gap:12px; padding:12px 20px; color:#0f3545; background:#8ee8dc; border-radius:6px; text-decoration:none; font-weight:800; }.tools-primary:hover { color:#0f3545; background:#fff; }.hero-coordinate-card { position:relative; height:270px; border:1px solid rgba(142,232,220,.3); background:linear-gradient(140deg,rgba(11,38,57,.2),rgba(22,122,133,.42)); transform:rotate(3deg); box-shadow:22px 28px 0 rgba(7,33,49,.18); }.coordinate-grid { position:absolute; inset:0; opacity:.35; background-image:linear-gradient(rgba(142,232,220,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(142,232,220,.22) 1px,transparent 1px); background-size:35px 35px; }.coord-point { position:absolute; width:13px; height:13px; background:#ffb46b; border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 9px rgba(255,180,107,.15); }.point-one { top:62px; right:94px; }.point-two { bottom:70px; left:84px; }.coord-line { position:absolute; height:2px; background:#8ee8dc; transform-origin:right center; }.line-one { width:220px; top:125px; right:99px; transform:rotate(154deg); }.line-two { width:170px; bottom:102px; left:85px; transform:rotate(-23deg); }.hero-card-label { position:absolute; right:28px; bottom:22px; display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; color:#fff; }.hero-card-label i { grid-row:span 2; color:#ffb46b; font-size:1.6rem; }.hero-card-label b { font-size:1rem; }.hero-card-label small { color:#b9d8db; letter-spacing:.12em; font-size:.64rem; direction:ltr; }
.tools-main { padding:64px 0 80px; }.tools-section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:24px; }.tools-section-heading h2 { margin:8px 0 0; color:var(--tools-ink); font-size:1.8rem; }.tools-section-heading p { max-width:370px; margin:0; color:var(--tools-muted); font-size:.9rem; }.tool-panel { padding:30px; background:#fff; border:1px solid var(--tools-line); border-radius:9px; box-shadow:0 10px 30px rgba(35,68,90,.06); }.coordinate-panel { margin-bottom:24px; }.panel-heading { display:flex; gap:16px; align-items:flex-start; }.panel-heading h2 { margin:4px 0 2px; color:var(--tools-ink); font-size:1.25rem; }.panel-heading p { margin:0; color:var(--tools-muted); font-size:.86rem; }.panel-icon { flex:0 0 46px; display:grid; place-items:center; width:46px; height:46px; border-radius:8px; font-size:1.3rem; }.panel-icon.blue { color:#1769aa; background:#e6f2fb; }.panel-icon.orange { color:#c45f24; background:#fff0e6; }.panel-icon.green { color:#16866a; background:#e5f6f0; }.panel-number { color:#8294a1; font-size:.7rem; font-weight:800; letter-spacing:.08em; }.mode-tabs,.shape-tabs { display:flex; gap:8px; margin:28px 0 22px; padding-bottom:1px; border-bottom:1px solid var(--tools-line); }.mode-tabs button,.shape-tabs button { padding:11px 15px; color:#718291; background:none; border:0; border-bottom:2px solid transparent; font-family:inherit; font-size:.87rem; cursor:pointer; }.mode-tabs button.active,.shape-tabs button.active { color:var(--tools-blue); border-bottom-color:var(--tools-blue); font-weight:700; }.mode-tabs i,.shape-tabs i { margin-left:7px; }.tool-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }.tool-form-grid.single-grid { grid-template-columns:repeat(2,1fr); }.tool-form-grid label { color:#465967; font-size:.82rem; font-weight:700; }.tool-form-grid input,.tool-form-grid select,.tool-form-grid textarea { display:block; width:100%; margin-top:7px; padding:11px 13px; color:var(--tools-ink); background:#fbfdfe; border:1px solid #d8e3e9; border-radius:5px; outline:none; font:inherit; font-size:.9rem; direction:ltr; text-align:left; }.tool-form-grid textarea { direction:ltr; resize:vertical; }.tool-form-grid input:focus,.tool-form-grid select:focus,.tool-form-grid textarea:focus { border-color:#50a5b2; box-shadow:0 0 0 3px rgba(80,165,178,.13); }.tool-form-grid small { display:block; margin-top:4px; color:#8a9aa5; font-size:.7rem; font-weight:400; }.panel-footer { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:22px; }.calculate-button { display:inline-flex; gap:8px; align-items:center; padding:11px 18px; color:#fff; background:var(--tools-blue); border:0; border-radius:5px; font:inherit; font-size:.83rem; font-weight:700; cursor:pointer; }.calculate-button:hover { filter:brightness(.92); }.orange-button { background:var(--tools-orange); }.green-button { background:var(--tools-green); }.text-button { color:#778894; background:none; border:0; font:inherit; font-size:.8rem; cursor:pointer; }.error-message { margin:14px 0 0; color:#ba4b48; font-size:.76rem; }.error-message i { margin-left:5px; }.result-box { margin-top:25px; padding:17px; background:#eef8f7; border:1px solid #cbe8e1; border-radius:6px; }.result-title { color:#147e6a; font-size:.8rem; font-weight:800; }.result-title i { margin-left:6px; }.result-values { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }.result-values div { display:flex; flex-direction:column; gap:3px; }.result-values span,.metric-result span,.area-result span { color:#6f808a; font-size:.72rem; }.result-values strong { color:#173f4e; font-size:1.1rem; direction:ltr; text-align:right; }.tools-two-column { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.compact-panel { min-width:0; }.metric-result,.area-result { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:24px; padding-top:19px; border-top:1px solid var(--tools-line); }.metric-result div,.area-result div { display:flex; flex-direction:column; gap:3px; }.metric-result strong,.area-result strong { color:var(--tools-ink); font-size:1.15rem; direction:ltr; }.area-result { grid-template-columns:repeat(2,1fr); }.area-result strong small { color:#6f808a; font-size:.7rem; font-weight:500; }.tools-note { display:flex; gap:15px; align-items:flex-start; margin-top:24px; padding:19px 22px; color:#496272; background:#eaf2f5; border-right:4px solid #57a9ac; }.tools-note>i { color:#348d91; font-size:1.2rem; }.tools-note strong { color:#204554; font-size:.88rem; }.tools-note p { margin:4px 0 0; font-size:.78rem; }
@media (max-width:850px) { .tools-hero-inner { grid-template-columns:1fr; min-height:0; padding:48px 0 42px; }.hero-coordinate-card { display:none; }.tools-section-heading { align-items:flex-start; flex-direction:column; gap:10px; }.tools-two-column { grid-template-columns:1fr; } }
@media (max-width:560px) { .tools-page { padding-top:70px; }.tools-main { padding:42px 0 56px; }.tool-panel { padding:22px 17px; }.tools-hero h1 { font-size:2rem; }.tools-hero-actions { align-items:flex-start; flex-direction:column; gap:15px; }.tool-form-grid,.tool-form-grid.single-grid,.result-values { grid-template-columns:1fr; }.mode-tabs { overflow-x:auto; white-space:nowrap; }.mode-tabs button { flex:0 0 auto; }.panel-heading h2 { font-size:1.08rem; }.shape-tabs button { padding-inline:9px; font-size:.78rem; }.metric-result { gap:7px; }.metric-result strong { font-size:.94rem; }.tools-note { padding:16px; } }
.tools-extra-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:24px; }.tools-extra-grid .tool-panel { min-width:0; }.panel-icon.violet { color:#7856a6; background:#f0eafb; }.violet-button { background:#7856a6; }.compact-tabs { margin-top:22px; }.compact-tabs button { flex:1; padding-inline:8px; font-size:.78rem; }.single-result { display:flex; flex-direction:column; align-items:center; gap:5px; margin-top:24px; padding:17px 10px; background:#f2f7f8; border-top:1px solid var(--tools-line); text-align:center; }.single-result span { color:#6f808a; font-size:.72rem; }.single-result strong { color:var(--tools-ink); font-size:1.15rem; direction:ltr; }.tool-form-grid input,.tool-form-grid select { text-align:center; direction:ltr; }.tool-form-grid textarea { text-align:center; }.result-values strong,.metric-result strong,.area-result strong { text-align:center; }.three-metrics { grid-template-columns:repeat(3,1fr); }.three-metrics strong { font-size:1rem; }
.dms-form { grid-template-columns:repeat(3,1fr); direction:ltr; }.dms-form label { direction:rtl; text-align:center; }.dms-form label:last-child { grid-column:1 / 2; }
@media (max-width:1100px) { .tools-extra-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:850px) { .tools-extra-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .tools-extra-grid { gap:18px; }.three-metrics { grid-template-columns:1fr; }.three-metrics div { align-items:center; padding:4px 0; }.compact-tabs button { font-size:.72rem; }.dms-form { grid-template-columns:repeat(3,1fr); gap:10px; }.dms-form label:last-child { grid-column:1 / 2; } }
.tools-two-column #area-tool { display:none; }.geometry-panel { margin-top:24px; }.geometry-shape-list { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin:26px 0; }.geometry-shape-list button { min-height:74px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#6f808a; background:#fbfdfe; border:1px solid var(--tools-line); border-radius:6px; font:inherit; font-size:.76rem; cursor:pointer; }.geometry-shape-list button i { color:#4c91a2; font-size:1.25rem; }.geometry-shape-list button.active { color:#126f68; background:#eef9f6; border-color:#55b8a3; box-shadow:inset 0 -3px 0 #16866a; font-weight:700; }.geometry-shape-list button.active i { color:#16866a; }.geometry-workspace { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); gap:30px; align-items:start; padding-top:24px; border-top:1px solid var(--tools-line); }.geometry-visual { display:flex; flex-direction:column; align-items:center; gap:18px; }.shape-diagram { position:relative; width:190px; height:150px; display:flex; align-items:center; justify-content:center; color:#1769aa; background:#edf7fa; border:1px solid #b9dce2; }.shape-diagram::before { content:""; display:block; width:105px; height:75px; background:#9ed9d4; border:2px solid #167d78; }.diagram-circle { border-radius:50%; }.diagram-circle::before { width:92px; height:92px; border-radius:50%; }.diagram-triangle::before { width:0; height:0; background:transparent; border:0; border-left:58px solid transparent; border-right:58px solid transparent; border-bottom:78px solid #9ed9d4; }.diagram-square::before { width:78px; height:78px; }.diagram-trapezoid::before { width:0; height:0; background:transparent; border-left:22px solid transparent; border-right:22px solid transparent; border-bottom:78px solid #9ed9d4; border-top:0; transform:scaleX(2.2); }.diagram-parallelogram::before { transform:skewX(-18deg); }.diagram-rhombus::before { width:80px; height:80px; transform:rotate(45deg); }.diagram-polygon::before { clip-path:polygon(50% 0,100% 35%,82% 100%,18% 100%,0 35%); }.shape-diagram span { position:absolute; z-index:1; color:#165c67; font-size:.8rem; font-weight:800; direction:ltr; }.diagram-radius { top:43%; right:28%; }.diagram-width,.diagram-base { bottom:23px; }.diagram-height { top:39%; left:22px; }.diagram-top { top:25px; }.geometry-formula { width:100%; padding:12px 10px; color:#5f7780; background:#f5fafb; border:1px dashed #b9dce2; text-align:center; }.geometry-formula span { display:block; font-size:.72rem; }.geometry-formula strong { display:block; margin-top:4px; color:#145f6b; font-family:Georgia,serif; font-size:1.05rem; direction:ltr; }.geometry-inputs { min-width:0; }.geometry-input-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:18px; }.geometry-input-grid label,.depth-field { color:#465967; font-size:.82rem; font-weight:700; }.geometry-input-grid input,.geometry-input-grid textarea,.depth-field input { display:block; width:100%; margin-top:7px; padding:11px 13px; color:var(--tools-ink); background:#fbfdfe; border:1px solid #d8e3e9; border-radius:5px; outline:none; font:inherit; font-size:.9rem; text-align:center; direction:ltr; }.geometry-input-grid textarea { resize:vertical; text-align:left; }.geometry-input-grid small { display:block; margin-top:4px; color:#8a9aa5; font-size:.7rem; font-weight:400; }.wide-field { grid-column:1 / -1; }.depth-field { display:block; margin-top:4px; }.geometry-panel .panel-footer { margin-top:22px; }.geometry-panel .area-result { margin-top:20px; }.geometry-panel .error-message { margin-bottom:0; }
.solid-panel { margin-top:0; padding:32px 0 0; background:transparent; border:0; border-top:1px dashed #cdbde0; border-radius:0; box-shadow:none; }.solid-panel .panel-heading { display:none; }.solid-shape-list { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:24px 0; }.solid-shape-list button { min-height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#6f808a; background:#fbfdfe; border:1px solid var(--tools-line); border-radius:6px; font:inherit; font-size:.76rem; cursor:pointer; }.solid-shape-list button i { color:#7856a6; font-size:1.25rem; }.solid-shape-list button.active { color:#684995; background:#f4effb; border-color:#bda9d9; box-shadow:inset 0 -3px 0 #7856a6; font-weight:700; }.solid-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; padding-top:24px; border-top:1px solid var(--tools-line); }.solid-visual { display:flex; flex-direction:column; align-items:center; gap:18px; }.solid-diagram { position:relative; width:190px; height:145px; display:grid; place-items:center; background:#f5f0fb; border:1px solid #d9cbea; }.solid-diagram::before { content:""; display:block; background:#c8b4e0; border:2px solid #7856a6; }.solid-diagram-cube::before,.solid-diagram-cuboid::before { width:90px; height:70px; transform:skewY(-12deg); }.solid-diagram-cylinder { border-radius:50%; }.solid-diagram-cylinder::before { width:76px; height:94px; border-radius:50% / 13%; }.solid-diagram-cone::before { width:0; height:0; background:transparent; border:0; border-left:48px solid transparent; border-right:48px solid transparent; border-bottom:94px solid #c8b4e0; }.solid-diagram-sphere::before { width:94px; height:94px; border-radius:50%; }.solid-formula { width:100%; padding:12px; color:#6c5a82; background:#faf7fd; border:1px dashed #cdbde0; text-align:center; }.solid-formula span { display:block; font-size:.72rem; }.solid-formula strong { display:block; margin-top:4px; color:#684995; font-family:Georgia,serif; font-size:1.05rem; direction:ltr; }.solid-inputs { min-width:0; }.solid-input-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }.solid-input-grid label { color:#465967; font-size:.82rem; font-weight:700; }.solid-input-grid input { display:block; width:100%; margin-top:7px; padding:11px 13px; color:var(--tools-ink); background:#fbfdfe; border:1px solid #d8e3e9; border-radius:5px; outline:none; font:inherit; font-size:.9rem; text-align:center; direction:ltr; }.solid-input-grid label:first-child:last-child { grid-column:1 / -1; }.solid-result { margin-top:20px; }.solid-result strong { color:#684995; }
@media (max-width:700px) { .solid-layout { grid-template-columns:1fr; }.solid-shape-list { grid-template-columns:repeat(3,1fr); }.solid-visual { order:0; }.solid-inputs { order:1; } }
@media (max-width:430px) { .solid-panel { padding:22px 17px; }.solid-shape-list { grid-template-columns:repeat(2,1fr); }.solid-input-grid { grid-template-columns:1fr; gap:12px; }.solid-diagram { width:170px; height:135px; } }
.solid-panel::before { display:block; margin-bottom:18px; color:#684995; content:"محاسبه حجم اشکال سه‌بعدی"; font-size:1.15rem; font-weight:800; }
@media (max-width:1000px) { .geometry-shape-list { grid-template-columns:repeat(4,1fr); } }
@media (max-width:700px) { .geometry-workspace { grid-template-columns:1fr; }.geometry-visual { order:0; }.geometry-inputs { order:1; }.geometry-shape-list { grid-template-columns:repeat(4,1fr); } }
@media (max-width:430px) { .geometry-panel { padding:22px 17px; }.geometry-shape-list { grid-template-columns:repeat(2,1fr); }.geometry-shape-list button { min-height:62px; }.geometry-input-grid { grid-template-columns:1fr; gap:12px; }.shape-diagram { width:170px; height:135px; } }
.diagram-rectangle::before { width:112px; height:68px; }
.tools-main { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.tools-section-heading,.coordinate-panel,.geometry-panel,.tools-note { grid-column:1 / -1; }
.tools-section-heading { grid-row:1; margin-bottom:0; }
.coordinate-panel { grid-row:2; margin-bottom:0; }
.tools-two-column,.tools-extra-grid { display:contents; }
.tools-two-column #slope-tool { grid-column:1; grid-row:3; }
.tools-extra-grid #distance-tool { grid-column:2; grid-row:3; }
.tools-extra-grid #dms-tool { grid-column:1; grid-row:4; }
.tools-extra-grid #section-volume-tool { grid-column:2; grid-row:4; }
.geometry-panel { grid-row:5; margin-top:0; }
.tools-note { grid-row:6; }
@media (max-width:850px) { .tools-main { display:block; }.tools-two-column { display:grid; grid-template-columns:1fr; gap:24px; }.tools-extra-grid { display:grid; grid-template-columns:1fr; gap:24px; }.tools-two-column #slope-tool,.tools-extra-grid #distance-tool,.tools-extra-grid #dms-tool,.tools-extra-grid #section-volume-tool { grid-column:auto; grid-row:auto; } }
.tools-seo-copy,.tools-faq { grid-column:1 / -1; }.tools-seo-copy { padding:28px 30px; background:#eef6f7; border:1px solid #d8e9eb; border-radius:9px; }.tools-seo-copy h2 { margin:8px 0 10px; color:var(--tools-ink); font-size:1.35rem; }.tools-seo-copy p { max-width:900px; margin:0 0 8px; color:#526b75; font-size:.88rem; }.tools-seo-copy p:last-child { margin-bottom:0; }.tools-faq { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }.tools-faq .tools-section-heading { grid-column:1 / -1; }.tools-faq details { padding:15px 17px; background:#fff; border:1px solid var(--tools-line); border-radius:6px; }.tools-faq summary { color:var(--tools-ink); cursor:pointer; font-size:.86rem; font-weight:700; }.tools-faq summary::marker { color:var(--tools-blue); }.tools-faq details p { margin:10px 0 0; color:var(--tools-muted); font-size:.8rem; }.tools-faq+.tools-note { grid-column:1 / -1; }
.tools-rating { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 28px; background:#fffaf1; border:1px solid #f0dfbc; border-radius:9px; }.tools-rating h2 { margin:7px 0 4px; color:var(--tools-ink); font-size:1.2rem; }.tools-rating p { margin:0; color:var(--tools-muted); font-size:.82rem; }.rating-control { display:flex; flex-direction:column; align-items:center; gap:8px; }.rating-stars { display:flex; direction:ltr; gap:4px; }.rating-stars button { width:36px; height:36px; padding:0; color:#b8a98d; background:transparent; border:0; font-size:1.35rem; cursor:pointer; }.rating-stars button:hover,.rating-stars button.active { color:#e39a32; }.rating-control small { color:#5e7a69; font-size:.75rem; }.rating-control small.rating-error { color:#b04b49; }
@media (max-width:700px) { .tools-seo-copy { padding:22px 18px; }.tools-faq { grid-template-columns:1fr; }.tools-faq .tools-section-heading { display:flex; } }
@media (max-width:560px) { .tools-rating { align-items:flex-start; flex-direction:column; padding:20px 18px; }.rating-control { align-items:flex-start; }.rating-stars button { width:34px; } }