* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    color: #e0e0e0;
    min-height: 100vh;
    line-height: 1.6;
}

.container { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; }
header { text-align: center; margin-bottom: 1.5rem; }
header h1 { font-size: 2.5rem; background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.subtitle { color: #888; margin-top: .5rem; }

.tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.12); overflow-x: auto; }
.tab-btn { padding: .7rem 1.1rem; background: transparent; border: none; border-bottom: 2px solid transparent; color: #aaa; font-size: .95rem; cursor: pointer; white-space: nowrap; }
.tab-btn:hover { color: #fff; }
.tab-btn.active { color: #fff; border-bottom-color: #48dbfb; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.weather-widget, .content, .tool-panel {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}
.weather-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.weather-header h2 { font-size: 1.25rem; margin-right: auto; }
#city-input { flex: 1; min-width: 150px; padding: .5rem .75rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: #e0e0e0; font-size: .95rem; }
#city-input::placeholder { color: #666; }
#search-btn, .tool-action { padding: .55rem 1rem; background: linear-gradient(135deg,#667eea,#764ba2); border: none; border-radius: 8px; color: white; font-size: .95rem; cursor: pointer; }
#search-btn:hover, .tool-action:hover { opacity: .85; }
.tool-action.secondary { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); }
.weather-content { text-align: center; }
.weather-loading { color: #888; padding: 2rem 0; }
.weather-main { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:1rem; }
.weather-icon { font-size:3rem; }
.weather-temp { font-size:3rem; font-weight:300; }
.weather-desc { color:#aaa; font-size:1.1rem; margin-bottom:.5rem; }
.weather-location { color:#888; font-size:.95rem; }
.weather-details { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1rem; margin-top:1.5rem; }
.weather-detail { background:rgba(255,255,255,.05); border-radius:10px; padding:.75rem; }
.weather-detail-label { font-size:.8rem; color:#888; text-transform:uppercase; letter-spacing:.5px; }
.weather-detail-value { font-size:1.1rem; margin-top:.25rem; }
.weather-error { color:#ff6b6b; padding:1rem 0; }

.content h2 { margin-bottom:.75rem; }
.content p { color:#bbb; margin-bottom:.5rem; }
.books-section { min-height:300px; }
.book-card { display:flex; align-items:center; gap:1.5rem; margin-top:1.25rem; }
.book-cover { width:160px; max-width:42%; height:auto; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.book-info h3 { margin-bottom:.25rem; }
.book-author { color:#aaa; }

.tools-intro, .games-intro { margin-bottom:1.25rem; }
.tool-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-bottom:1.5rem; }
.tool-card { text-align:left; padding:1rem; min-height:145px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#eee; cursor:pointer; transition:transform .15s,border-color .15s,background .15s; }
.tool-card:hover { transform:translateY(-2px); border-color:rgba(72,219,251,.5); background:rgba(255,255,255,.09); }
.tool-card strong { display:block; font-size:1rem; margin:.5rem 0 .25rem; }
.tool-card > span:last-child { display:block; color:#999; font-size:.82rem; line-height:1.4; }
.tool-icon { font-size:1.35rem; color:#48dbfb; font-weight:600; }
.tool-panel { display:none; }
.tool-panel.active { display:block; }
.tool-panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.tool-panel-header h3 { font-size:1.2rem; }
.close-tool { background:transparent; color:#aaa; border:1px solid rgba(255,255,255,.15); border-radius:7px; padding:.4rem .7rem; cursor:pointer; }
.tool-form { display:grid; gap:1rem; }
.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tool-form label { display:flex; flex-direction:column; gap:.35rem; color:#aaa; font-size:.85rem; }
.tool-form input, .tool-form select, .tool-textarea { width:100%; padding:.65rem .75rem; border-radius:8px; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.2); color:#eee; font:inherit; }
.tool-form select option { background:#24243e; color:#eee; }
.tool-textarea { min-height:220px; resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.tool-textarea.output { margin-top:1rem; }
.tool-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.tool-result { margin-top:1rem; padding:1rem; min-height:48px; border-radius:10px; background:rgba(0,0,0,.18); color:#ddd; }
.tool-result.error { color:#ff8b8b; }
.tool-result.success { color:#9ee7b1; }
.tool-result code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem 1rem; }
.result-item span { display:block; color:#888; font-size:.78rem; }
.result-item strong { font-weight:500; }
.password-result { word-break:break-all; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.05rem; user-select:all; }

.game-project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1.25rem; }
.game-project { padding:1.25rem; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); }
.game-project-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.game-icon { font-size:1.7rem; }
.project-status { padding:.3rem .6rem; border-radius:999px; background:rgba(254,202,87,.12); border:1px solid rgba(254,202,87,.25); color:#feca57; font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.game-project h3 { font-size:1.15rem; margin-bottom:.4rem; }
.game-project p { color:#aaa; font-size:.9rem; }
.project-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.project-meta span { color:#888; font-size:.75rem; padding:.3rem .5rem; border-radius:6px; background:rgba(0,0,0,.18); }
.project-placeholder { margin-top:1rem; padding:.75rem; border:1px dashed rgba(255,255,255,.18); border-radius:8px; color:#777; font-size:.8rem; text-align:center; }

footer { text-align:center; color:#555; font-size:.85rem; }

@media (max-width: 800px) {
    .tool-grid { grid-template-columns:repeat(2,1fr); }
    .game-project-grid { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
    header h1 { font-size:1.8rem; }
    .weather-temp { font-size:2.5rem; }
    .weather-details { grid-template-columns:1fr 1fr; }
    .book-card { align-items:flex-start; }
    .book-cover { width:120px; }
    .two-col { grid-template-columns:1fr; }
}
@media (max-width: 420px) {
    .tool-grid { grid-template-columns:1fr; }
}