@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Outfit:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ═══════════════════════════════════════
   CLUSTAL-OMEGA WEB APP — Glass Theme
   Matches D.A.T.G Portfolio Design
   ═══════════════════════════════════════ */

:root {
    --bg: #f4f1ec;
    --text-dark: #0f1a2e;
    --text-mid: #2e3a50;
    --text-soft: #5a6478;
    --text-muted: #8a94a4;
    --accent: #4a8ec2;
    --accent-deep: #1e3a5f;
    --accent-light: #a0c8e8;
    --teal: #6aacb8;
    --err-txt: #b84040;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg);
    color: var(--text-dark);
    line-height: 1.7;
}

/* ── Background blobs ── */
.bg-blobs { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.4; animation:bf 22s ease-in-out infinite; }
.b1 { width:450px; height:450px; background:linear-gradient(135deg,#b0d0e8,#c8e0e8); top:-10%; right:-5%; }
.b2 { width:350px; height:350px; background:linear-gradient(135deg,#c8dce8,#d8e4f0); bottom:5%; left:-8%; animation-delay:-11s; }
@keyframes bf { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-25px,35px) scale(1.04)} }

/* ── Glass ── */
.glass {
    background: linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.25) 40%, rgba(200,220,240,.12) 60%, rgba(255,255,255,.35));
    backdrop-filter: blur(30px) saturate(1.4);
    -webkit-backdrop-filter: blur(30px) saturate(1.4);
    border: 1.5px solid rgba(255,255,255,.65);
    box-shadow: 0 8px 32px rgba(30,60,100,.07), inset 0 2px 0 rgba(255,255,255,.9);
    border-radius: 28px;
}

/* ── Navigation ── */
nav {
    position:fixed; top:1rem; left:50%; transform:translateX(-50%); z-index:100;
    padding:.55rem 1.4rem;
    background:linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,.3) 40%, rgba(220,235,250,.2) 60%, rgba(255,255,255,.45));
    backdrop-filter:blur(24px) saturate(1.3);
    -webkit-backdrop-filter:blur(24px) saturate(1.3);
    border:1.5px solid rgba(255,255,255,.7); border-radius:50px;
    box-shadow:0 4px 20px rgba(30,60,100,.06), inset 0 1.5px 0 rgba(255,255,255,.9);
}
.nav-in { display:flex; align-items:center; gap:1.5rem; }
.nav-logo {
    font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:700;
    color:var(--text-dark); text-decoration:none;
}
.nav-logo em { color:var(--accent); font-style:italic; }
.nav-back {
    color:var(--text-soft); text-decoration:none; font-size:.78rem; font-weight:500;
    display:flex; align-items:center; gap:.35rem; transition:color .3s;
}
.nav-back:hover { color:var(--text-dark); }

/* ── Page layout ── */
.page { max-width:1000px; margin:0 auto; padding:5.5rem 2rem 3rem; position:relative; z-index:1; }

/* ── Header ── */
.hdr { margin-bottom:2.5rem; }
.hdr-label {
    font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--accent);
    letter-spacing:.15em; text-transform:uppercase; margin-bottom:.4rem;
}
.hdr-title {
    font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3rem);
    font-weight:700; margin-bottom:.4rem;
}
.hdr-title em { color:var(--accent); font-style:italic; font-weight:400; }
.hdr-sub { font-size:1rem; font-weight:300; color:var(--text-soft); max-width:600px; }

/* ── Step labels ── */
.step-label {
    font-family:'JetBrains Mono',monospace; font-size:.65rem;
    letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem;
}
.step-title { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; margin-bottom:.3rem; }
.step-line { width:60px; height:2px; background:linear-gradient(90deg, var(--accent), transparent); margin-bottom:1.5rem; border-radius:2px; }

/* ── Cards ── */
.card { padding:2.5rem 3rem; margin-bottom:2rem; }
@media(max-width:700px) { .card { padding:1.5rem; } }

/* ── Textarea ── */
textarea {
    width:100%; min-height:260px;
    background:linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.2) 50%, rgba(200,220,240,.08));
    backdrop-filter:blur(12px);
    border:1.5px solid rgba(255,255,255,.6); border-radius:16px;
    color:var(--text-dark); font-family:'JetBrains Mono',monospace; font-size:.85rem;
    padding:1.2rem 1.4rem; line-height:1.6; resize:vertical; outline:none;
    transition:border-color .3s, box-shadow .3s;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
textarea:focus { border-color:rgba(74,142,194,.4); box-shadow:0 0 24px rgba(74,142,194,.08); }
textarea::placeholder { color:var(--text-muted); font-family:'Outfit',sans-serif; font-style:italic; font-size:.85rem; }

/* ── Input hints ── */
.input-hint {
    display:flex; align-items:center; gap:.35rem;
    font-size:.78rem; color:var(--accent); font-weight:500; margin-top:.6rem; margin-bottom:1.2rem;
}
.input-examples {
    font-size:.82rem; color:var(--text-soft); line-height:1.9; margin-bottom:1.5rem;
}
.input-examples code {
    background:rgba(74,142,194,.06); border:1px solid rgba(74,142,194,.12);
    padding:.1rem .4rem; border-radius:6px;
    font-family:'JetBrains Mono',monospace; font-size:.75rem; color:var(--accent-deep);
}
.live-count {
    margin-top: .55rem;
    font-size: .78rem;
    color: var(--text-soft);
    font-weight: 500;
}

/* ── Separator ── */
.sep { display:flex; align-items:center; gap:1rem; margin:1.5rem 0; color:var(--text-muted); font-size:.75rem; font-weight:300; }
.sep::before, .sep::after { content:''; flex:1; height:1px; background:rgba(0,0,0,.06); }

/* ── Labels & Inputs ── */
label { display:block; font-size:.85rem; font-weight:600; color:var(--text-mid); margin-bottom:.5rem; }
.lbl-hint { font-weight:300; color:var(--text-muted); font-size:.75rem; }

input[type="file"] {
    width:100%; font-family:'Outfit',sans-serif; font-size:.85rem;
    background:linear-gradient(145deg, rgba(255,255,255,.45), rgba(255,255,255,.15));
    backdrop-filter:blur(10px);
    border:1.5px solid rgba(255,255,255,.6); border-radius:14px;
    padding:.9rem 1.1rem; cursor:pointer; color:var(--text-soft);
}
input[type="file"]::file-selector-button {
    background:linear-gradient(155deg, rgba(255,255,255,.65), rgba(200,225,250,.3));
    border:1.5px solid rgba(255,255,255,.7); color:var(--accent-deep); border-radius:10px;
    padding:.4rem 1rem; font-family:'Outfit',sans-serif; font-size:.8rem; font-weight:600;
    cursor:pointer; margin-right:.8rem;
}
.file-note { font-size:.72rem; color:var(--text-muted); margin-top:.5rem; font-weight:300; }

/* ── Options grid ── */
.opts-row { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1rem; }
@media(max-width:600px) { .opts-row { grid-template-columns:1fr; } }

select, input[type="text"] {
    width:100%;
    background:linear-gradient(145deg, rgba(255,255,255,.5), rgba(255,255,255,.2) 50%, rgba(200,220,240,.08));
    backdrop-filter:blur(12px);
    border:1.5px solid rgba(255,255,255,.6); border-radius:14px;
    color:var(--text-dark); font-family:'Outfit',sans-serif; font-size:.88rem;
    padding:.9rem 1.1rem; outline:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8); transition:border-color .3s;
}
select {
    cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6478' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.8rem;
}
select:focus, input[type="text"]:focus { border-color:rgba(74,142,194,.4); }
input[type="text"]::placeholder { color:var(--text-muted); font-style:italic; }
.field-note { font-size:.72rem; color:var(--text-muted); margin-top:.3rem; }
.fmt-hints {
    font-size:.72rem; color:var(--text-muted); margin-top:.4rem;
    font-family:'JetBrains Mono',monospace; line-height:1.8;
}
.fmt-hints span { display:inline-block; margin-right:1rem; }
.fmt-hints strong { color:var(--text-soft); font-weight:500; }

/* ── Submit ── */
.submit-area { margin-top:1.5rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.btn-run {
    display:inline-flex; align-items:center; gap:.6rem;
    padding:1rem 2.5rem; border-radius:50px;
    font-family:'Outfit',sans-serif; font-size:.95rem; font-weight:700;
    cursor:pointer; border:none; position:relative; overflow:hidden;
    background:linear-gradient(160deg, rgba(15,30,55,.93), rgba(55,100,150,.85) 70%, rgba(30,58,95,.93));
    color:white;
    box-shadow:0 6px 28px rgba(15,30,55,.3), inset 0 2px 0 rgba(120,180,240,.2);
    transition:all .4s cubic-bezier(.16,1,.3,1);
}
.btn-run::before {
    content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(150,200,255,.5), transparent);
}
.btn-run:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 14px 48px rgba(15,30,55,.35); }
.btn-run:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.run-note { font-size:.78rem; color:var(--text-muted); font-weight:300; }

/* ── Back button ── */
.btn-back {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.75rem 1.8rem; border-radius:50px;
    font-family:'Outfit',sans-serif; font-size:.85rem; font-weight:600;
    text-decoration:none;
    background:linear-gradient(155deg, rgba(255,255,255,.6), rgba(200,225,250,.2));
    backdrop-filter:blur(16px); border:1.5px solid rgba(255,255,255,.7);
    color:var(--accent-deep);
    box-shadow:0 4px 16px rgba(30,60,100,.06), inset 0 1px 0 rgba(255,255,255,.8);
    transition:all .3s;
}
.btn-back:hover { transform:translateY(-2px); background:rgba(255,255,255,.7); }

/* ── Messages ── */
.msg-error {
    background:rgba(200,70,70,.07); border:1.5px solid rgba(200,70,70,.18);
    color:#b84040; border-radius:18px;
    padding:1.2rem 1.8rem; margin-bottom:2rem;
    font-size:.88rem; line-height:1.7;
}
.msg-error strong { font-weight:700; }
.msg-error pre { margin-top:.5rem; font-size:.75rem; }
.msg-info {
    background:rgba(74,142,194,.05); border:1.5px solid rgba(74,142,194,.12);
    color:var(--accent); border-radius:14px;
    padding:.7rem 1.2rem;
    font-size:.78rem; font-family:'JetBrains Mono',monospace;
}
.msg-info strong { font-weight:600; }

/* ── Results ── */
.results-card {
    background:linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.25) 40%, rgba(70,160,100,.03), rgba(255,255,255,.35));
    backdrop-filter:blur(30px) saturate(1.4);
    -webkit-backdrop-filter:blur(30px) saturate(1.4);
    border:1.5px solid rgba(70,160,100,.2);
    box-shadow:0 8px 32px rgba(30,60,100,.07), inset 0 2px 0 rgba(255,255,255,.9);
    border-radius:28px;
    padding:2.5rem 3rem;
    margin-bottom:2rem;
}
.res-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; flex-wrap:wrap; gap:.8rem; }
.res-title { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; }

.btn-dl {
    display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.5rem;
    background:linear-gradient(155deg, rgba(255,255,255,.6), rgba(200,225,250,.2));
    border:1.5px solid rgba(70,160,100,.22); color:#308050; border-radius:50px;
    font-family:'Outfit',sans-serif; font-size:.82rem; font-weight:600;
    text-decoration:none; transition:all .3s;
}
.btn-dl:hover { transform:translateY(-2px); background:rgba(255,255,255,.7); }

.res-output {
    background:linear-gradient(145deg, rgba(255,255,255,.3), rgba(200,220,240,.06));
    border:1.5px solid rgba(255,255,255,.5); border-radius:16px; padding:1.5rem;
    font-family:'JetBrains Mono',monospace; font-size:.78rem; line-height:1.6;
    color:var(--text-mid); overflow-x:auto; white-space:pre; max-height:550px; overflow-y:auto;
}

.colored-output {
    white-space: pre;
    font-family: 'JetBrains Mono', monospace;
    font-size: .78rem;
    line-height: 1.7;
}

/* Sequence name */
.sn { color: var(--accent-deep); font-weight: 600; }

/* Residue colors — inline, no fixed width needed (monospace pre handles alignment) */
.aa-gap         { color: #94a3b8; }
.aa-hydrophobic { background: rgba(245, 158, 11, 0.18); color: #92400e; border-radius: 2px; }
.aa-positive    { background: rgba(59, 130, 246, 0.18); color: #1d4ed8; border-radius: 2px; }
.aa-negative    { background: rgba(239, 68, 68, 0.18); color: #b91c1c; border-radius: 2px; }
.aa-polar       { background: rgba(16, 185, 129, 0.18); color: #047857; border-radius: 2px; }
.aa-gly         { background: rgba(168, 85, 247, 0.18); color: #7e22ce; border-radius: 2px; }
.aa-pro         { background: rgba(236, 72, 153, 0.18); color: #be185d; border-radius: 2px; }
.aa-other       { background: rgba(148, 163, 184, 0.10); color: #334155; border-radius: 2px; }

/* Consensus symbols */
.cons-id  { color: #16a34a; font-weight: 700; }
.cons-str { color: #2563eb; }
.cons-wk  { color: #8b5cf6; }

.viewer-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-mini {
    padding: .55rem 1rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.7);
    background: linear-gradient(155deg, rgba(255,255,255,.6), rgba(200,225,250,.2));
    color: var(--accent-deep);
    font-family: 'Outfit', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-mini:hover {
    background: rgba(255,255,255,.72);
}

/* Toggle plain mode */
.plain-output span[class^="aa-"] {
    background: transparent !important;
    color: var(--text-mid) !important;
}
.plain-output .sn { color: var(--text-mid) !important; }
.plain-output .cons-id,
.plain-output .cons-str,
.plain-output .cons-wk {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
}

.expanded-output {
    max-height: none !important;
}



/* ── Footer ── */
footer { padding:2.5rem 2rem; text-align:center; position:relative; z-index:1; margin-top:1rem; }
footer p { font-size:.75rem; color:var(--text-muted); }
footer a { color:var(--accent); text-decoration:none; }

/* ── Spinner ── */
.spinner {
    width:18px; height:18px;
    border:2.5px solid rgba(255,255,255,.3); border-top-color:white;
    border-radius:50%; animation:sp .7s linear infinite; display:inline-block;
}
@keyframes sp { to { transform:rotate(360deg); } }

/* ── Loading overlay ── */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-active .loading-overlay {
    display: flex;
}

.loading-box {
    width: min(460px, 92vw);
    padding: 2rem;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.35));
    border: 1.5px solid rgba(255,255,255,.7);
    box-shadow: 0 20px 50px rgba(15,30,55,.16);
    text-align: center;
}

.loading-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

.loading-sub {
    color: var(--text-soft);
    margin-bottom: 1rem;
}

.loading-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    overflow: hidden;
}

.loading-bar-fill {
    height: 100%;
    width: 35%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-light), var(--accent), var(--accent-deep));
    animation: loadingMove 1.2s ease-in-out infinite;
}

@keyframes loadingMove {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}