@import "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Sans+Thai:wght@400;500;700&display=swap";
:root{--google-blue:#1a73e8;--google-blue-hover:#1b66c9;--google-red:#ea4335;--google-yellow:#fbbc04;--google-green:#34a853;--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-hover:#f1f3f4;--border-color:#dadce0;--text-primary:#202124;--text-secondary:#5f6368;--text-tertiary:#70757a;--shadow-sm:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326;--shadow-md:0 1px 2px 0 #3c40434d,0 2px 6px 2px #3c404326;--shadow-search:0 1px 6px #20212447;--radius-sm:8px;--radius-md:12px;--radius-pill:24px;--font-sans:"Roboto","Noto Sans Thai",arial,sans-serif;--transition:all .2s ease-in-out}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--google-blue:#8ab4f8;--google-blue-hover:#aecbfa;--google-red:#f28b82;--google-yellow:#fde293;--google-green:#81c995;--bg-primary:#202124;--bg-secondary:#303134;--bg-hover:#3c4043;--border-color:#3c4043;--text-primary:#e8eaed;--text-secondary:#9aa0a6;--text-tertiary:#70757a;--shadow-sm:0 1px 2px #0000004d,0 1px 3px 1px #00000026;--shadow-md:0 4px 6px #0000004d;--shadow-search:0 1px 3px #00000080}}[data-theme=dark]{--google-blue:#8ab4f8;--google-blue-hover:#aecbfa;--google-red:#f28b82;--google-yellow:#fde293;--google-green:#81c995;--bg-primary:#202124;--bg-secondary:#303134;--bg-hover:#3c4043;--border-color:#3c4043;--text-primary:#e8eaed;--text-secondary:#9aa0a6;--text-tertiary:#70757a;--shadow-sm:0 1px 2px #0000004d,0 1px 3px 1px #00000026;--shadow-md:0 4px 6px #0000004d;--shadow-search:0 1px 3px #00000080}[data-theme=light]{--google-blue:#1a73e8;--google-blue-hover:#1b66c9;--google-red:#ea4335;--google-yellow:#fbbc04;--google-green:#34a853;--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-hover:#f1f3f4;--border-color:#dadce0;--text-primary:#202124;--text-secondary:#5f6368;--text-tertiary:#70757a;--shadow-sm:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326;--shadow-md:0 1px 2px 0 #3c40434d,0 2px 6px 2px #3c404326;--shadow-search:0 1px 6px #20212447}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.5}a{color:var(--google-blue);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit}img{max-width:100%}input,textarea,select{font-family:inherit}.app-container{max-width:1040px;margin:0 auto;padding:0 20px}.header{z-index:100;background:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:12px 0;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;max-width:1040px;margin:0 auto;padding:0 20px;display:flex}.logo{color:var(--text-primary);align-items:center;gap:8px;font-size:1.3rem;font-weight:500;text-decoration:none;display:flex}.logo:hover{text-decoration:none}.logo-text{color:var(--text-primary)}.nav-links{gap:8px;display:flex}.nav-link{border-radius:var(--radius-sm);color:var(--text-secondary);border:1px solid #0000;padding:8px 16px;font-size:.875rem;font-weight:500}.nav-link:hover{background:var(--bg-secondary);color:var(--text-primary);text-decoration:none}.nav-link.active{color:var(--google-blue)}.hero{text-align:center;padding:40px 20px 32px}.hero h1{color:var(--text-primary);letter-spacing:-.5px;margin-bottom:16px;font-size:2.2rem;font-weight:400}.hero-subtitle{color:var(--text-secondary);margin:0 auto 32px;font-size:1rem}.search-wrapper{max-width:638px;margin:0 auto 32px;position:relative}.search-bar{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-pill);align-items:center;height:48px;padding:0 16px;transition:box-shadow .2s cubic-bezier(.4,0,.2,1);display:flex}.search-bar:hover,.search-bar:focus-within{box-shadow:var(--shadow-search);border-color:#dfe1e500}.search-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;height:100%;padding:0 8px;font-size:1rem}.search-btn{color:var(--google-blue);background:0 0;border:none;padding:8px 16px;font-weight:500}.search-btn:hover{text-decoration:underline}.nearby-btn-hero{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:var(--radius-sm);height:40px;transition:var(--transition);align-items:center;gap:8px;margin-top:24px;padding:0 24px;font-size:.875rem;font-weight:500;display:inline-flex}.nearby-btn-hero:hover{color:var(--text-primary);border-color:#d7d7d7;box-shadow:0 1px 1px #0000001a}.nearby-btn-hero:disabled{opacity:.5;cursor:default}.section-header{border-bottom:1px solid var(--border-color);margin-bottom:20px;padding-bottom:12px}.section-title{color:var(--text-primary);font-size:1.3rem;font-weight:400}.station-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:48px;display:grid}.station-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:inherit;flex-direction:column;padding:16px;text-decoration:none;transition:box-shadow .2s;display:flex}.station-card:hover{box-shadow:var(--shadow-sm);text-decoration:none}.station-card-header{justify-content:space-between;align-items:flex-start;margin-bottom:8px;display:flex}.station-name{color:var(--google-blue);font-size:1.1rem;font-weight:500;line-height:1.3}.station-address{color:var(--text-secondary);flex:1;margin-bottom:16px;font-size:.875rem}.station-footer{justify-content:space-between;align-items:center;font-size:.875rem;display:flex}.badge{align-items:center;gap:4px;font-size:.875rem;font-weight:500;display:inline-flex}.badge-available{color:var(--google-green)}.badge-unavailable{color:var(--google-red)}.badge-unknown{color:var(--text-tertiary)}.badge-summary{border-radius:100px;padding:8px 18px;font-size:.9rem;font-weight:500}.badge-summary-available{border:1px solid var(--google-green);color:var(--google-green);background:#34a8531a}.badge-summary-unavailable{border:1px solid var(--google-red);color:var(--google-red);background:#ea43351a}.badge-summary-unknown{border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-tertiary)}.report-count{color:var(--text-tertiary)}.distance-badge{color:var(--text-tertiary);font-size:.875rem}.detail-page{padding:24px 0 64px}.back-btn{color:var(--google-blue);margin-bottom:24px;font-weight:500;display:inline-block}.detail-header h1{margin-bottom:8px;font-size:1.75rem;font-weight:400}.detail-address{color:var(--text-secondary);font-size:.95rem}.detail-grid{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:24px;margin-top:24px;display:grid}@media (max-width:800px){.detail-grid{grid-template-columns:1fr}}.report-form-card{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);padding:24px}.form-title{border-bottom:1px solid var(--border-color);margin-bottom:20px;padding-bottom:12px;font-size:1.25rem;font-weight:500}.status-selector{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;display:grid}.status-option{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-secondary);text-align:center;justify-content:center;align-items:center;gap:8px;padding:12px;font-weight:500;display:flex}.status-option:hover{background:var(--bg-hover)}.status-option.selected-available{color:var(--google-green);border-color:var(--google-green);background:#34a8531a}.status-option.selected-unavailable{color:var(--google-red);border-color:var(--google-red);background:#ea43351a}.form-group{margin-bottom:16px}.form-label{color:var(--text-primary);margin-bottom:8px;font-size:.875rem;font-weight:500;display:block}.form-input,.form-textarea{border:1px solid var(--border-color);width:100%;color:var(--text-primary);border-radius:4px;padding:10px 12px;font-size:.95rem}.form-input:focus,.form-textarea:focus{border-color:var(--google-blue);outline:1px solid var(--google-blue)}.form-textarea{resize:vertical;min-height:80px}.image-upload{border:1px dashed var(--border-color);border-radius:var(--radius-sm);text-align:center;cursor:pointer;background:var(--bg-secondary);padding:24px;position:relative}.image-upload:hover{background:var(--bg-hover)}.image-upload input[type=file]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.upload-text{color:var(--google-blue);margin-bottom:4px;font-weight:500}.upload-hint{color:var(--text-tertiary);font-size:.8rem}.image-preview{border:1px solid var(--border-color);border-radius:4px;max-width:100%;margin-top:12px}.submit-btn{background:var(--google-blue);color:#fff;border:none;border-radius:4px;padding:10px 24px;font-size:.875rem;font-weight:500;transition:background .2s}.submit-btn:hover:not(:disabled){background:var(--google-blue-hover);box-shadow:0 1px 2px #3c40434d}.submit-btn:disabled{opacity:.5;cursor:default}.reports-card{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary)}.reports-title{border-bottom:1px solid var(--border-color);padding:16px 20px;font-size:1.1rem;font-weight:500}.timeline{flex-direction:column;display:flex}.timeline-item{border-bottom:1px solid var(--border-color);padding:16px 20px}.timeline-item:last-child{border-bottom:none}.timeline-status{margin-bottom:4px;font-size:.95rem;font-weight:500}.timeline-message{color:var(--text-secondary);margin-bottom:8px;font-size:.875rem}.timeline-time{color:var(--text-tertiary);font-size:.8rem}.timeline-image{border:1px solid var(--border-color);border-radius:4px;max-height:120px;margin-bottom:8px}.no-reports{text-align:center;color:var(--text-tertiary);padding:32px 20px}.toast{color:#fff;z-index:1000;background:#323232;border-radius:4px;padding:14px 24px;font-size:.875rem;transition:opacity .3s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast-hide{opacity:0}.footer{text-align:center;color:var(--text-tertiary);border-top:1px solid var(--border-color);margin-top:40px;padding:24px;font-size:.875rem}.loading,.empty-state{text-align:center;color:var(--text-secondary);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-bottom:24px;padding:40px}.spinner{border:3px solid #1a73e833;border-top-color:var(--google-blue);border-radius:50%;width:24px;height:24px;margin-right:8px;animation:1s ease-in-out infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.report-list{flex-direction:column;gap:12px;display:flex}.report-card{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:inherit;padding:16px;text-decoration:none;transition:box-shadow .2s;display:block}.report-card:hover{box-shadow:var(--shadow-sm);text-decoration:none}.report-card-header{justify-content:space-between;margin-bottom:8px;display:flex}.report-station-name{color:var(--google-blue);font-weight:500}.report-time{color:var(--text-tertiary);margin-top:8px;font-size:.8rem;display:block}@media (max-width:768px){.hero{padding:32px 16px 24px}.hero h1{font-size:1.8rem}.search-wrapper{margin-bottom:24px}.search-bar{border-radius:24px;flex-wrap:wrap;height:auto;min-height:48px;padding:8px 16px}.search-input{width:100%;min-height:40px;margin-bottom:4px}.search-btn{border-top:1px solid var(--bg-hover);justify-content:center;width:100%;margin-top:4px;padding:10px}.station-grid,.detail-grid{grid-template-columns:1fr;gap:12px}.detail-header h1{font-size:1.6rem;align-items:flex-start!important}.form-group[style*=grid-template-columns]{grid-template-columns:1fr!important}.status-selector{flex-direction:column}.status-option{width:100%}.report-card-header{flex-direction:column;align-items:flex-start;gap:8px}}@media (max-width:480px){.nearby-btn-hero{justify-content:center;width:100%;height:auto;padding:12px}.nearby-btn-hero span{text-align:center}.logo-text{font-size:1.1rem}.detail-header div[style*="flex-wrap: wrap"]{gap:8px!important}.badge{padding:6px 12px!important;font-size:.8rem!important}}