* { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:#f5f7fa; color:#1e293b; line-height:1.7; font-size:16px; }
    a { color:#0f3b5e; text-decoration:none; transition:color 0.2s; }
    a:hover { color:#e67e22; }
    img { max-width:100%; height:auto; display:block; }
    .container { max-width:1200px; margin:0 auto; padding:0 20px; }
    header { background:linear-gradient(135deg,#0b2a3b 0%,#1a4a5f 100%); color:#fff; padding:16px 0; position:sticky; top:0; z-index:100; box-shadow:0 2px 12px rgba(0,0,0,0.15); }
    .header-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
    .my-logo { font-size:1.7rem; font-weight:800; letter-spacing:-0.5px; color:#fff; background:rgba(255,255,255,0.08); padding:4px 16px; border-radius:40px; transition:background 0.3s; }
    .my-logo:hover { background:rgba(255,255,255,0.18); color:#f0c27f; }
    .my-logo span { color:#f0c27f; }
    .nav-toggle { display:none; background:transparent; border:2px solid rgba(255,255,255,0.4); color:#fff; font-size:1.5rem; padding:6px 14px; border-radius:8px; cursor:pointer; transition:0.2s; }
    .nav-toggle:hover { border-color:#f0c27f; color:#f0c27f; }
    nav { display:flex; gap:8px; flex-wrap:wrap; }
    nav a { color:#e2e8f0; padding:6px 14px; border-radius:30px; font-size:0.9rem; font-weight:500; transition:0.2s; background:rgba(255,255,255,0.05); }
    nav a:hover { background:#f0c27f; color:#0b2a3b; }
    .breadcrumb { background:#e9edf2; padding:10px 0; font-size:0.9rem; border-bottom:1px solid #dce1e8; }
    .breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
    .breadcrumb li+li::before { content:"›"; margin-right:8px; color:#7a8a9e; }
    .breadcrumb a { color:#0f3b5e; }
    .breadcrumb .current { color:#64748b; font-weight:500; }
    main { padding:30px 0 50px; }
    h1 { font-size:2.6rem; font-weight:800; line-height:1.2; margin-bottom:10px; color:#0b2a3b; }
    h1 small { font-size:1rem; font-weight:400; color:#64748b; display:block; margin-top:4px; }
    .last-updated { display:inline-block; background:#e9edf2; padding:4px 16px; border-radius:40px; font-size:0.85rem; color:#475569; margin-bottom:20px; }
    .hero-image { border-radius:16px; overflow:hidden; margin:20px 0 30px; box-shadow:0 4px 20px rgba(0,0,0,0.08); }
    .hero-image img { width:100%; object-fit:cover; }
    h2 { font-size:2rem; font-weight:700; margin:40px 0 16px; padding-bottom:8px; border-bottom:3px solid #f0c27f; color:#0f3b5e; }
    h3 { font-size:1.4rem; font-weight:600; margin:30px 0 12px; color:#1a4a5f; }
    h4 { font-size:1.15rem; font-weight:600; margin:20px 0 8px; color:#2c5f73; }
    p { margin-bottom:16px; }
    .highlight { background:#fef9e7; padding:2px 8px; border-radius:4px; font-weight:600; }
    .feature-box { background:#fff; border-left:4px solid #f0c27f; padding:18px 22px; border-radius:0 12px 12px 0; margin:24px 0; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
    .feature-box strong { color:#0b2a3b; }
    .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:24px 0; }
    .card { background:#fff; border-radius:14px; padding:24px; box-shadow:0 2px 12px rgba(0,0,0,0.05); transition:transform 0.2s,box-shadow 0.2s; }
    .card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,0.08); }
    .card h4 { margin-top:0; }
    .emoji-big { font-size:2rem; margin-right:8px; }
    .search-section { background:#fff; border-radius:16px; padding:28px 30px; margin:40px 0; box-shadow:0 2px 16px rgba(0,0,0,0.04); }
    .search-section h2 { border-bottom:none; margin-top:0; padding-bottom:0; }
    .search-form { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
    .search-form input { flex:1; min-width:200px; padding:14px 20px; border:2px solid #dce1e8; border-radius:50px; font-size:1rem; outline:none; transition:0.2s; }
    .search-form input:focus { border-color:#f0c27f; box-shadow:0 0 0 4px rgba(240,194,127,0.15); }
    .search-form button { padding:14px 32px; background:#0f3b5e; color:#fff; border:none; border-radius:50px; font-size:1rem; font-weight:600; cursor:pointer; transition:0.2s; }
    .search-form button:hover { background:#e67e22; transform:scale(1.02); }
    .feedback-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:40px 0; }
    .feedback-panel { background:#fff; border-radius:16px; padding:28px 30px; box-shadow:0 2px 16px rgba(0,0,0,0.04); }
    .feedback-panel h3 { margin-top:0; border-bottom:2px solid #e9edf2; padding-bottom:12px; }
    .form-group { margin-bottom:16px; }
    .form-group label { display:block; font-weight:600; margin-bottom:4px; color:#1e293b; }
    .form-group input,.form-group textarea,.form-group select { width:100%; padding:12px 16px; border:2px solid #dce1e8; border-radius:10px; font-size:1rem; outline:none; transition:0.2s; font-family:inherit; }
    .form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:#f0c27f; box-shadow:0 0 0 4px rgba(240,194,127,0.1); }
    .form-group textarea { min-height:90px; resize:vertical; }
    .btn-submit { padding:14px 28px; background:#0f3b5e; color:#fff; border:none; border-radius:50px; font-size:1rem; font-weight:600; cursor:pointer; transition:0.2s; }
    .btn-submit:hover { background:#e67e22; transform:scale(1.02); }
    .star-rating { display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; font-size:1.6rem; }
    .star-rating input { display:none; }
    .star-rating label { cursor:pointer; color:#dce1e8; transition:color 0.15s; }
    .star-rating label:hover,.star-rating label:hover~label,.star-rating input:checked~label { color:#f0c27f; }
    .links-list { background:#fff; border-radius:16px; padding:24px 28px; margin:30px 0; box-shadow:0 2px 12px rgba(0,0,0,0.04); }
    .links-list ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
    .links-list li::before { content:"🔗 "; font-size:0.8rem; }
    .links-list a { font-weight:500; }
    footer { background:#0b2a3b; color:#cbd5e1; padding:40px 0 20px; margin-top:40px; }
    footer a { color:#f0c27f; }
    footer a:hover { color:#fff; }
    .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; margin-bottom:30px; }
    .footer-grid h4 { color:#fff; margin-bottom:12px; font-size:1.1rem; }
    friend-link { display:block; background:rgba(255,255,255,0.05); border-radius:12px; padding:18px 20px; margin:16px 0; }
    friend-link a { display:inline-block; margin:4px 12px 4px 0; padding:4px 12px; background:rgba(240,194,127,0.1); border-radius:30px; font-size:0.9rem; }
    friend-link a:hover { background:#f0c27f; color:#0b2a3b; }
    .copyright { text-align:center; border-top:1px solid rgba(255,255,255,0.08); padding-top:20px; margin-top:20px; font-size:0.9rem; color:#94a3b8; }
    @media (max-width:768px) {
      .nav-toggle { display:block; }
      nav { display:none; width:100%; flex-direction:column; gap:6px; margin-top:12px; }
      nav.open { display:flex; }
      nav a { padding:10px 16px; border-radius:8px; }
      .header-inner { position:relative; }
      h1 { font-size:1.9rem; }
      h2 { font-size:1.5rem; }
      .grid-2,.feedback-grid { grid-template-columns:1fr; }
      .footer-grid { grid-template-columns:1fr; }
      .links-list ul { grid-template-columns:1fr; }
      .search-form input { min-width:auto; }
      .breadcrumb ol { font-size:0.8rem; }
    }
    @media (max-width:480px) {
      .container { padding:0 14px; }
      h1 { font-size:1.6rem; }
      .search-form button { width:100%; }
    }