* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #d8d8d2;
    color: #25282a;
    font: 12px/1.45 Verdana, Arial, sans-serif;
}

a {
    color: #355d7a;
    text-decoration: underline;
}

a:hover {
    color: #7b4a2f;
}

.portal {
    width: 100%;
    background: #fff;
}

.top-strip {
    padding: 5px 10px;
    background: #ecece7;
    border-bottom: 1px solid #a9aaa4;
    color: #656762;
    font-size: 10px;
}

.top-strip .right {
    float: right;
}

.header {
    width: 100%;
    border-collapse: collapse;
    background: #657887;
    color: #fff;
    border-bottom: 1px solid #4c5e6a;
}

.header td {
    padding: 10px 12px;
    vertical-align: middle;
}

.brand {
    font: bold 29px/1 Arial, sans-serif;
    letter-spacing: -1px;
}

.brand a {
    color: #fff;
    text-decoration: none;
}

.brand span {
    color: #e8e1c8;
}

.slogan {
    margin-top: 4px;
    color: #edf0f1;
    font-size: 11px;
}

.header-info {
    width: 320px;
    text-align: right;
    color: #f1f3f4;
    font-size: 10px;
}

.tabs {
    width: 100%;
    border-collapse: collapse;
    background: #d9d2b8;
    border-top: 1px solid #ebe7d6;
    border-bottom: 1px solid #999278;
}

.tabs td {
    padding: 0;
    border-right: 1px solid #aaa48c;
}

.tabs td:last-child {
    border-right: 0;
}

.tabs a {
    display: block;
    padding: 7px 12px;
    color: #3d484f;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}

.tabs a:hover {
    background: #e9e4cf;
    color: #1f2b32;
}

.pathbar {
    padding: 5px 10px;
    background: #f4f2e8;
    border-bottom: 1px solid #c7c2ad;
    color: #77705b;
    font-size: 10px;
}

/* ВАЖНО: основной контент физически первый в DOM */
.page-shell {
    display: block;
}

main.content {
    padding: 8px 10px 12px;
}

aside.after-content {
    padding: 0 10px 14px;
}

.title-line {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 7px;
}

.title-line td {
    padding: 0;
    vertical-align: bottom;
}

h1 {
    margin: 0;
    color: #445b69;
    font: bold 24px/1.15 Arial, sans-serif;
}

.print-tools {
    text-align: right;
    font-size: 10px;
    color: #777;
}

.summary-table,
.steps,
.data-table,
.catalog,
.calc-form {
    width: 100%;
    border-collapse: collapse;
}

.summary-table {
    border: 1px solid #9ea3a4;
    margin-bottom: 9px;
}

.summary-table td {
    padding: 7px;
    border-right: 1px solid #b9bcba;
    vertical-align: top;
}

.summary-table td:last-child {
    border-right: 0;
}

.summary-k {
    width: 105px;
    background: #eef0ef;
    color: #505a60;
    font-weight: bold;
}

.summary-v {
    background: #fff;
}

.dashboard {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 8px 0 10px;
}

.dashboard td {
    width: 33.333%;
    padding: 0 4px;
    vertical-align: top;
}

.dashboard td:first-child {
    padding-left: 0;
}

.dashboard td:last-child {
    padding-right: 0;
}

.panel {
    height: 100%;
    border: 1px solid #939999;
    background: #fff;
}

.panel-head {
    padding: 5px 7px;
    color: #283036;
    font-weight: bold;
    border-bottom: 1px solid #969b99;
}

.panel-head.blue {
    background: #cbd6dc;
}

.panel-head.orange {
    background: #ded1bf;
}

.panel-head.green {
    background: #cad6c5;
}

.panel-body {
    padding: 7px;
}

.panel-body p {
    margin: 5px 0;
}

.formula {
    margin: 8px 0;
    padding: 7px;
    border: 1px solid #b7bcbd;
    background: #f7f7f5;
    text-align: center;
    font: bold 18px Georgia, serif;
}

.section {
    margin-top: 10px;
    border: 1px solid #949a9a;
    background: #fff;
}

.section-title {
    padding: 5px 7px;
    background: #e8ebea;
    border-bottom: 1px solid #9fa4a2;
    color: #46565d;
    font-weight: bold;
}

.section-body {
    padding: 7px;
}

.steps th,
.steps td,
.data-table th,
.data-table td,
.catalog th,
.catalog td {
    padding: 6px;
    border: 1px solid #b2b6b5;
    vertical-align: top;
}

.steps th,
.data-table th,
.catalog th {
    background: #f0f1ef;
    text-align: left;
    color: #444c50;
}

.step-no {
    width: 44px;
    text-align: center;
    background: #f3efe1;
    font-weight: bold;
    color: #6c6447;
}

.warning {
    margin: 7px 0;
    padding: 7px;
    border: 1px solid #b9a18f;
    background: #f6eee8;
}

.calc-form td {
    padding: 4px;
    vertical-align: middle;
}

.calc-label {
    width: 90px;
    color: #555e61;
}

input {
    width: 60px;
    padding: 4px;
    border: 1px solid #818686;
    background: #fff;
    font: 12px Verdana, sans-serif;
    text-align: center;
}

button {
    padding: 5px 10px;
    border: 1px solid #717777;
    background: #dedfdb;
    color: #111;
    font: bold 11px Verdana, sans-serif;
    cursor: pointer;
}

.result {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid #aaa48b;
    background: #f5f2df;
}

.catalog td {
    width: 16.666%;
}

.catalog strong {
    display: block;
    margin-bottom: 4px;
    color: #4b5d65;
}

.catalog ul {
    margin: 0;
    padding-left: 16px;
}

.catalog li {
    margin: 3px 0;
}

.qa {
    margin: 7px 0;
    padding-bottom: 7px;
    border-bottom: 1px dotted #a4a7a5;
}

.qa:last-child {
    border-bottom: 0;
}

.qa b {
    color: #4c6572;
}

/* Вспомогательные блоки находятся ПОСЛЕ main в DOM */
.after-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
}

.aux-box {
    border: 1px solid #989e9c;
    background: #f8f8f5;
}

.aux-head {
    padding: 5px 7px;
    background: #dedfd9;
    border-bottom: 1px solid #989e9c;
    color: #4f5859;
    font-weight: bold;
}

.aux-body {
    padding: 7px;
}

.aux-body ul {
    margin: 0;
    padding-left: 17px;
}

.aux-body li {
    margin: 3px 0;
}

.footer {
    padding: 8px 10px;
    background: #657887;
    color: #f1f2f1;
    border-top: 1px solid #4c5e6a;
    font-size: 10px;
    text-align: center;
}

.footer a {
    color: #fff;
}

@media (max-width: 800px) {
    body {
        background: #fff;
        font-size: 14px;
    }

    .top-strip {
        display: none;
    }

    .header,
    .header tbody,
    .header tr,
    .header td {
        display: block;
        width: 100%;
    }

    .header-info {
        width: auto;
        text-align: left;
        padding-top: 0 !important;
    }

    .tabs,
    .tabs tbody,
    .tabs tr {
        display: block;
        width: 100%;
    }

    .tabs tr {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .tabs td {
        display: block;
        border-bottom: 1px solid #aaa48c;
    }

    .tabs a {
        text-align: left;
        padding: 9px;
    }

    main.content {
        padding: 7px;
    }

    aside.after-content {
        padding: 0 7px 10px;
    }

    .title-line,
    .title-line tbody,
    .title-line tr,
    .title-line td,
    .summary-table,
    .summary-table tbody,
    .summary-table tr,
    .summary-table td,
    .dashboard,
    .dashboard tbody,
    .dashboard tr,
    .dashboard td {
        display: block;
        width: 100%;
    }

    .print-tools {
        text-align: left;
        margin-top: 4px;
    }

    .summary-table td {
        border-right: 0;
        border-bottom: 1px solid #b9bcba;
    }

    .dashboard td {
        padding: 0 0 7px;
    }

    .catalog,
    .catalog tbody,
    .catalog tr {
        display: block;
        width: 100%;
    }

    .catalog tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .catalog td {
        display: block;
        width: auto;
    }

    .after-grid {
        display: block;
    }

    .aux-box {
        margin-bottom: 7px;
    }

    input {
        width: 100%;
        max-width: 130px;
        padding: 7px;
        font-size: 16px;
    }

    button {
        padding: 8px 12px;
        font-size: 13px;
    }

    h1 {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .tabs tr {
        grid-template-columns: 1fr 1fr;
    }

    .catalog tr {
        grid-template-columns: 1fr;
    }
}


/* Full project components */
.lead{margin:7px 0 9px;font-size:13px;line-height:1.55}.box{margin:10px 0;border:1px solid #949a9a;background:#fff}.box-head{padding:5px 7px;background:#e8ebea;border-bottom:1px solid #9fa4a2;color:#46565d;font-weight:bold}.box-head.blue{background:#cbd6dc}.box-head.orange,.box-head.beige{background:#ded1bf}.box-head.green{background:#cad6c5}.text-pad,.rule,.calc{padding:7px}.portal-dashboard{width:100%;border-collapse:collapse;table-layout:fixed;margin:8px 0 10px}.portal-dashboard td{width:33.333%;padding:0 4px;vertical-align:top}.portal-dashboard td:first-child{padding-left:0}.portal-dashboard td:last-child{padding-right:0}.portal-panel{height:100%;border:1px solid #939999;background:#fff}.portal-panel-head{padding:5px 7px;border-bottom:1px solid #969b99;color:#283036;font-weight:bold}.portal-panel-head.blue{background:#cbd6dc}.portal-panel-head.beige{background:#ded1bf}.portal-panel-head.green{background:#cad6c5}.portal-panel-body{padding:7px}.portal-panel-body p{margin:5px 0}
.hero-grid{display:grid;grid-template-columns:1fr 1fr}.hero-grid>*{border-right:1px solid #b5b8b6}.hero-grid>*:last-child{border-right:0}.formula-line{margin:8px 0;padding:7px;border:1px solid #b7bcbd;background:#f7f7f5;text-align:center;font-size:18px}.frac{display:inline-grid;grid-template-rows:auto auto;vertical-align:middle;text-align:center;line-height:1.05;min-width:24px}.frac .top{padding:0 3px 2px;border-bottom:1px solid #222}.frac .bottom{padding:2px 3px 0}.op,.eq{display:inline-block;margin:0 7px}
.calc-widget,.converter,.decimal-calc{padding:7px;background:#f7f7f5}.op-tabs,.decimal-op-tabs,.skill-switch{margin-bottom:7px}.op-tabs button,.decimal-op-tabs button,.skill-switch button,.primary,.linkbtn,.compare-answer button{margin:1px;padding:5px 10px;border:1px solid #717777;background:#dedfdb;color:#111;font:bold 11px Verdana,Arial,sans-serif;cursor:pointer}.op-tabs button.active,.decimal-op-tabs button.active,.skill-switch button.active{background:#cbd6dc}.calc-expression{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:center}.frac-input{display:grid;gap:3px}.frac-input i{display:block;border-top:1px solid #555}.frac-input input,.converter input,.decimal-row input,.answer-row input,.single-value{width:100%;padding:6px;border:1px solid #818686;background:#fff;font:13px Verdana,Arial,sans-serif}.calc-op{text-align:center;font-size:18px;font-weight:bold}.calc-result,.converter-result,.feedback{margin-top:8px;padding:7px;border:1px solid #aaa48b;background:#f5f2df;min-height:32px}.calc-result:empty,.converter-result:empty,.feedback:empty{display:none}.calc-answer{font-weight:bold;font-size:15px}.calc-extra,.conv-note{font-size:10px;color:#666}.mixed-input,.percent-input,.decimal-row,.converter-advanced{display:flex;gap:8px;align-items:center}.converter-input{display:grid;gap:3px;min-width:130px}.converter-input i{border-top:1px solid #555}
.steps{padding:7px}.step{display:grid;grid-template-columns:78px 1fr;border-bottom:1px dotted #a4a7a5;padding:5px 0}.step:last-child{border-bottom:0}.step-no{font-size:10px;font-weight:bold;color:#6c6447}.trainer-toolbar{display:flex;align-items:center;gap:8px;padding:6px;border-bottom:1px solid #a4a8a6;background:#f0f1ef}.progress{flex:1;height:8px;border:1px solid #888;background:#fff}.progress i{display:block;height:100%;background:#9caf98;width:0}.task-zone{padding:8px}.task-meta{font-size:10px;color:#666}.task-math{margin:10px 0;font-size:20px}.answer-row{display:flex;gap:6px;align-items:center}.answer-row input{max-width:130px}.task-links{margin-top:7px}.feedback.good{background:#edf4ea}.feedback.bad{background:#f8ecea}.feedback.info{background:#edf1f4}
.home-links,.related-list,.search-results,.link-grid{display:block;border:1px solid #b2b6b5;margin:7px}.home-links a,.related-list a,.search-results a,.link-grid a{display:block;padding:5px 7px;border-bottom:1px solid #d0d2cf}.home-links a:last-child,.related-list a:last-child,.search-results a:last-child,.link-grid a:last-child{border-bottom:0}.link-grid strong,.link-grid span,.search-results strong,.search-results span{display:block}.link-grid span,.search-results span{font-size:10px;color:#666}.fraction-catalog-grid{columns:6;border:1px solid #b2b6b5;padding:5px}.fraction-catalog-grid a{display:block;padding:2px 5px;break-inside:avoid}.fraction-summary{width:100%;border-collapse:collapse;margin:8px 0}.fraction-summary th,.fraction-summary td{padding:7px;border:1px solid #aeb3b2;text-align:left}.fraction-summary th{background:#eef0ef}.fraction-cell{text-align:center!important;font-size:26px}.equiv{padding:8px}.equiv span{margin-right:10px}.faq-list details{border-bottom:1px solid #d0d2cf;padding:6px 8px}.faq-list details:last-child{border-bottom:0}.faq-list summary{font-weight:bold;cursor:pointer}.plain-list{margin:6px 0;padding-left:22px}.worked-steps{margin:5px 0}.worked-answer{background:#f5f2df;padding:5px;border:1px solid #c2bea8}.visual-task{display:flex;gap:12px;align-items:center;padding:8px}.pie-row{display:flex;width:160px;height:35px;border:1px solid #777}.pie-row span,.pie-row i{flex:1;border-right:1px solid #777}.pie-row span{background:#cbd6dc}.pie-row i{border-right:0}.legal{font-size:12px}.empty{padding:10px;border:1px solid #aaa;background:#fafafa}.ad-slot{margin:8px 0;padding:5px;border:1px dashed #aaa}.quick-strip{display:table;width:100%;border-collapse:collapse;margin:8px 0}.quick-strip>div{display:table-cell;width:33.33%;padding:7px;border:1px solid #aaa;background:#f6f6f4}.quick-strip b,.quick-strip span{display:block}.quick-strip span{font-size:10px;color:#666}
@media(max-width:800px){.portal-dashboard,.portal-dashboard tbody,.portal-dashboard tr,.portal-dashboard td{display:block;width:100%}.portal-dashboard td{padding:0 0 7px}.hero-grid{grid-template-columns:1fr}.hero-grid>*{border-right:0;border-bottom:1px solid #b5b8b6}.calc-expression{grid-template-columns:1fr}.calc-op{text-align:left}.mixed-input,.percent-input,.decimal-row,.converter-advanced,.answer-row{display:block}.mixed-input>*,.percent-input>*,.decimal-row>*,.converter-advanced>*,.answer-row>*{margin:4px 0}.answer-row input{max-width:none}.fraction-catalog-grid{columns:3}.fraction-summary,.fraction-summary tbody,.fraction-summary tr,.fraction-summary th,.fraction-summary td{display:block;width:100%}.fraction-summary th{display:none}.fraction-summary td{border-top:0}.fraction-summary td:first-child{border-top:1px solid #aeb3b2}.quick-strip{display:block}.quick-strip>div{display:block;width:100%}}
@media(max-width:430px){.fraction-catalog-grid{columns:2}}