:root {
    --primary: #0099CC;
    --bg: #F0F2F5;
    --text-main: #0F0F0F;
    --text-sub: #606060;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg);
    margin: 0;
    color: var(--text-main);
}

.tc-app {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.tc-shell {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    overflow: hidden;
}

.tc-shell-body {
    padding: 16px 24px 24px;
}

.tc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.tc-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.tc-card {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: none;
    border: 1px solid #e2e7ee;
}

.tc-label-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
}

textarea {
    width: 100%;
    height: 80px;
    border: 1px solid #DDD;
    border-radius: 12px;
    padding: 12px;
    font-size: 16px;
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
}

/* YOUTUBE MOCKUP - CALIBRATED */
.iphone-container {
    background: #EEE;
    padding: 40px 0;
    display: flex;
    justify-content: center;
    border-radius: 12px;
}

.yt-mobile-mock {
    background: white;
    overflow: hidden;
    transition: width 0.1s ease-out;
}

.yt-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: #222;
    position: relative;
}

.yt-time {
    position: absolute; bottom: 8px; right: 8px;
    background: rgba(0,0,0,0.8); color: white;
    font-size: 12px; padding: 2px 4px; border-radius: 4px;
}

.yt-meta { display: flex; gap: 12px; padding: 12px; }
.yt-avatar { width: 36px; height: 36px; border-radius: 50%; background: #CCC; flex-shrink: 0; }
.yt-text { flex-grow: 1; min-width: 0; }

.yt-title-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--text-main);
    letter-spacing: 0.1px;
    /* TRUNCATION LOGIC */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yt-sub { font-size: 12px; color: var(--text-sub); margin: 4px 0 0; }
.yt-more { color: var(--text-sub); }

.tc-sidebar { margin-top: 20px; background: #EEF6FF; }
.tc-formula-box { background: white; padding: 12px; border-radius: 8px; border: 1px dashed var(--primary); color: var(--primary); font-weight: bold; text-align: center; }
.tc-tips { font-size: 13px; color: var(--text-sub); margin-top: 15px; padding-left: 20px; }

@media (max-width: 800px) {
    .tc-main-grid { grid-template-columns: 1fr; }
    .tc-shell-body { padding: 16px; }
}