:root{
--vy-green:#2f8f5b;
--vy-green-dark:#1f6f45;
--vy-bg:#f4f7f2;
--vy-card:#ffffff;
--vy-text:#1f2933;
--vy-muted:#6b7280;
--vy-border:#e5e7eb;
--vy-soft:#eef7f0;
--vy-danger:#b45309;
}
*{
box-sizing:border-box;
}
body{
margin:0;
background:var(--vy-bg);
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:var(--vy-text);
}
.vy-app{
width:100%;
max-width:1120px;
min-height:100vh;
margin:0 auto;
padding:18px 16px 40px;
background:linear-gradient(180deg,#eef8ef 0%,#f7faf6 35%,#fff 100%);
}
.vy-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
}
.vy-title{
margin:0;
font-size:26px;
line-height:1.1;
font-weight:900;
letter-spacing:-.04em;
}
.vy-pill{
background:#dff3e5;
color:var(--vy-green-dark);
padding:8px 14px;
border-radius:999px;
font-size:13px;
font-weight:800;
white-space:nowrap;
}
.vy-layout{
display:grid;
grid-template-columns:1fr;
gap:16px;
}
@media (min-width:768px){
.vy-layout{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
align-items:start;
}
.vy-submit-wrap{
grid-column:1 / -1;
}
.vy-result{
grid-column:1 / -1;
}
}
@media (min-width:1024px){
.vy-app{
padding:28px 24px 56px;
}
.vy-title{
font-size:32px;
}
}
.vy-card{
background:var(--vy-card);
border:1px solid var(--vy-border);
border-radius:26px;
padding:20px;
box-shadow:0 12px 32px rgba(31,41,51,.08);
}
.vy-section-title{
margin:0 0 16px;
font-size:18px;
font-weight:900;
}
.vy-field{
margin-bottom:16px;
}
.vy-label{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin-bottom:8px;
font-size:14px;
font-weight:800;
}
.vy-label span{
color:var(--vy-muted);
font-size:12px;
font-weight:700;
}
.vy-input,
.vy-select,
.vy-textarea,
.ts-control{
max-width:100% !important;
width:100% !important;
min-height:46px;
border:1px solid var(--vy-border) !important;
border-radius:16px !important;
padding:12px 14px !important;
font-size:15px;
background:#fff !important;
outline:none;
box-shadow:none !important;
}
.ts-wrapper.single .ts-control{
background:#fff !important;
}
.ts-dropdown{
border-radius:16px;
overflow:hidden;
border:1px solid var(--vy-border);
box-shadow:0 16px 32px rgba(31,41,51,.12);
}
.vy-input:focus,
.vy-select:focus,
.vy-textarea:focus,
.ts-wrapper.focus .ts-control{
border-color:var(--vy-green) !important;
box-shadow:0 0 0 3px rgba(47,143,91,.12) !important;
}
.vy-textarea{
min-height:96px;
resize:vertical;
}
.vy-upload{
width:100%;
min-height:190px;
border:2px dashed #b7d8c1;
border-radius:22px;
padding:22px;
background:var(--vy-soft);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
cursor:pointer;
overflow:hidden;
}
.vy-upload input{
display:none;
}
.vy-upload-icon{
font-size:38px;
line-height:1;
margin-bottom:10px;
}
.vy-upload strong{
display:block;
font-size:16px;
font-weight:900;
margin-bottom:4px;
}
.vy-upload small{
display:block;
color:var(--vy-muted);
font-size:13px;
}
.vy-preview{
display:none;
width:100%;
max-height:280px;
object-fit:cover;
border-radius:18px;
margin-top:14px;
}
.vy-advanced-toggle{
width:100%;
min-height:54px;
border:none;
background:#f0f5f2;
border-radius:18px;
padding:14px;
color:var(--vy-green-dark);
font-size:15px;
font-weight:900;
cursor:pointer;
}
.vy-advanced{
display:none;
margin-top:16px;
}
.vy-btn{
width:100%;
min-height:58px;
border:none;
border-radius:22px;
padding:16px;
background:linear-gradient(135deg,var(--vy-green),var(--vy-green-dark));
color:#fff;
font-size:15px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
cursor:pointer;
box-shadow:0 14px 28px rgba(47,143,91,.28);
}
.vy-btn:disabled{
opacity:.65;
cursor:not-allowed;
}
.vy-status{
display:none;
margin-top:12px;
padding:12px 14px;
border-radius:16px;
background:#fff7ed;
color:var(--vy-danger);
font-size:13px;
line-height:1.5;
}
.vy-result{
display:none;
}
.vy-summary{
background:#effaf2;
border:1px solid #ccebd5;
border-radius:20px;
padding:16px;
margin-bottom:14px;
}
.vy-summary h3{
margin:0 0 8px;
font-size:18px;
}
.vy-summary p{
margin:0;
line-height:1.55;
}
.vy-cause{
border:1px solid var(--vy-border);
border-radius:18px;
padding:14px;
margin-bottom:10px;
}
.vy-cause-top{
display:flex;
justify-content:space-between;
gap:10px;
font-weight:900;
margin-bottom:6px;
}
.vy-cause p{
margin:0;
color:var(--vy-muted);
font-size:13px;
line-height:1.5;
}
.vy-list{
margin:0;
padding-left:18px;
}
.vy-list li{
margin:7px 0;
line-height:1.45;
}
.vy-day{
border-left:4px solid var(--vy-green);
background:#f8faf8;
border-radius:16px;
padding:13px 14px;
margin-bottom:10px;
}
.vy-day strong{
display:block;
margin-bottom:6px;
}
.vy-tag{
display:inline-block;
margin:2px 0 8px;
padding:4px 9px;
border-radius:999px;
background:#e8f3ec;
color:var(--vy-green-dark);
font-size:12px;
font-weight:900;
}
.vy-small{
color:var(--vy-muted);
font-size:12px;
line-height:1.5;
} .vy-field .ts-wrapper.single .ts-control {
min-height: 46px !important;
height: 46px !important;
display: flex !important;
align-items: center !important;
padding: 0 14px !important;
border-radius: 16px !important;
line-height: 1.2 !important;
}
.vy-field .ts-wrapper.single .ts-control input {
height: 44px !important;
line-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
font-size: 15px !important;
}
.vy-field .ts-wrapper.single .ts-control .item {
display: flex !important;
align-items: center !important;
min-height: 44px !important;
line-height: 1.3 !important;
padding: 0 !important;
margin: 0 !important;
}
.vy-field .ts-wrapper {
width: 100% !important;
}
.vy-field .ts-wrapper.single .ts-control {
transform: translateY(1px);
}