/* Shared professional layer for the Webtoolsctr calculation pages. */
body.calc-pro-mode {
    --calc-pro-ink: #18212f;
    --calc-pro-muted: #718096;
    --calc-pro-line: #e4e9f1;
    --calc-pro-blue: #315efb;
    --calc-pro-blue-dark: #2144be;
    background: #f5f7fb !important;
    color: var(--calc-pro-ink);
}

body.calc-pro-mode .page-wrapper {
    width: min(1320px, calc(100% - 32px));
    max-width: none !important;
    margin: 0 auto;
    padding: 34px 0 78px !important;
}

body.calc-pro-mode .page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    margin-bottom: 12px !important;
    padding: 16px 20px;
    border: 1px solid var(--calc-pro-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 12px 32px rgba(24, 33, 47, .06);
}

body.calc-pro-mode .page-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(135deg, #315efb, #7b61ff) !important;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 8px 18px rgba(49, 94, 251, .22);
}

body.calc-pro-mode .page-header h1 {
    margin: 0 !important;
    color: var(--calc-pro-ink) !important;
    font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.035em;
}

.calc-pro-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 10px 4px;
    color: #8c97a7;
    font-size: 11px;
}

.calc-pro-breadcrumb a { color: var(--calc-pro-blue); font-weight: 800; text-decoration: none; }
.calc-pro-breadcrumb a:hover { color: var(--calc-pro-blue-dark); text-decoration: underline; }
.calc-pro-breadcrumb strong { color: #647084; font-weight: 700; }

.calc-pro-header-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
}

.calc-pro-header-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #dfe5ee;
    border-radius: 9px;
    background: #fff;
    color: #69768a;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.calc-pro-header-button:hover { border-color: #cbd6ff; background: #f4f6ff; color: var(--calc-pro-blue); text-decoration: none; }

.calc-pro-intro {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 17px;
    padding: 11px 14px;
    border: 1px solid #dfe7ff;
    border-radius: 12px;
    background: #f5f7ff;
    color: #66738a;
    font-size: 11px;
    line-height: 1.5;
}

.calc-pro-intro i { color: var(--calc-pro-blue); font-size: 14px; }

body.calc-pro-mode .main-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

body.calc-pro-mode .main-content,
body.calc-pro-mode .page-wrapper > .card,
body.calc-pro-mode .card {
    border: 1px solid var(--calc-pro-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 13px 34px rgba(24, 33, 47, .065) !important;
}

body.calc-pro-mode .main-content { min-width: 0; padding: clamp(20px, 3vw, 34px) !important; }
body.calc-pro-mode .main-content > .card { box-shadow: none !important; }
body.calc-pro-mode .sidebar { min-width: 0; }

body.calc-pro-mode form { position: relative; }
body.calc-pro-mode .form-section { margin-bottom: 24px; }
body.calc-pro-mode .section-title,
body.calc-pro-mode .section-title h2,
body.calc-pro-mode .section-title h3 { color: var(--calc-pro-ink) !important; font-weight: 800 !important; }
body.calc-pro-mode .section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 15px !important; font-size: 15px !important; }
body.calc-pro-mode .section-title i { color: var(--calc-pro-blue) !important; }
body.calc-pro-mode .form-label { color: #344155 !important; font-size: 12px !important; font-weight: 800 !important; }
body.calc-pro-mode .form-label em { color: #dc5260; }

body.calc-pro-mode input,
body.calc-pro-mode select,
body.calc-pro-mode textarea,
body.calc-pro-mode .form-input,
body.calc-pro-mode .form-select,
body.calc-pro-mode .form-control,
body.calc-pro-mode .form--control {
    min-height: 42px;
    border: 1px solid #dfe5ee !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--calc-pro-ink) !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.calc-pro-mode input:focus,
body.calc-pro-mode select:focus,
body.calc-pro-mode textarea:focus,
body.calc-pro-mode .form-input:focus,
body.calc-pro-mode .form-select:focus,
body.calc-pro-mode .form-control:focus,
body.calc-pro-mode .form--control:focus {
    border-color: #9eb1ff !important;
    box-shadow: 0 0 0 4px rgba(49, 94, 251, .1) !important;
    outline: 0;
}

body.calc-pro-mode .input-hint,
body.calc-pro-mode .unit,
body.calc-pro-mode small { color: #8b96a7; }
body.calc-pro-mode .form-grid { gap: 15px; }
body.calc-pro-mode .input-section,
body.calc-pro-mode .info-card,
body.calc-pro-mode .preview-section,
body.calc-pro-mode .formula-display { border-radius: 13px !important; }
body.calc-pro-mode .info-card { border-color: #e4e9f1 !important; background: #fbfcfe !important; }
body.calc-pro-mode .info-card-title { color: #344155 !important; }
body.calc-pro-mode .info-card-content,
body.calc-pro-mode .info-card-description { color: #758196 !important; }

body.calc-pro-mode button.btn-calculate,
body.calc-pro-mode button.btn-primary,
body.calc-pro-mode button[type="submit"],
body.calc-pro-mode .theme-btn {
    min-height: 43px;
    border: 1px solid var(--calc-pro-blue) !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--calc-pro-blue), #6d63ff) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(49, 94, 251, .2) !important;
    font-weight: 800 !important;
}

body.calc-pro-mode button.btn-calculate:hover,
body.calc-pro-mode button.btn-primary:hover,
body.calc-pro-mode button[type="submit"]:hover,
body.calc-pro-mode .theme-btn:hover { filter: brightness(.96); transform: translateY(-1px); }

body.calc-pro-mode .btn-reset,
body.calc-pro-mode .btn-secondary { border: 1px solid #dfe5ee !important; border-radius: 10px !important; background: #fff !important; color: #69768a !important; font-weight: 800 !important; }

body.calc-pro-mode .result-section,
body.calc-pro-mode .result-card,
body.calc-pro-mode .result-box,
body.calc-pro-mode .result-container {
    border: 1px solid #cfe8dc !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, #f3fcf8, #fff) !important;
    box-shadow: 0 12px 25px rgba(23, 138, 104, .08) !important;
}

body.calc-pro-mode .result-header { border-bottom-color: #dcefe6; }
body.calc-pro-mode .result-title { color: #185f4b !important; font-weight: 800 !important; }
body.calc-pro-mode .result-value { color: #14785c !important; font-weight: 900 !important; letter-spacing: -.035em; }
body.calc-pro-mode .result-details { color: #587b70; }
body.calc-pro-mode .detail-card { border-color: #dcefe6 !important; border-radius: 10px !important; background: #fff !important; }
body.calc-pro-mode .detail-label { color: #8a9b95 !important; }
body.calc-pro-mode .detail-value { color: #285b4c !important; }

.calc-pro-result-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #dcefe6; }
.calc-pro-result-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 0 10px; border: 1px solid #cfe8dc; border-radius: 8px; background: #fff; color: #337b66; cursor: pointer; font-size: 10px; font-weight: 800; }
.calc-pro-result-actions button:hover { background: #edfff6; }

body.calc-pro-mode .error-message,
body.calc-pro-mode .alert-error { border-radius: 10px !important; }
body.calc-pro-mode .loading { color: #758196; }

@media (max-width: 900px) {
    body.calc-pro-mode .main-content-wrapper { grid-template-columns: 1fr; }
    body.calc-pro-mode .sidebar { order: 2; }
}

@media (max-width: 600px) {
    body.calc-pro-mode .page-wrapper { width: min(100% - 22px, 1320px); padding-top: 20px !important; }
    body.calc-pro-mode .page-header { align-items: flex-start; flex-wrap: wrap; padding: 14px; }
    .calc-pro-header-actions { width: 100%; margin-left: 60px; }
    .calc-pro-header-button { flex: 1; justify-content: center; }
    body.calc-pro-mode .main-content { padding: 18px !important; }
}

@media print {
    body.calc-pro-mode { background: #fff !important; }
    body.calc-pro-mode .page-header,
    body.calc-pro-mode .calc-pro-breadcrumb,
    body.calc-pro-mode .calc-pro-intro,
    body.calc-pro-mode .sidebar,
    body.calc-pro-mode form,
    body.calc-pro-mode .info-cards,
    body.calc-pro-mode .calc-pro-result-actions,
    body.calc-pro-mode > header,
    body.calc-pro-mode > footer { display: none !important; }
    body.calc-pro-mode .page-wrapper { width: 100%; padding: 0 !important; }
    body.calc-pro-mode .main-content-wrapper { display: block; }
    body.calc-pro-mode .main-content { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
}