/* Khai báo biến nội bộ */
.trans-neo-wrapper {
    --bg-white: #ffffff;
    --border-ink: 3px solid #111111;
    --shadow-solid: 5px 5px 0px #111111;
    --shadow-push: 2px 2px 0px #111111;
    
    /* Bảng màu Sinh học */
    --clr-dna-bg: #e0fbfc;      /* Xanh nhạt ADN */
    --clr-dna-active: #90e0ef; 
    --clr-mrna-bg: #fcf6bd;     /* Vàng nhạt ARN */
    --clr-protein: #ffb5a7;     /* Hồng cam Protein */
    --clr-start: #a7f3d0;       /* Xanh lá Start */
    --clr-stop: #ff99c8;        /* Đỏ hồng Stop */

    max-width: 850px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, sans-serif;
    color: #111111;
    background: #fdfbf7;
    padding: 20px;
    border: var(--border-ink);
    border-radius: 16px;
    box-shadow: 8px 8px 0px #111;
}

.trans-neo-wrapper * { box-sizing: border-box; }

/* Header */
.trans-neo-header { background: var(--clr-dna-active); border: var(--border-ink); box-shadow: var(--shadow-solid); padding: 20px; border-radius: 12px; text-align: center; margin-bottom: 25px; }
.trans-neo-header h2 { margin: 0 0 10px 0; font-size: 1.8rem; font-weight: 900; }
.trans-neo-header p { margin: 0; font-weight: 600; font-size: 0.95rem; }

/* Form Styles */
.trans-neo-form { display: flex; flex-direction: column; gap: 20px; }
.trans-group { display: flex; flex-direction: column; gap: 10px; }
.trans-group label { font-weight: 800; font-size: 1.05rem; }

/* Radio Grid */
.trans-radio-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.trans-radio-grid .radio-neo { cursor: pointer; }
.trans-neo-wrapper input[type="radio"] { display: none; }
.trans-neo-wrapper .neo-content { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 12px; font-weight: 800; border: var(--border-ink); border-radius: 12px; background: var(--bg-white); box-shadow: 4px 4px 0px #111; transition: all 0.15s; font-size: 0.9rem;}
.radio-template input:checked + .neo-content, .radio-coding input:checked + .neo-content { background: var(--clr-dna-active); box-shadow: var(--shadow-push); transform: translate(2px, 2px); }
.radio-rna input:checked + .neo-content { background: var(--clr-mrna-bg); box-shadow: var(--shadow-push); transform: translate(2px, 2px); }

/* Textarea */
.trans-neo-wrapper textarea { width: 100%; padding: 15px; font-size: 1.3rem; font-weight: 800; font-family: 'Courier New', Courier, monospace; letter-spacing: 3px; border: var(--border-ink); border-radius: 12px; background: var(--bg-white); box-shadow: 4px 4px 0px #111; outline: none; text-transform: uppercase; line-height: 1.5; resize: vertical; word-break: break-all;}
.trans-neo-wrapper textarea:focus { background: var(--clr-dna-bg); box-shadow: var(--shadow-solid); }

/* Quick Actions */
.trans-quick-actions { display: flex; gap: 10px; margin-top: 5px; }
.quick-btn { background: #fff; border: 2px solid #111; padding: 6px 15px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; cursor: pointer; box-shadow: 2px 2px 0px #111; transition: all 0.1s; }
.quick-btn:hover { background: #e9ecef; }
.quick-btn:active { box-shadow: 0px 0px 0px #111; transform: translate(2px, 2px); }
.btn-clear { background: #ffccd5; }

/* Nút Submit */
.trans-neo-btn { padding: 18px; font-size: 1.2rem; font-weight: 900; background: #111; color: #fff; border: var(--border-ink); border-radius: 12px; box-shadow: 5px 5px 0px var(--clr-protein); cursor: pointer; text-transform: uppercase; transition: all 0.1s; }
.trans-neo-btn:hover { background: #333; }
.trans-neo-btn:active { box-shadow: 2px 2px 0px var(--clr-protein); transform: translate(3px, 3px); }

/* Result Box */
.trans-neo-result { margin-top: 30px; padding-top: 30px; border-top: 4px dashed #111; display: flex; flex-direction: column; gap: 20px;}
.trans-neo-result.active { display: flex !important; animation: transPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

.trans-card { background: #fff; border: var(--border-ink); box-shadow: var(--shadow-solid); border-radius: 12px; padding: 20px; }
.card-mrna { background: var(--clr-mrna-bg); }
.card-protein { background: #fff; }

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 2px solid #111; padding-bottom: 10px;}
.card-header h3 { margin: 0; font-size: 1.2rem; }
.card-header .badge { background: #111; color: #fff; padding: 5px 12px; border-radius: 20px; font-weight: 800; font-size: 0.85rem; }
.badge-protein { background: var(--clr-protein) !important; color: #111 !important; border: 2px solid #111; }

/* Trình tự mARN */
.sequence-box { font-family: 'Courier New', Courier, monospace; font-size: 1.3rem; font-weight: 800; line-height: 1.8; word-break: break-all; letter-spacing: 2px;}
.codon { display: inline-block; padding: 2px 4px; margin-right: 5px; border-bottom: 3px solid #111; background: rgba(255,255,255,0.6); border-radius: 4px;}

/* Chuỗi Protein Mắt Xích */
.protein-chain { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 15px;}
.aa-node { background: var(--clr-protein); border: 2px solid #111; padding: 8px 12px; border-radius: 8px; font-weight: 800; font-size: 1.1rem; box-shadow: 2px 2px 0px #111; position: relative;}
/* Tạo vạch nối giữa các cục AA */
.aa-node:not(:last-child)::after { content: ''; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 10px; height: 3px; background: #111; }

/* Đặc biệt cho Start và Stop */
.aa-start { background: var(--clr-start); }
.aa-stop { background: var(--clr-stop); color: #fff; }

.trans-note { background: #f8f9fa; border: 2px dashed #111; border-radius: 8px; padding: 10px; font-size: 0.9rem; }

@keyframes transPop { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

@media (max-width: 650px) {
    .trans-radio-grid { grid-template-columns: 1fr; }
    .card-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}