*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
  :root {
    --orange:#E8751A;       --orange-light:#F49040;  --orange-pale:#FDF1E8;
    --orange-dark:#C05E0A;  --green:#6AAF18;         --green-light:#8CC83A;
    --green-pale:#EFF8E3;   --green-dark:#4D8510;
    --gray-bg:#F8F7F5;      --gray-mid:#E8E6E1;      --gray-text:#6B6860;
    --text:#1E1C1A;         --white:#FFFFFF;
    --radius:12px;          --radius-sm:8px;
    --shadow-card:0 2px 8px rgba(0,0,0,0.07);
    --shadow-hover:0 8px 28px rgba(0,0,0,0.13);
  }
  body { font-family:"Nunito",sans-serif; background:var(--gray-bg); color:var(--text); min-height:100vh; -webkit-text-size-adjust:100%; text-size-adjust:100%; overscroll-behavior-y:contain; }

  /* ── APP INITIAL STATE ── */
  #app { display:none; }

  /* ── LOGIN ── */
  #login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--gray-bg); }
  .login-box { background:var(--white); border-radius:20px; padding:2.5rem 2rem; width:min(380px,92vw); box-shadow:0 8px 40px rgba(0,0,0,0.12); text-align:center; }
  .login-logo { margin-bottom:1.25rem; display:flex; justify-content:center; }
  .login-box h1 { font-size:1.4rem; font-weight:800; margin-bottom:0.3rem; }
  .login-box > p { font-size:0.875rem; color:var(--gray-text); margin-bottom:1.5rem; line-height:1.5; }
  #pw-input { width:100%; padding:0.7rem 1rem; border:2px solid var(--gray-mid); border-radius:var(--radius-sm); font-size:1rem; font-family:inherit; outline:none; transition:border-color 0.2s; margin-top:0.25rem; }
  #pw-input:focus { border-color:var(--orange); }
  .login-btn { width:100%; margin-top:0.75rem; padding:0.75rem; background:var(--orange); color:#fff; border:none; border-radius:var(--radius-sm); font-size:1rem; font-weight:700; font-family:inherit; cursor:pointer; transition:background 0.15s; }
  .login-btn:hover { background:var(--orange-dark); }
  .login-error { display:none; color:#c0392b; font-size:0.8rem; margin-top:0.5rem; }
  .login-footer { font-size:0.72rem; color:var(--gray-text); margin-top:1.25rem; opacity:0.7; }

  /* ── HEADER ── */
  .site-header { background:var(--white); border-bottom:1px solid var(--gray-mid); position:sticky; top:0; z-index:200; padding-top:env(safe-area-inset-top,0px); }
  .header-inner { max-width:900px; margin:0 auto; padding:0 1.5rem; height:58px; display:flex; align-items:center; justify-content:space-between; }
  .header-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
  .header-dot { width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .header-brand-text h1 { font-size:1rem; font-weight:800; color:var(--text); line-height:1.2; }
  .header-brand-text span { font-size:0.7rem; color:var(--gray-text); font-weight:600; }
  .logout-btn { background:none; border:1px solid var(--gray-mid); border-radius:var(--radius-sm); padding:5px 14px; font-size:0.78rem; font-weight:600; font-family:inherit; color:var(--gray-text); cursor:pointer; transition:all 0.15s; white-space:nowrap; }
  .logout-btn:hover { border-color:var(--orange); color:var(--orange); }

  /* ── HERO ── */
  .hero { background:linear-gradient(135deg,var(--white) 0%,var(--orange-pale) 100%); border-bottom:1px solid var(--gray-mid); padding:2.25rem 1.5rem; text-align:center; }
  .hero-inner { max-width:620px; margin:0 auto; }
  .hero h2 { font-size:1.7rem; font-weight:800; margin-bottom:0.6rem; line-height:1.25; }
  .hero h2 span { color:var(--orange); }
  .hero p { font-size:0.95rem; color:var(--gray-text); line-height:1.7; max-width:500px; margin:0 auto; }

  /* ── NAVIGATION — Pill Tabs ── */
  .section-nav { background:var(--white); border-bottom:1px solid var(--gray-mid); position:sticky; top:58px; z-index:100; padding:10px 1.5rem; }
  .section-nav-inner { display:flex; gap:4px; max-width:900px; margin:0 auto; background:var(--gray-bg); border:1px solid var(--gray-mid); border-radius:100px; padding:4px; overflow-x:auto; scrollbar-width:none; }
  .section-nav-inner::-webkit-scrollbar { display:none; }
  .nav-btn { background:transparent; border:none; padding:9px 15px; min-height:40px; border-radius:100px; font-size:0.82rem; font-weight:600; font-family:"Nunito",sans-serif; color:var(--gray-text); cursor:pointer; transition:all 0.18s; white-space:nowrap; display:flex; align-items:center; gap:5px; }
  .nav-btn:hover { color:var(--text); background:rgba(255,255,255,0.8); }
  .nav-btn.active { background:var(--white); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.05); }

  /* ── MAIN CONTENT ── */
  .main-content { max-width:900px; margin:0 auto; padding:2rem 1.5rem; }
  .section-block { display:none; }
  .section-block.active { display:block; }

  /* ── SECTION TITLE ── */
  .section-title { display:flex; align-items:center; gap:12px; margin-bottom:2rem; padding-bottom:1rem; border-bottom:2px solid var(--gray-mid); }
  .section-icon-badge { width:44px; height:44px; background:var(--orange); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; box-shadow:0 3px 10px rgba(232,117,26,0.3); }
  .section-title h2 { font-size:1.35rem; font-weight:800; }
  .section-title p { font-size:0.8rem; color:var(--gray-text); margin-top:2px; }

  /* ── INFO BOX ── */
  .info-box { background:var(--orange-pale); border:1px solid #F5C9B3; border-left:4px solid var(--orange); border-radius:var(--radius-sm); padding:0.875rem 1.125rem; margin-bottom:1.75rem; font-size:0.875rem; color:var(--orange-dark); line-height:1.6; }
  .info-box strong { font-weight:700; }

  /* ── SUBSECTIONS ── */
  .subsection { margin-bottom:1.75rem; }
  .subsection--video { background:rgba(30,28,26,0.05); border-radius:16px; padding:1.25rem 1.25rem 1.5rem; }
  .subsection--photo { background:rgba(106,175,24,0.07); border-radius:16px; padding:1.25rem 1.25rem 1.5rem; border:1px solid rgba(106,175,24,0.15); }

  /* ── SUBSECTION LABEL PILLS ── */
  .subsection-label { display:inline-flex; align-items:center; gap:7px; margin-bottom:1rem; font-size:0.67rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:5px 14px 5px 10px; border-radius:100px; line-height:1; }
  .subsection--video .subsection-label { background:#2C2A27; color:#FDE8DC; box-shadow:0 2px 6px rgba(44,42,39,0.2); }
  .subsection--photo .subsection-label { background:var(--green); color:#fff; box-shadow:0 2px 6px rgba(106,175,24,0.28); }

  /* ── MEDIA GRID ── */
  .media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1rem; }
  .media-card { background:var(--white); border:1px solid var(--gray-mid); border-radius:var(--radius); overflow:hidden; transition:border-color 0.2s,transform 0.18s,box-shadow 0.18s; cursor:pointer; box-shadow:var(--shadow-card); }
  .media-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }
  .subsection--video .media-card:hover { border-color:var(--orange-light); }
  .subsection--photo .media-card:hover { border-color:var(--green-light); }
  .media-thumb { width:100%; padding-top:66%; background:var(--orange-pale); position:relative; }
  .media-img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border-radius:12px 12px 0 0; }
  .media-thumb-inner { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
  .thumb-icon { width:36px; height:36px; background:var(--orange); border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .thumb-icon svg { width:16px; height:16px; fill:white; }
  .thumb-type { font-size:0.65rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--orange-dark); background:var(--white); padding:2px 8px; border-radius:20px; border:1px solid var(--orange-light); }
  .media-card-body { padding:0.65rem 0.8rem 0.7rem; }
  .media-card-name { font-size:0.9rem; font-weight:700; color:var(--text); line-height:1.35; word-break:break-word; }
  .subsection--video .media-card-name { font-size:1.05rem; }

  /* ── VIDEO THUMBNAIL + PLAY BUTTON ── */
  .play-btn-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:12px 12px 0 0; background:rgba(0,0,0,0.06); transition:background 0.2s; }
  .media-card:hover .play-btn-overlay { background:rgba(0,0,0,0.22); }
  .play-btn-overlay svg { width:52px; height:52px; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.35)); transition:transform 0.15s; }
  .media-card:hover .play-btn-overlay svg { transform:scale(1.1); }

  /* ── LIGHTBOX ── */
  #lightbox { display:none; position:fixed; inset:0; z-index:1000; background:rgba(16,14,12,0.95); flex-direction:column; align-items:center; justify-content:center; }
  #lightbox.open { display:flex; }
  #lb-img-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
  #lb-img { max-width:92vw; max-height:80vh; object-fit:contain; border-radius:10px; transition:transform 0.25s; box-shadow:0 16px 64px rgba(0,0,0,0.5); }
  #lb-caption { color:#fff; font-size:0.875rem; margin-top:1rem; text-align:center; opacity:0.85; max-width:80vw; font-weight:600; }
  #lb-counter { color:rgba(255,255,255,0.4); font-size:0.72rem; margin-top:0.35rem; letter-spacing:0.05em; }
  .lb-btn { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); color:#fff; font-size:2rem; width:52px; height:72px; cursor:pointer; border-radius:14px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  .lb-btn:hover { background:rgba(255,255,255,0.22); transform:translateY(-50%) scale(1.05); }
  #lb-prev { left:12px; }
  #lb-next { right:12px; }
  #lb-close { position:fixed; top:16px; right:16px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); color:#fff; font-size:1.2rem; width:42px; height:42px; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  #lb-close:hover { background:rgba(255,255,255,0.28); }
  #lb-rotate { position:fixed; top:16px; right:70px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); color:#fff; font-size:1.1rem; width:42px; height:42px; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  #lb-rotate:hover { background:rgba(255,255,255,0.28); }
  #lb-video-wrap { display:none; }
  #lb-iframe { width:min(88vw,854px); height:min(49.5vw,480px); border:none; border-radius:10px; box-shadow:0 16px 64px rgba(0,0,0,0.5); }

  /* ── TOUCH OPTIMIZATION (global) ── */
  button, .nav-btn, .media-card, .lb-btn { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  .media-card { user-select:none; -webkit-user-select:none; }
  .section-nav-inner { touch-action:pan-x; }
  #lightbox { touch-action:pan-y pinch-zoom; }

  @media (hover:none) {
    .media-card:hover { transform:none; box-shadow:var(--shadow-card); }
    .media-card:hover .play-btn-overlay { background:rgba(0,0,0,0.06); }
  }

  /* ── RESPONSIVE ── */
  @media (max-width:600px) {
    .hero { padding:1rem 1rem; }
    .hero h2 { font-size:1.2rem; }
    .hero p { font-size:0.82rem; line-height:1.5; }
    .header-inner { padding:0 0.875rem; height:52px; }
    .header-brand-text h1 { font-size:0.88rem; }
    .section-nav { padding:7px 0.875rem; top:52px; }
    .main-content { padding:1rem 0.875rem; }
    .section-title { margin-bottom:1.1rem; padding-bottom:0.75rem; }
    .section-icon-badge { width:38px; height:38px; font-size:1.1rem; border-radius:10px; }
    .section-title h2 { font-size:1.1rem; }
    .section-title p { font-size:0.72rem; }
    .subsection { margin-bottom:1rem; }
    .subsection--video,.subsection--photo { padding:0.875rem 0.875rem 1rem; }
    /* Photo: 2-col; Video: full-width for readable 16:9 thumbnails */
    .media-grid { grid-template-columns:1fr 1fr; gap:0.6rem; }
    .subsection--video .media-grid { grid-template-columns:1fr; gap:0.625rem; }
    /* Bigger play button for touch */
    .play-btn-overlay svg { width:62px; height:62px; }
    /* Card text */
    .media-card-name { font-size:0.875rem; }
    .subsection--video .media-card-name { font-size:1rem; }
    .media-card-body { padding:0.55rem 0.7rem 0.6rem; }
    /* Nav pills */
    .nav-btn { padding:9px 12px; min-height:42px; font-size:0.8rem; }
    /* Lightbox image */
    #lb-img { max-width:100vw; max-height:62vh; border-radius:6px; }
    #lb-iframe { width:100vw; height:56.25vw; border-radius:0; }
    #lb-caption { font-size:0.82rem; margin-top:0.625rem; max-width:90vw; }
    #lb-counter { margin-top:0.2rem; }
    /* Nav arrows moved to bottom center — easy thumb reach */
    .lb-btn { top:auto; transform:none; bottom:2rem; width:58px; height:58px; font-size:1.9rem; border-radius:50%; }
    .lb-btn:active { transform:scale(0.93); }
    #lb-prev { left:calc(50% - 68px); right:auto; }
    #lb-next { right:auto; left:calc(50% + 10px); }
    /* Close/rotate: bigger touch targets */
    #lb-close { width:48px; height:48px; font-size:1.3rem; top:12px; right:12px; }
    #lb-rotate { width:48px; height:48px; font-size:1.2rem; top:12px; right:68px; }
  }
  @media (max-width:400px) {
    .media-grid { grid-template-columns:1fr 1fr; gap:0.5rem; }
    .media-card-name { font-size:0.82rem; }
    .subsection--video .media-card-name { font-size:0.95rem; }
    .hero h2 { font-size:1.1rem; }
    .header-brand-text h1 { font-size:0.82rem; }
  }