/* Shared visual layer for the four multiple-sequence-alignment submission tools. */
:root {
    --ink: #243d55;
    --text: #5a7084;
    --muted: #7990a2;
    --line: #e3edf5;
    --line-deep: #d6e5f1;
    --primary: #4486bc;
    --primary-deep: #276d9e;
    --bg-head: #f7fbff;
    --shadow: 0 6px 18px rgba(40, 84, 121, .055);
    --shadow-soft: 0 3px 12px rgba(40, 84, 121, .035);
}

body, #main {
    background: #fff;
    color: var(--ink);
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

#main a:focus-visible,
#main button:focus-visible,
#main input:focus-visible,
#main select:focus-visible,
#main textarea:focus-visible {
    outline: 2px solid #6da9dc;
    outline-offset: 2px;
}

@media only screen and (min-width: 1200px) {
    body .ui.ui.ui.container:not(.fluid) { max-width: 1360px !important; }
}

.page-shell { max-width: 1360px; margin: 22px auto 0; padding-bottom: 36px; }
.top-nav-wrap { margin-top: 12px; padding: 7px 10px; border-radius: 10px; box-shadow: var(--shadow-soft); }
.tool-menu.ui.menu .item { margin: 2px !important; padding: .72em .95em; border-radius: 7px; color: #40566e; font-size: 14px; font-weight: 700; font-synthesis: none; }
.tool-menu.ui.menu .item:hover { background: #f3f8fc; color: var(--primary-deep); }
.tool-menu.ui.menu .item.active-link { background: #eef6fb; color: var(--primary-deep) !important; }

.main-card.ui.segment { margin-top: 14px !important; padding: 8px !important; border-radius: 12px; background: #f7fbff; box-shadow: var(--shadow); }
.inner-card.ui.segment { padding: 16px 20px !important; border-radius: 10px; background: #fff; }
.page-header h2 { font-size: 1.56rem; }
.page-header p { line-height: 1.7; }

.ui.accordion { border-radius: 9px; }
.ui.accordion .title { gap: 9px; padding: 12px 14px !important; background: var(--bg-head); border-radius: 9px 9px 0 0; }
.ui.accordion .title:not(.active) { border-radius: 9px; }
.ui.accordion .title h3 { font-size: 1rem; }
.ui.accordion .content { border-radius: 0 0 9px 9px; }
.accordion-body { padding: 16px; }

.ui.form .field > label,
.ui.form .field > label[data-tooltip] { color: #243d55; font-size: 14px; }
.ui.form input[type="text"],
.ui.form textarea,
.ui.form select,
.ui.selection.dropdown { color: #405a73 !important; border-radius: 7px !important; }
.ui.form input[type="text"]:focus,
.ui.form textarea:focus,
.ui.form select:focus { border-color: #b9d3e7 !important; box-shadow: 0 0 0 3px rgba(68, 134, 188, .08) !important; }

#main .ui.button,
#main .file-trigger.ui.button,
#main .ui.mini.button { border-radius: 7px !important; box-shadow: none !important; }
#main .ui.primary.button { background: var(--primary-deep) !important; }
#main .ui.secondary.button { background: #eef5fb !important; color: var(--primary-deep) !important; }
.message-box,
.file-status { border-radius: 9px !important; }