@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");
:root {
--tv-green:       #2d6a4f;
--tv-green-light: #52b788;
--tv-green-pale:  #d8f3dc;
--tv-accent:      #f4a261;
--tv-bg:          #f0f7f2;
--tv-card:        #ffffff;
--tv-text:        #1a2e24;
--tv-muted:       #6b8a79;
--tv-border:      #c8e6d5;
--tv-error-bg:    #fff0f0;
--tv-error:       #c0392b;
--tv-success-bg:  #e8f7ee;
--tv-success:     #1a7a46;
--tv-radius:      16px;
--tv-shadow:      0 4px 24px rgba(45,106,79,.10), 0 1px 4px rgba(45,106,79,.06);
--tv-font:        'Nunito', system-ui, sans-serif;
--tv-trans:       .22s cubic-bezier(.4,0,.2,1);
} .tv-wrap {
font-family: var(--tv-font);
color: var(--tv-text);
max-width: 560px;
margin: 32px auto;
padding: 0 16px;
} .tv-card {
background: var(--tv-card);
border-radius: var(--tv-radius);
box-shadow: var(--tv-shadow);
padding: 40px 36px 36px;
border: 1.5px solid var(--tv-border);
animation: tvFadeIn .4s ease both;
}
@media (max-width: 540px) { .tv-card { padding: 28px 20px 24px; } }
.tv-card__icon {
font-size: 42px;
text-align: center;
margin-bottom: 12px;
}
.tv-card__title {
font-size: 1.55rem;
font-weight: 800;
text-align: center;
color: var(--tv-green);
margin-bottom: 6px;
}
.tv-card__subtitle {
text-align: center;
color: var(--tv-muted);
font-size: .95rem;
margin-bottom: 28px;
} .tv-alert {
border-radius: 10px;
padding: 13px 16px;
font-size: .92rem;
margin-bottom: 20px;
font-weight: 600;
line-height: 1.5;
}
.tv-alert--error   { background: var(--tv-error-bg);   color: var(--tv-error);   border: 1px solid #f5c6c6; }
.tv-alert--success { background: var(--tv-success-bg); color: var(--tv-success); border: 1px solid #9de0b5; }
.tv-alert--info    { background: #fff8ed; color: #a0522d; border: 1px solid #f9d8a8; text-align:center; padding:20px; } .tv-form { display: flex; flex-direction: column; gap: 20px; }
.tv-field { display: flex; flex-direction: column; gap: 7px; }
.tv-label {
font-size: .87rem;
font-weight: 700;
color: var(--tv-green);
letter-spacing: .3px;
}
.tv-required { color: var(--tv-error); margin-left: 2px; }
.tv-input {
width: 100%;
padding: 13px 16px;
border: 2px solid var(--tv-border);
border-radius: 10px;
font-family: var(--tv-font);
font-size: 1rem;
color: var(--tv-text);
background: #fafdfc;
outline: none;
transition: border-color var(--tv-trans), box-shadow var(--tv-trans);
box-sizing: border-box;
-webkit-appearance: none;
}
.tv-input:focus {
border-color: var(--tv-green-light);
box-shadow: 0 0 0 3px rgba(82,183,136,.18);
background: #fff;
}
.tv-input::placeholder { color: #aecebe; } .tv-select-wrap { position: relative; }
.tv-select { cursor: pointer; padding-right: 36px; }
.tv-select-arrow {
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--tv-muted);
font-size: .8rem;
} .tv-textarea { resize: vertical; min-height: 130px; line-height: 1.6; } .tv-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 480px) {
.tv-field-row { grid-template-columns: 1fr; gap: 20px; }
} .tv-char-count {
display: flex;
justify-content: space-between;
font-size: .8rem;
color: var(--tv-muted);
margin-top: 4px;
}
.tv-char-hint {
font-weight: 700;
transition: color .2s;
}
.tv-char-hint--warn   { color: var(--tv-accent); }
.tv-char-hint--danger { color: var(--tv-error); } .tv-btn {
font-family: var(--tv-font);
font-size: 1.05rem;
font-weight: 800;
border: none;
cursor: pointer;
border-radius: 10px;
padding: 15px 24px;
transition: all var(--tv-trans);
letter-spacing: .2px;
position: relative;
overflow: hidden;
}
.tv-btn--primary {
background: linear-gradient(135deg, var(--tv-green) 0%, var(--tv-green-light) 100%);
color: #fff;
box-shadow: 0 4px 14px rgba(45,106,79,.28);
}
.tv-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(45,106,79,.36);
}
.tv-btn--primary:active { transform: translateY(0); } .tv-notice { margin: 32px auto; max-width: 500px; }
.tv-notice--info {
background: #fff8ed;
border: 1.5px solid #f4d5a0;
border-radius: 14px;
padding: 28px;
text-align: center;
color: #7a4a10;
font-family: var(--tv-font);
font-weight: 600;
font-size: 1.05rem;
} .tv-hidden { display: none !important; } @keyframes tvFadeIn {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}