/* 引入统一的CSS变量 */
@import url('./variables.css');

*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family-sans)}
body,html{height:100%;min-height:100vh;width:100%;overflow-x:hidden;position:relative}
body{background-color:hsl(var(--color-bg-secondary));color:hsl(var(--color-text-primary));line-height:var(--leading-relaxed);padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center}
.fullscreen-content{width:100%;max-width:600px;padding:0 var(--space-5);text-align:center;position:relative}
header{margin-bottom:var(--space-10)}
.title{font-size:var(--text-4xl);font-weight:700;color:hsl(var(--color-primary));margin-bottom:var(--space-4);line-height:var(--leading-tight)}
.tagline{font-size:var(--text-lg);opacity:.8;margin-bottom:var(--space-3);color:hsl(var(--color-text-muted))}
form{width:100%;margin-bottom:var(--space-8)}
.form-group{margin-bottom:var(--space-6);width:100%}
.form-control{width:100%;height:60px;padding:0 var(--space-5);border:var(--border-width) solid hsl(var(--color-text-primary));border-radius:var(--radius-md);font-size:var(--text-lg);transition:all var(--transition-normal);background:hsl(var(--color-white));font-family:var(--font-family-sans);line-height:var(--leading-tight);box-shadow:var(--shadow-sm);font-weight:500}
.form-control:focus{border-color:hsl(var(--color-primary));outline:0;box-shadow:0 0 15px hsl(var(--color-primary), 0.2)}
.btn{width:100%;height:65px;background:hsl(var(--color-primary));color:hsl(var(--color-white));border:var(--border-width) solid hsl(var(--color-text-primary));border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-lg);font-weight:900;display:flex;align-items:center;justify-content:center;gap:var(--space-3);transition:all var(--transition-fast);font-family:var(--font-family-sans);line-height:var(--leading-tight);box-shadow:var(--shadow-md);text-shadow:1px 1px 0px hsl(var(--color-text-primary));position:relative;overflow:hidden}
.btn:hover:not(:disabled){background:hsl(var(--color-primary-light));transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}
.btn:disabled{background:hsl(var(--color-gray-300));color:hsl(var(--color-gray-500));cursor:not-allowed;box-shadow:none}
.result-container{margin-top:var(--space-8);width:100%;animation:fadeIn var(--transition-normal)}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
.result-text{font-size:var(--text-lg);padding:var(--space-5);border-radius:var(--radius-md);font-weight:500;margin-bottom:var(--space-8)}
.success{color:hsl(var(--color-success));background:hsl(var(--color-success), 0.1);border:1px solid hsl(var(--color-success))}
.info{color:hsl(var(--color-text-primary));background:hsl(var(--color-gray-50));border:1px solid hsl(var(--color-border))}
.warning{color:hsl(var(--color-warning));background:hsl(var(--color-warning), 0.1);border:1px solid hsl(var(--color-warning))}
.error{color:hsl(var(--color-danger));background:hsl(var(--color-danger), 0.1);border:1px solid hsl(var(--color-danger))}
footer{margin-top:var(--space-16);color:hsl(var(--color-text-muted));font-size:var(--text-sm);opacity:.7;padding:var(--space-5) 0;width:100%}
/* 平板设备优化 */
@media (max-width:768px){
    .fullscreen-content{padding:0 var(--space-4);max-width:100%}
    .title{font-size:var(--text-3xl);margin-bottom:var(--space-3)}
    .tagline{font-size:var(--text-base);margin-bottom:var(--space-2)}
    .btn,.form-control{height:55px;font-size:var(--text-base)}
    .result-text{font-size:var(--text-base);padding:var(--space-4)}
    header{margin-bottom:var(--space-8)}
    form{margin-bottom:var(--space-6)}
    .form-group{margin-bottom:var(--space-5)}
}

/* 手机设备优化 */
@media (max-width:480px){
    body{padding:var(--space-3) 0;min-height:calc(100vh - 2 * var(--space-3))}
    .fullscreen-content{padding:0 var(--space-3);max-width:100%}
    .title{font-size:var(--text-2xl);margin-bottom:var(--space-3);line-height:var(--leading-tight)}
    .tagline{font-size:var(--text-sm);margin-bottom:var(--space-2);opacity:.9}
    .btn,.form-control{height:50px;font-size:var(--text-base);border-radius:var(--radius-md)}
    .form-control{padding:0 var(--space-4)}
    .result-text{font-size:var(--text-sm);padding:var(--space-3);border-radius:var(--radius-md)}
    header{margin-bottom:var(--space-6)}
    form{margin-bottom:var(--space-5)}
    .form-group{margin-bottom:var(--space-4)}
    .btn:hover:not(:disabled){transform:none;box-shadow:var(--shadow-sm)}
}

/* 小屏手机优化 */
@media (max-width:360px){
    .fullscreen-content{padding:0 var(--space-2)}
    .title{font-size:var(--text-xl)}
    .tagline{font-size:var(--text-xs)}
    .btn,.form-control{height:48px;font-size:var(--text-sm)}
    .form-control{padding:0 var(--space-3)}
    .result-text{font-size:var(--text-xs);padding:var(--space-2)}
    header{margin-bottom:var(--space-5)}
    form{margin-bottom:var(--space-4)}
    .form-group{margin-bottom:var(--space-3)}
}

/* 防止水平滚动 */
@media (max-width:1000px){
    body,html{overflow-x:hidden}
    *{max-width:100%}
}

/* 触摸设备优化 */
@media (hover:none) and (pointer:coarse){
    .btn:hover:not(:disabled){transform:none;background:hsl(var(--color-primary))}
    .btn:active:not(:disabled){transform:scale(.98);background:hsl(var(--color-primary-light));box-shadow:var(--shadow-sm)}
    .form-control:focus{border-color:hsl(var(--color-primary));box-shadow:0 0 10px hsl(var(--color-primary), 0.15)}
}