:root {
    --bg-light: #fff;
    --bg-dark: #222;
    --text-light: #111;
    --text-dark: #eee;
    --input-bg-light: #fafafa;
    --input-bg-dark: #333;
}

#mtt-app {
    max-width:700px;
    margin:20px auto;
    padding:20px;
    font-family: "Be Vietnam Pro",Helvetica,Arial,sans-serif;
    border-radius:12px;
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
    background: var(--bg-light);
    color: var(--text-light);
    transition: background 0.3s, color 0.3s;
}
#mtt-app[data-theme="dark"] {
    background: var(--bg-dark);
    color: var(--text-dark);
}
[data-theme="dark"] #mtt-input {
    background: var(--input-bg-dark);
    color: var(--text-light);
}
[data-theme="light"] #mtt-input {
    background: var(--input-bg-light);
    color: var(--text-light);
}
.mtt-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 15px;
}

.mtt-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
#mtt-timer {
    padding:4px 8px;
    font-size:14px;
}
#mtt-theme-toggle {
    background:none;
    border:none;
    font-size:20px;
    cursor:pointer;
}

#mtt-timer-bar {
    height:5px;
    background:#F43676;
    width:100%;
    margin:10px 0;
    border-radius:3px;
    transition: width 0.1s linear;
}

.mtt-timer-display {
    font-size:16px;
    font-weight:bold;
    text-align:center;
    margin-bottom:10px;
}

#mtt-original, #mtt-output {
    white-space:pre-wrap;
    margin:10px 0;
    line-height:1.6;
    font-size:16px;
}
.mtt-wrong { color:red; }

#mtt-input {
    width:100%;
    height:120px;
    font-size:16px;
    padding:8px;
    box-sizing:border-box;
    border-radius:8px;
    border:1px solid #ccc;
    resize:none;
}

.mtt-buttons { margin:10px 0; }
.mtt-buttons button {
	margin-right: 8px;
	padding: 10px 16px;
	font-size: 16px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	background: #F43676;
	color: #fff;
	transition: background 0.2s;
	font-family: "Be Vietnam Pro",Helvetica,Arial,sans-serif;
}
.mtt-buttons button:hover {
    background:#F6558B;
}

.mtt-stats {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:8px;
    margin-top:10px;
    font-size:14px;
}

#mtt-quote {
    margin-top:12px;
    font-style:italic;
    text-align:center;
    color:#888;
}

@media (max-width:500px){
    #mtt-input { height:100px; }
    .mtt-stats { font-size:12px; }
}