:root {
    --mt-primary: #eb4123;
    --mt-primary-dark: #c9341b;
    --mt-secondary: #f59f13;
    --mt-ink: #333;
    --mt-text: #454545;
    --mt-muted: #6b6b6b;
    --mt-line: #e4e4e4;
    --mt-line-strong: #d2d2d2;
    --mt-soft: #f7f7f7;
    --mt-white: #fff;
    --mt-success: #087a50;
    --mt-danger: #b42318;
}

.mt-shell {
    box-sizing: border-box;
    width: min(100%, 1290px);
    min-height: 70vh;
    margin: 0 auto;
    padding: 122px 24px 80px;
    color: var(--mt-text);
    font-family: "Rubik", sans-serif;
}

.mt-shell *, .mt-shell *::before, .mt-shell *::after { box-sizing: border-box; }

.mt-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    padding: clamp(26px, 4vw, 44px);
    border: 1px solid var(--mt-line);
    border-left: 5px solid var(--mt-primary);
    border-radius: 8px;
    background: var(--mt-white);
}

.mt-hero h1, .mt-detail h1 {
    margin: 8px 0 12px;
    color: var(--mt-ink);
    font-size: clamp(34px, 4.2vw, 52px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.mt-hero p {
    max-width: 650px;
    color: var(--mt-muted);
    line-height: 1.6;
}

.mt-author, .mt-meta { margin: 0; color: var(--mt-muted); }
.mt-author + .mt-meta { margin-top: 6px; }

.mt-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mt-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.mt-kicker::before {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--mt-primary);
    content: "";
}

.mt-button {
    appearance: none;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 17px;
    border: 1px solid var(--mt-line-strong);
    border-radius: 5px;
    background: var(--mt-white);
    color: var(--mt-ink);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .18s, background-color .18s, color .18s;
}

.mt-button:hover { border-color: #adadad; background: #f5f5f5; color: var(--mt-ink); }
.mt-button:focus-visible, .mt-shell input:focus-visible, .mt-shell textarea:focus-visible, .mt-shell select:focus-visible, .mt-link-danger:focus-visible, .mt-back:focus-visible, .mt-card a:focus-visible { outline: 3px solid rgba(235, 65, 35, .25); outline-offset: 2px; }
.mt-button:disabled { cursor: wait; opacity: .62; }
.mt-button--dark { border-color: var(--mt-primary); background: var(--mt-primary); color: var(--mt-white); }
.mt-button--dark:hover { border-color: var(--mt-primary-dark); background: var(--mt-primary-dark); color: var(--mt-white); }
.mt-button--ghost { cursor: not-allowed; background: #f2f2f2; color: var(--mt-muted); }
.mt-button--wide { width: 100%; }
.mt-hero .mt-button { flex: 0 0 auto; }
.mt-hero__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.mt-filters {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 180px auto;
    align-items: end;
    gap: 13px;
    margin-bottom: 28px;
    padding: 17px;
    border: 1px solid var(--mt-line);
    border-radius: 8px;
    background: var(--mt-white);
}

.mt-filters label, .mt-form label {
    display: grid;
    gap: 7px;
    margin: 0;
    color: var(--mt-text);
    font-size: 13px;
    font-weight: 500;
}

.mt-form label small { color: var(--mt-muted); font-size: 11px; font-weight: 400; line-height: 1.45; }

.mt-filters input, .mt-filters select, .mt-form input, .mt-form select, .mt-form textarea,
.mt-manage-item__form input, .mt-manage-item__form select, .mt-manage-item__form textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--mt-line-strong);
    border-radius: 5px;
    background: var(--mt-white);
    color: var(--mt-text);
    font: inherit;
    font-size: 14px;
}

.mt-shell input[readonly] { background: #f3f3f3; color: var(--mt-muted); }
.mt-shell textarea { line-height: 1.5; resize: vertical; }
.mt-shell select:disabled { color: #929292; }

.mt-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.mt-card {
    overflow: hidden;
    border: 1px solid var(--mt-line);
    border-radius: 8px;
    background: var(--mt-white);
    transition: border-color .18s;
}

.mt-card:hover { border-color: #e59c8e; }
.mt-card__preview { position: relative; display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border-bottom: 1px solid var(--mt-line); background: #f3f3f3; }
.mt-card__preview img { width: 100%; height: 100%; object-fit: cover; }
.mt-card__preview.is-preview-missing::after, .mt-detail__preview.is-preview-missing::after, .mt-manage-item.is-preview-missing::before { color: var(--mt-muted); content: "Preview unavailable"; font-size: 12px; }

.mt-card__body { display: flex; justify-content: space-between; gap: 14px; padding: 16px; }
.mt-card h2 { margin: 0 0 5px; font-size: 16px; line-height: 1.3; }
.mt-card h2 a { color: var(--mt-ink); text-decoration: none; }
.mt-card h2 a:hover { color: var(--mt-primary); }
.mt-card p { margin: 0; color: var(--mt-muted); font-size: 12px; }
.mt-card strong { align-self: flex-start; padding: 5px 8px; border: 1px solid #f0c1b8; border-radius: 4px; background: #fff5f2; color: var(--mt-primary-dark); font-size: 12px; white-space: nowrap; }

.mt-empty {
    grid-column: 1 / -1;
    padding: 48px 24px;
    border: 1px dashed #cfcfcf;
    border-radius: 8px;
    background: var(--mt-white);
    color: var(--mt-muted);
    text-align: center;
}

.mt-pagination { margin-top: 30px; }
.mt-pagination nav > div:first-child { margin-bottom: 10px; }
.mt-pagination a, .mt-pagination span { font-size: 13px; }

.mt-back { display: inline-flex; margin: 6px 0 20px; color: var(--mt-muted); text-decoration: none; }
.mt-back:hover { color: var(--mt-primary); }

.mt-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: clamp(30px, 5vw, 58px);
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid var(--mt-line);
    border-radius: 8px;
    background: var(--mt-white);
}

.mt-detail__preview { position: relative; display: grid; min-height: 430px; place-items: center; overflow: hidden; border: 1px solid var(--mt-line); border-radius: 6px; background: #f3f3f3; }
.mt-detail__preview img { width: 100%; height: 100%; object-fit: contain; }
.mt-detail__content { align-self: center; }
.mt-description { margin: 25px 0; color: var(--mt-text); font-size: 16px; line-height: 1.7; white-space: pre-line; }

.mt-buybox { display: grid; gap: 12px; padding: 20px; border: 1px solid #e8d2cd; border-left: 4px solid var(--mt-primary); border-radius: 6px; background: #fffaf8; }
.mt-buybox form { margin: 0; }
.mt-price { color: var(--mt-ink); font-size: 24px; }
.mt-buybox__note { margin: 0; color: var(--mt-muted); font-size: 12px; line-height: 1.5; }
.mt-action-message { min-height: 19px; margin: 0; color: var(--mt-muted); font-size: 13px; line-height: 1.45; }

.mt-panel { margin-bottom: 24px; padding: clamp(19px, 3vw, 28px); border: 1px solid var(--mt-line); border-radius: 8px; background: var(--mt-white); }
.mt-panel h2 { margin: 0 0 20px; color: var(--mt-ink); font-size: 23px; }
.mt-form { display: grid; gap: 18px; }
.mt-form__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.mt-upload-preview { display: grid; min-height: 104px; place-items: center; overflow: hidden; padding: 10px; border: 1px dashed #c9c9c9; border-radius: 5px; background: var(--mt-soft); color: var(--mt-muted); font-size: 12px; text-align: center; }
.mt-upload-preview.is-error { border-color: #e6988d; background: #fff4f2; color: var(--mt-danger); }
.mt-upload-preview img { width: 100%; height: 126px; object-fit: cover; border-radius: 3px; }

.mt-alert { margin-bottom: 18px; padding: 14px 18px; border-radius: 5px; font-size: 14px; }
.mt-alert--success { border: 1px solid #a7e1c8; background: #ecfdf3; color: var(--mt-success); }
.mt-alert--error { border: 1px solid #fecaca; background: #fff3f1; color: var(--mt-danger); }

.mt-manage-list { display: grid; gap: 14px; }
.mt-manage-item { display: grid; grid-template-columns: 102px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 13px; border: 1px solid var(--mt-line); border-radius: 6px; background: var(--mt-white); }
.mt-manage-item > img { width: 102px; height: 82px; object-fit: cover; border: 1px solid var(--mt-line); border-radius: 4px; background: var(--mt-soft); }
.mt-manage-item__form { display: grid; grid-template-columns: minmax(170px, 2fr) 100px 76px minmax(160px, 1.2fr) auto; gap: 8px; }
.mt-manage-description { grid-column: 1 / -2; min-height: 58px !important; }
.mt-manage-item__form > .mt-button { grid-column: -2 / -1; grid-row: 1 / 3; align-self: stretch; }
.mt-manage-item__meta { display: grid; justify-items: end; gap: 6px; color: var(--mt-muted); font-size: 12px; }
.mt-manage-item__meta form { margin: 0; }
.mt-manage-item__meta a { color: var(--mt-primary-dark); }
.mt-status { padding: 3px 6px; border-radius: 3px; background: #f2f2f2; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mt-status--published { background: #edf8f3; color: var(--mt-success); }
.mt-status--pending { background: #fff5e5; color: #8a4d00; }
.mt-status--rejected { background: #fff1ef; color: var(--mt-danger); }
.mt-link-danger { border: 0; background: transparent; color: var(--mt-danger); cursor: pointer; font: inherit; padding: 0; }

@media (max-width: 1050px) {
    .mt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mt-manage-item { grid-template-columns: 82px 1fr; }
    .mt-manage-item > img { width: 82px; height: 82px; }
    .mt-manage-item__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; }
}

@media (max-width: 820px) {
    .mt-shell { padding-top: 98px; }
    .mt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mt-detail { grid-template-columns: 1fr; }
    .mt-detail__preview { min-height: 330px; }
    .mt-form__row { grid-template-columns: 1fr 1fr; }
    .mt-manage-item__form { grid-template-columns: 1fr 100px 76px; }
    .mt-manage-item__form select { grid-column: 1 / 3; }
    .mt-manage-description { grid-column: 1 / -1; }
    .mt-manage-item__form > .mt-button { grid-column: 3; grid-row: 2 / 4; }
}

@media (max-width: 640px) {
    .mt-shell { padding: 78px 14px 50px; }
    .mt-hero { align-items: stretch; flex-direction: column; padding: 24px 20px; border-left-width: 4px; }
    .mt-hero h1, .mt-detail h1 { font-size: clamp(31px, 10vw, 42px); }
    .mt-hero .mt-button { width: 100%; }
    .mt-hero__actions { width: 100%; }
    .mt-filters, .mt-form__row { grid-template-columns: 1fr; }
    .mt-grid { grid-template-columns: 1fr; }
    .mt-detail { padding: 14px; }
    .mt-detail__preview { min-height: 260px; }
    .mt-detail__content { padding: 7px; }
    .mt-panel { padding: 17px; }
    .mt-manage-item { grid-template-columns: 1fr; }
    .mt-manage-item > img { width: 100%; height: 190px; }
    .mt-manage-item__form { grid-template-columns: 1fr; }
    .mt-manage-item__form select, .mt-manage-description, .mt-manage-item__form > .mt-button { grid-column: auto; grid-row: auto; }
    .mt-manage-item__meta { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .mt-card, .mt-button { transition: none; }
}