:root{
      --ig-border: #dbdbdb;
    }
    body{ background:#fff; }
    /* Topbar */
    .ig-topbar{ border-bottom:1px solid var(--ig-border); background:#fff; position:sticky; top:0; z-index:1030; }
    .ig-logo{ font-weight:700; letter-spacing:.2px; }
    .ig-topbar .form-control.form-control-sm{ min-height: 34px; }
    .search-container{ flex-grow:1; transition:all .3s ease; }
    .search-container.collapsed{ max-width:200px; }
    .search-container.expanded{ max-width:100%; }
    .search-container input{ width:100%; }
 

    /* Profile header */
    .profile-header{ padding:2rem 0; }
    .profile-avatar{ width: 100%; height:100%; max-width:160px;object-fit:cover; border-radius:50%; border:1px solid var(--ig-border); }
    @media (max-width: 576px){
      .profile-avatar{ width:96px; height:96px; }
      .profile-header{ padding:1.25rem 0; }
    }
    .profile-actions .btn{ padding:.375rem .75rem; }

    /* Stats */
    .profile-stats li{ margin-right:1.5rem; }
    .profile-stats b{ margin-right:.35rem; }

    /* Story highlights */
    .highlight-thumb{ width:88px; height:88px; border-radius:50%; object-fit:cover; border:1px solid var(--ig-border); padding:2px; background:#fff; }
    .highlight-title{ font-size:.85rem; margin-top:.35rem; }
    .highlights{ gap:1rem; }
    .highlights::-webkit-scrollbar{ height:8px; }
    .highlights::-webkit-scrollbar-thumb{ background:#ddd; border-radius:4px; }

    /* Tabs */
    .ig-tabs{ border-top:1px solid var(--ig-border); border-bottom:1px solid var(--ig-border); background:#fff; }
    .ig-tabs .nav-link{ color:#6c757d; font-weight:600; letter-spacing:.06em; }
    .ig-tabs .nav-link.active{ color:#212529; border-bottom:2px solid #212529; border-radius:0; }

    /* Grid */
    .post-tile{ position:relative; display:block; }
/*    .post-tile .overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:1rem; color:#fff; font-weight:600; opacity:0; transition:opacity .2s ease; background:rgba(0,0,0,.15); } */
    .post-tile .overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:right; gap:1rem; color:#fff; font-weight:600; }
/*    .post-tile:hover .overlay{ opacity:1; } */
   .post-tile .overlay span { background:rgba(0,0,0,.5);  border-radius:10%;padding:0em 0.2em;}
    .ratio-1x1{ background:#f8f9fa; }

    /* Modal / viewer */
    .viewer-img{ max-width:100%; max-height:100%; object-fit:contain; }
    .comment-box{ overflow:auto; border-bottom:1px solid var(--ig-border); }


    /* --- Modal adjustments for mobile --- */
    @media (max-width:576px){
      .modal-dialog{ margin:1rem; }
      .modal-content{ border-radius:.75rem; }
    }

    /* Footer */
    .ig-footer{ color:#8e8e8e; font-size:.85rem; }

    /* Utility */
    .text-truncate-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }


    .imagePreview {
    width: 100%;
    height: 180px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
    }


/* ===== awl-auth base ===== */
.awl-auth-panel{ position:fixed; inset:0; z-index:1050; display:none; }
.awl-auth-panel.is-open{ display:block; }
.awl-auth-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.3); opacity:0; transition:opacity .25s ease; }
.awl-auth-panel.is-open .awl-auth-backdrop{ opacity:1; }

/* カードは右上からスライド */
.awl-auth-card{
  position:absolute; top:8px; right:8px;
  width:min(92vw, 360px);
  max-height:calc(100vh - 16px);
  overflow:auto;
  background:#fff;
  border-radius:.5rem;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  transform:translateY(-10px);
  opacity:0;
  transition:transform .25s ease, opacity .25s ease;
  padding:14px 14px 16px;
}
.awl-auth-panel.is-open .awl-auth-card{ transform:none; opacity:1; }

.awl-auth-title{ margin:0 0 .5rem; }

.awl-auth-invalid{ display:none; color:#dc3545; font-size:.85rem; margin-top:.25rem; }
.awl-auth-input.is-invalid + .awl-auth-invalid{ display:block; }

/* ボタン風の×（Bootstrapがあれば .btn-close が効く） */
.awl-auth-close{
  position:absolute; top:6px; right:6px;
  background:transparent; border:0; width:32px; height:32px;
  opacity:.6; cursor:pointer;
}
.awl-auth-close:hover{ opacity:1; }

.awl-auth-view.d-none{ display:none !important; }
#awl-auth-message.d-none{ display:none !important; }

.awl-auth-feedback{ min-height:1.25rem; font-size:.9rem; }
.awl-auth-feedback.error{ color:#dc3545; }
.awl-auth-feedback.ok{ color:#198754; }

.awl-auth-feedback2{ min-height:1.25rem; font-size:.9rem; }
.awl-auth-feedback2.error{ color:#dc3545; }
.awl-auth-feedback2.ok{ color:#198754; }

/* ヘッダーのオーバーフローで切れないように */
header, .navbar, .navbar .container, .navbar .container-fluid{ overflow:visible; }