:root{--color-main:#e13e58;--color-alt:#007297;--color-strong:#f4c021;--color-intro:#fffad2;--color-text:#504e4e;--color-pass:#dd4949;--color-nav-title:#666;--color-line:#c3c2c2;--color-answer:#ec0044;--color-excellent:#e74683;--color-great:#ff671b;--color-good:#00afaa;--color-you-can-do-it:#544587;--color-speak-up:#8a8a8d;--color-light:#fff;--color-light-gray:#eee;--color-dark:#000;--color-background:#f6f6f6;--color-placeholder:#c4c4c6;--color-recommendation:#ff950c;--header-height:56px;--nav-height:60px;--border-radius:12px;--border-radius-sm:8px;--shadow:0 2px 12px #00000014;--shadow-lg:0 8px 32px #0000001f;--transition:.2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{background:var(--color-background);color:var(--color-text);min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Yu Gothic,Meiryo,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,textarea{font-family:inherit}.page-container{background:var(--color-light);flex-direction:column;max-width:480px;min-height:100dvh;margin:0 auto;display:flex;position:relative}.page-content{padding-bottom:var(--nav-height);flex:1;overflow-y:auto}.btn-primary{background:linear-gradient(135deg,var(--color-main),#c0304a);color:#fff;text-align:center;width:100%;transition:all var(--transition);letter-spacing:.04em;border-radius:50px;padding:16px;font-size:17px;font-weight:700;display:block;box-shadow:0 4px 16px #e13e5866}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #e13e5880}.btn-primary:active{opacity:.85;transform:translateY(0)}.btn-secondary{width:100%;color:var(--color-alt);border:2px solid var(--color-alt);text-align:center;transition:all var(--transition);background:0 0;border-radius:50px;padding:14px;font-size:16px;font-weight:600;display:block}.btn-secondary:hover{background:var(--color-alt);color:#fff}.btn-alt{background:linear-gradient(135deg,var(--color-alt),#005d7a);color:#fff;text-align:center;width:100%;transition:all var(--transition);border-radius:50px;padding:16px;font-size:17px;font-weight:700;display:block;box-shadow:0 4px 16px #00729766}.btn-alt:hover{transform:translateY(-1px);box-shadow:0 6px 20px #00729780}.header{height:var(--header-height);background:var(--color-alt);z-index:100;box-shadow:var(--shadow);justify-content:space-between;align-items:center;padding:0 16px;display:flex;position:sticky;top:0}.header-title{color:#fff;font-size:18px;font-weight:700}.header-logo{color:#fff;letter-spacing:-.5px;font-size:20px;font-weight:900}.bottom-nav{width:100%;max-width:480px;height:var(--nav-height);border-top:1px solid var(--color-line);z-index:200;background:#fff;align-items:center;padding:0 8px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -2px 12px #0000000f}.bottom-nav-item{border-radius:var(--border-radius-sm);transition:background var(--transition);color:var(--color-nav-title);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:4px;font-size:10px;font-weight:500;display:flex}.bottom-nav-item.active{color:var(--color-alt)}.bottom-nav-item svg{width:24px;height:24px}.card{border-radius:var(--border-radius);box-shadow:var(--shadow);background:#fff;margin-bottom:16px;overflow:hidden}.loading-overlay{z-index:999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#ffffffd9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.spinner{border:4px solid var(--color-line);border-top-color:var(--color-alt);border-radius:50%;width:44px;height:44px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.input-field{border:1.5px solid var(--color-line);border-radius:var(--border-radius-sm);width:100%;color:var(--color-text);transition:border-color var(--transition);background:#fff;outline:none;padding:14px 16px;font-size:16px}.input-field:focus{border-color:var(--color-alt)}.input-field::placeholder{color:var(--color-placeholder)}.section-label{color:var(--color-nav-title);letter-spacing:.1em;text-transform:uppercase;padding:16px 16px 8px;font-size:12px;font-weight:600}.badge{background:var(--color-main);color:#fff;border-radius:20px;padding:3px 8px;font-size:11px;font-weight:700;display:inline-block}.badge-alt{background:var(--color-alt)}.badge-premium{background:linear-gradient(135deg,var(--color-strong),#e0a800);color:#333}.evaluation-badge{color:#fff;border-radius:20px;align-items:center;padding:4px 12px;font-size:13px;font-weight:700;display:inline-flex}.text-center{text-align:center}.text-bold{font-weight:700}.text-muted{color:var(--color-nav-title)}.text-main{color:var(--color-main)}.text-alt{color:var(--color-alt)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.p-4{padding:16px}.p-6{padding:24px}.px-4{padding-inline:16px}.py-3{padding-block:12px}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mb-4{margin-bottom:16px}.w-full{width:100%}.h-full{height:100%}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.3s fadeIn}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:.4s slideUp}.mic-button{background:linear-gradient(135deg,var(--color-main),#c0304a);color:#fff;width:80px;height:80px;transition:all var(--transition);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 6px 24px #e13e5880}.mic-button:hover{transform:scale(1.05);box-shadow:0 8px 28px #e13e5899}.mic-button:active{transform:scale(.95)}.mic-button.recording{background:linear-gradient(135deg,#c0304a,var(--color-main));animation:1.5s infinite pulse}@keyframes pulse{0%,to{box-shadow:0 6px 24px #e13e5880}50%{box-shadow:0 6px 36px #e13e58cc,0 0 0 12px #e13e5826}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-line);border-radius:2px}