/* =========================================================
   ReelHunter / pages/search-history.css
   Page layer: search history, keyword search sessions,
   analyzed Reel history, generated scripts history.
   Page tokens
========================================================= */

    :root{
      --page-bg:#edf2f8;
      --page-bg-2:#f7f9fc;

      --card:#ffffff;
      --border:#d9e1ea;
      --border-strong:#c9d3df;

      --text:#0f172a;
      --muted:#64748b;

      --primary:#615fff;
      --primary-2:#8a63ff;
      --primary-3:#4f46e5;

      --shadow-sm:0 8px 22px rgba(15,23,42,.05);
      --shadow-md:0 16px 40px rgba(15,23,42,.08);
      --shadow-lg:0 24px 60px rgba(15,23,42,.12);

      --sidebar-glass:rgba(255,255,255,.52);
      --sidebar-glass-2:rgba(255,255,255,.34);
      --sidebar-stroke:rgba(255,255,255,.52);

      --editor-bg:#fffdf8;
      --editor-bg-2:#fffaf1;
      --editor-stroke:#e8ddd0;

      --success:#0f9f6e;
      --warning:#d97706;
      --danger:#dc2626;

      --rm-bg: #f8fafc;
    --rm-card: #ffffff;
    --rm-border: #e2e8f0;
    --rm-text: #0f172a;
    --rm-muted: #64748b;
    --rm-soft: #f1f5f9;
    --rm-primary: #4f46e5;
    --rm-primary-2: #6366f1;
    --rm-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    --rm-success: #16a34a;
    }

    *{ box-sizing:border-box; }

    html,body{
      margin:0;
      padding:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      color:var(--text);
      background:linear-gradient(180deg, var(--editor-bg) 0%, var(--editor-bg-2) 100%);
    }

    button,a,input{ font:inherit; }

    .workspace-shell{
      min-height:100vh;
      display:grid;
      grid-template-columns:248px 1fr;
      align-items:start;
    }

    .app-sidebar {
      width:248px;
      min-height:100vh;
      position:sticky;
      top:0;
      padding:16px 12px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      border-right:1px solid rgba(201,211,223,.7);
      background:linear-gradient(180deg, var(--sidebar-glass) 0%, var(--sidebar-glass-2) 100%);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      box-shadow:inset -1px 0 0 rgba(255,255,255,.55), 12px 0 40px rgba(15,23,42,.03);
    }

    .app-sidebar__top { display:flex; flex-direction:column; gap:18px; }

    .app-sidebar__brand {
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:74px;
      border-radius:22px;
      text-decoration:none;
      padding:10px;
      background:rgba(255,255,255,.6);
      border:1px solid var(--sidebar-stroke);
      box-shadow:var(--shadow-sm);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
    }

    .app-sidebar__logo {
      max-width:170px;
      width:100%;
      height:auto;
      display:block;
      object-fit:contain;
    }

    .app-sidebar__nav-wrap { display:flex; flex-direction:column; gap:18px; }
    .app-sidebar__section { display:flex; flex-direction:column; gap:8px; }

    .app-sidebar__label {
      padding:0 10px;
      font-size:11px;
      line-height:1;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#8a99a6;
    }

    .app-sidebar__nav { display:flex; flex-direction:column; gap:5px; }

    .app-sidebar__item {
      position:relative;
      display:flex;
      align-items:center;
      gap:10px;
      min-height:42px;
      padding:0 12px;
      border-radius:14px;
      text-decoration:none;
      color:#516774;
      font-size:14px;
      font-weight:700;
      transition:background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
      border:1px solid transparent;
    }

    .app-sidebar__item:hover {
      background:rgba(255,255,255,.62);
      color:#1f2c35;
      box-shadow:0 10px 24px rgba(15,23,42,.05);
      border-color:rgba(255,255,255,.46);
      transform:translateY(-1px);
    }

    .app-sidebar__item.is-active {
      background:linear-gradient(135deg, rgba(97,95,255,.16), rgba(138,99,255,.10));
      color:#2e3eea;
      box-shadow:0 12px 26px rgba(97,95,255,.10), inset 0 0 0 1px rgba(97,95,255,.08);
      border-color:rgba(97,95,255,.14);
    }

    .app-sidebar__item.is-active::before {
      content:"";
      position:absolute;
      left:0;
      top:8px;
      bottom:8px;
      width:4px;
      border-radius:999px;
      background:linear-gradient(180deg, #615fff 0%, #8a63ff 100%);
    }

    .app-sidebar__icon {
      width:18px;
      height:18px;
      flex:0 0 18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:currentColor;
    }

    .app-sidebar__icon svg { width:18px; height:18px; display:block; }

    .app-sidebar__bottom {
      display:flex;
      flex-direction:column;
      gap:12px;
      padding-top:16px;
    }

    .sidebar-card,
    .sidebar-profile {
      border-radius:20px;
      border:1px solid rgba(255,255,255,.58);
      background:rgba(255,255,255,.62);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      box-shadow:var(--shadow-sm);
    }

    .sidebar-card { padding:14px; }

    .sidebar-card__row {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }

    .sidebar-card__left { display:flex; align-items:center; gap:8px; min-width:0; }
    .sidebar-card__left-icon {
      width:20px;
      height:20px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#615fff;
    }

    .sidebar-card__left-icon svg { width:18px; height:18px; display:block; }
    .sidebar-card__title { font-size:13px; font-weight:700; color:#536876; white-space:nowrap; }
    .sidebar-card__value { font-size:18px; line-height:1; font-weight:900; color:#0f172a; }

    .sidebar-progress {
      height:8px;
      border-radius:999px;
      background:#e7ecf2;
      overflow:hidden;
    }

    .sidebar-progress__fill {
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, #615fff 0%, #2f55ff 100%);
    }

    .sidebar-card__meta { margin-top:8px; font-size:12px; color:#8b99a5; }

    .sidebar-card__link {
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-top:12px;
      text-decoration:none;
      font-size:13px;
      font-weight:800;
      color:#2a3dff;
    }

    .sidebar-profile {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
    }

    .sidebar-profile__left { display:flex; align-items:center; gap:10px; }

    .sidebar-profile__avatar {
      width:36px;
      height:36px;
      flex:0 0 36px;
      border-radius:999px;
      background:linear-gradient(135deg, #d9deff 0%, #eef1ff 100%);
      color:#2639d8;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      font-size:14px;
    }

    .sidebar-profile__name {
      font-size:14px;
      line-height:1.2;
      font-weight:800;
      color:#1f2b33;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .sidebar-profile__sub { margin-top:2px; font-size:12px; line-height:1.2; color:#8b99a5; }

    .sidebar-profile__action {
      width:36px;
      height:36px;
      flex:0 0 36px;
      border:0;
      border-radius:12px;
      background:#f4f7fa;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#607481;
      cursor:pointer;
      transition:transform .15s ease, background .15s ease;
    }

    .sidebar-profile__action:hover{ transform:translateY(-1px); background:#eef3f8; }
    .sidebar-profile__action svg { min-height:18px; min-width:18px; }

    .main-workspace{
      min-width:0;
      padding:20px;
      background:linear-gradient(180deg, var(--editor-bg) 0%, var(--editor-bg-2) 100%);
    }

    .page-stack{
      display:grid;
      gap:18px;
      max-width:1280px;
    }

    .hero-card,
    .section-card{
      border:1px solid var(--editor-stroke);
      border-radius:28px;
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,244,.96));
      box-shadow:var(--shadow-lg);
      overflow:hidden;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }

    .hero-card{
      background:
        radial-gradient(circle at top right, rgba(97,95,255,.10), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,244,.96));
    }

    .hero-card__inner,
    .section-card__body{
      padding:28px 30px 30px;
    }

    .section-card__header{
      padding:24px 30px 16px;
      border-bottom:1px solid #ece2d7;
      background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(253,247,239,.78));
    }

    .eyebrow{
      margin-bottom:8px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }

    .hero-title{
      margin:0;
      font-size:40px;
      line-height:1.02;
      letter-spacing:-.04em;
      font-weight:900;
      max-width:860px;
    }

    .hero-subtitle,
    .section-subtitle{
      margin:12px 0 0;
      color:var(--muted);
      font-size:15px;
      line-height:1.65;
      max-width:820px;
    }

    .hero-stats{
      margin-top:22px;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
    }

    .hero-stat{
      border:1px solid #eadfd3;
      border-radius:20px;
      padding:16px;
      background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,250,245,.94));
      box-shadow:0 8px 22px rgba(15,23,42,.04);
    }

    .hero-stat__label{
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#8a7d70;
      margin-bottom:8px;
    }

    .hero-stat__value{
      font-size:30px;
      line-height:1;
      letter-spacing:-.03em;
      font-weight:900;
      color:#122033;
    }

    .hero-stat__sub{
      margin-top:8px;
      font-size:12px;
      line-height:1.45;
      color:#7d8c9d;
    }

    .history-tabs{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }

    .history-tab{
      min-height:42px;
      padding:0 16px;
      border-radius:999px;
      border:1px solid var(--editor-stroke);
      background:rgba(255,255,255,.84);
      color:var(--text);
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    }

    .history-tab:hover{
      transform:translateY(-1px);
      box-shadow:0 8px 18px rgba(15,23,42,.06);
    }

    .history-tab.is-active{
      background:linear-gradient(135deg,var(--primary),var(--primary-2));
      color:#fff;
      border-color:transparent;
      box-shadow:0 10px 20px rgba(97,95,255,.18);
    }

    .toolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:18px;
    }

    .toolbar-left,
    .toolbar-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .search-input{
      min-width:260px;
      min-height:42px;
      border-radius:14px;
      border:1px solid #e2d7c8;
      outline:none;
      padding:0 14px;
      background:linear-gradient(180deg, #fffefc, #fffdfa);
      color:#1e293b;
      font-size:14px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
    }

    .search-input:focus{
      border-color:rgba(97,95,255,.36);
      box-shadow:0 0 0 5px rgba(97,95,255,.08);
    }

    .ghost-btn,
    .primary-btn,
    .mini-btn{
      min-height:42px;
      padding:0 14px;
      border-radius:14px;
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    }

    .ghost-btn,
    .mini-btn{
      border:1px solid var(--border-strong);
      background:#fff;
      color:var(--text);
    }

    .primary-btn{
      border:0;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#fff;
      box-shadow:0 10px 22px rgba(97,95,255,.18);
    }

    .ghost-btn:hover,
    .primary-btn:hover,
    .mini-btn:hover{
      transform:translateY(-1px);
      box-shadow:0 8px 18px rgba(15,23,42,.07);
    }

    .history-panel{ display:none; }
    .history-panel.is-active{ display:block; }

    .history-list{
      display:grid;
      gap:12px;
    }

    .history-row{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:16px;
      align-items:center;
      padding:16px;
      border:1px solid #eadfd3;
      border-radius:22px;
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,250,245,.95));
      box-shadow:0 8px 22px rgba(15,23,42,.04);
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
      position: relative;
    }

    .history-row:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(15,23,42,.06);
      border-color:rgba(97,95,255,.16);
    }

    .history-row--media{
      grid-template-columns:72px minmax(0,1fr) auto;
    }

    .thumb{
      width:72px;
      height:96px;
      border-radius:18px;
      overflow:hidden;
      position:relative;
      background:
        radial-gradient(circle at top, rgba(97,95,255,.14), transparent 30%),
        linear-gradient(180deg, #1a1e2d 0%, #10131f 100%);
      box-shadow:0 14px 28px rgba(15,23,42,.12);
    }

    .thumb__play{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
    }

    .thumb__play svg{
      width:28px;
      height:28px;
      display:block;
      filter:drop-shadow(0 8px 18px rgba(0,0,0,.2));
    }

    .row-main{ min-width:0; }

    .row-top{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:6px;
    }

    .row-title{
      font-size:15px;
      line-height:1.45;
      font-weight:800;
      color:#122033;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .row-badge{
      min-height:24px;
      padding:0 9px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      font-size:11px;
      font-weight:900;
      letter-spacing:.04em;
      text-transform:uppercase;
      color:#4d46d6;
      background:rgba(97,95,255,.08);
      border:1px solid rgba(97,95,255,.10);
    }

    .row-badge--success{
      color:#0b7a53;
      background:rgba(15,159,110,.10);
      border-color:rgba(15,159,110,.14);
    }

    .row-badge--warning{
      color:#9a5a00;
      background:rgba(217,119,6,.10);
      border-color:rgba(217,119,6,.14);
    }

    .row-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px 12px;
      font-size:12px;
      color:#738397;
      margin-top:6px;
    }

    .row-sub{
      margin-top:8px;
      font-size:13px;
      line-height:1.6;
      color:#5f7085;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .row-actions{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
      margin-right: 55px;
    }

    .mini-btn{
      min-height:38px;
      padding:0 12px;
      border-radius:12px;
    }

    .mini-btn--primary{
      border-color:transparent;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#fff;
      box-shadow:0 10px 22px rgba(97,95,255,.16);
    }

    .empty-state{
      padding:34px 24px;
      text-align:center;
      border:1px dashed #e2d7c8;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,251,244,.82));
    }

    .empty-state__icon{
      width:64px;
      height:64px;
      margin:0 auto 14px;
      border-radius:22px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg, rgba(97,95,255,.10), rgba(138,99,255,.10));
      color:#5a54ea;
      box-shadow:0 14px 28px rgba(97,95,255,.10);
    }

    .empty-state__icon svg{ width:26px; height:26px; display:block; }
    .empty-state__title{ font-size:22px; line-height:1.15; font-weight:900; color:#142033; }

    .empty-state__text{
      margin:10px auto 0;
      max-width:560px;
      font-size:14px;
      line-height:1.7;
      color:#748395;
    }

    .toast{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:10000;
      background:#111827;
      color:#fff;
      padding:12px 14px;
      border-radius:12px;
      box-shadow:0 12px 30px rgba(0,0,0,.22);
      font-weight:700;
      opacity:0;
      transform:translateY(8px);
      pointer-events:none;
      transition:opacity .18s ease, transform .18s ease;
    }

    .toast.is-visible{ opacity:1; transform:translateY(0); }

    .reel-row{
      display:grid;
      grid-template-columns:72px minmax(0, 1fr) auto;
      gap:14px;
      align-items:center;
      padding:14px;
      border:1px solid #eadfd3;
      border-radius:22px;
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,250,245,.95));
      box-shadow:0 8px 22px rgba(15,23,42,.04);
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }

    .reel-row:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(15,23,42,.06);
      border-color:rgba(97,95,255,.16);
    }

    .reel-thumb{
      width:72px;
      height:96px;
      border-radius:18px;
      overflow:hidden;
      position:relative;
      background:
        radial-gradient(circle at top, rgba(97,95,255,.14), transparent 30%),
        linear-gradient(180deg, #1a1e2d 0%, #10131f 100%);
      box-shadow:0 14px 28px rgba(15,23,42,.12);
    }

    .reel-thumb__play{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
    }

    .reel-thumb__play svg{
      width:28px;
      height:28px;
      display:block;
      filter:drop-shadow(0 8px 18px rgba(0,0,0,.2));
    }

    .reel-content{
      min-width:0;
    }

    .reel-top{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:6px;
    }

    .reel-user{
      font-size:13px;
      font-weight:900;
      color:#1f3043;
    }

    .reel-badge{
      min-height:24px;
      padding:0 9px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      font-size:11px;
      font-weight:900;
      letter-spacing:.04em;
      text-transform:uppercase;
      color:#4d46d6;
      background:rgba(97,95,255,.08);
      border:1px solid rgba(97,95,255,.10);
    }

    .reel-title{
      font-size:15px;
      line-height:1.45;
      font-weight:800;
      color:#122033;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .reel-meta{
      margin-top:6px;
      display:flex;
      flex-wrap:wrap;
      gap:8px 12px;
      font-size:12px;
      color:#738397;
    }

    .reel-url{
      margin-top:8px;
      font-size:12px;
      color:#5e6f84;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .reel-actions{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
      margin-right: 55px;
    }

    .mini-btn{
      min-height:38px;
      padding:0 12px;
      border-radius:12px;
      border:1px solid #ddd5cb;
      background:#fff;
      color:#1d2a39;
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }

    .mini-btn:hover{
      transform:translateY(-1px);
      box-shadow:0 8px 18px rgba(15,23,42,.06);
      border-color:rgba(97,95,255,.16);
    }

    .mini-btn--primary{
      border-color:transparent;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#fff;
      box-shadow:0 10px 22px rgba(97,95,255,.16);
    }

    @media (max-width: 1180px){
      .workspace-shell{ grid-template-columns:1fr; }
      .app-sidebar{
        width:100%;
        min-height:auto;
        position:static;
        border-right:0;
        border-bottom:1px solid var(--border);
      }
    }

    @media (max-width: 960px){
      .hero-stats{ grid-template-columns:1fr; }
      .history-row,
      .history-row--media{ grid-template-columns:1fr; }
      .row-actions{ justify-content:flex-start; }
    }

    @media (max-width: 860px) {
      .reel-row{
        grid-template-columns:72px minmax(0,1fr);
      }

      .reel-actions{
        grid-column:1 / -1;
        justify-content:flex-start;
        padding-top:4px;
      }
    }

    @media (max-width: 760px){
      .main-workspace{ padding:14px; }
      .hero-card__inner,
      .section-card__header,
      .section-card__body{ padding-left:20px; padding-right:20px; }
      .hero-title{ font-size:28px; }
      .toolbar{ align-items:stretch; }
      .toolbar-left,
      .toolbar-right{ width:100%; }
      .search-input{ min-width:0; width:100%; }
    }

    .reel-modal{
      position:fixed;
      inset:0;
      z-index:9999;
    }

    .reel-modal__backdrop{
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 20% 10%, rgba(91,92,240,.18), transparent 26%),
        radial-gradient(circle at 82% 0%, rgba(124,58,237,.14), transparent 22%),
        rgba(15,23,42,.28);
      backdrop-filter:blur(16px) saturate(130%);
      animation:fadeIn .35s ease;
    }

    .reel-modal__dialog{
      position:relative;
      width:min(1520px, 96vw);
      height:min(940px, 95vh);
      margin:2.5vh auto;
      border-radius:30px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.45);
      background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,255,.96));
      box-shadow:var(--shadow-lg);
      animation:modalIn .42s cubic-bezier(.2,.9,.2,1);
      isolation:isolate;
    }

    .reel-modal__dialog::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at top left, rgba(91,92,240,.10), transparent 22%),
        radial-gradient(circle at bottom right, rgba(124,58,237,.06), transparent 20%);
      pointer-events:none;
    }

    .reel-modal__dialog::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
      pointer-events:none;
    }

    .reel-modal__close{
      position:absolute;
      top:16px;
      right:16px;
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.78);
      color:var(--text);
      font-size:24px;
      cursor:pointer;
      z-index:30;
      backdrop-filter:blur(10px);
      transition:transform var(--tr), background var(--tr), border-color var(--tr), box-shadow var(--tr);
      box-shadow:var(--shadow-xs);
    }

    .reel-modal__close:hover{
      transform:translateY(-1px);
      background:#fff;
      border-color:var(--border-strong);
      box-shadow:0 16px 32px rgba(15,23,42,.10);
    }

    .rm-layout{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:390px minmax(0, 1fr);
      height:100%;
      min-height:0;
    }

    .rm-left,
    .rm-right{
      min-height:0;
    }

    .rm-left{
      position:relative;
      padding:22px;
      overflow:auto;
      border-right:1px solid rgba(255,255,255,.06);
      background:
        radial-gradient(circle at top left, rgba(91,92,240,.18), transparent 26%),
        linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
    }

    .rm-left::after{
      content:"";
      position:absolute;
      top:0;
      right:0;
      width:1px;
      height:100%;
      background:linear-gradient(180deg, transparent, rgba(255,255,255,.10), transparent);
      pointer-events:none;
    }

    .rm-left-sticky{
      position:sticky;
      top:0;
      display:flex;
      flex-direction:column;
      gap:16px;
    }

    .rm-left-topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .rm-eyebrow,
    .rm-top-meta-label,
    .rm-subtitle,
    .rm-kpi__label,
    .rm-meta-pill__label{
      font-size:11px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
    }

    .rm-left-topbar__label,
    .rm-block-title,
    .rm-left-caption-label{
      font-size:11px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(226,232,240,.70);
    }

    .rm-left-profile-card,
    .rm-left-stats-card,
    .rm-left-caption-card,
    .rm-card,
    .rm-hero-card{
      position:relative;
      overflow:hidden;
      border:1px solid var(--border);
      box-shadow:var(--shadow-sm);
      backdrop-filter:blur(12px);
    }

    .rm-card,
    .rm-hero-card{
      background:var(--card-soft);
    }

    .rm-left-profile-card,
    .rm-left-stats-card,
    .rm-left-caption-card{
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 14px 30px rgba(0,0,0,.22);
    }

    .rm-left-profile-card::before,
    .rm-left-stats-card::before,
    .rm-left-caption-card::before,
    .rm-card::before,
    .rm-hero-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%);
      pointer-events:none;
    }

    .rm-video-link-wrap{
      display:block;
      text-decoration:none;
    }

    .rm-left-frame{
      position:relative;
      padding:14px;
      border-radius:28px;
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 24px 52px rgba(0,0,0,.28);
      transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
      overflow:hidden;
    }

    .rm-left-frame::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at top left, rgba(91,92,240,.18), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%);
      pointer-events:none;
    }

    .rm-video-link-wrap:hover .rm-left-frame{
      transform:translateY(-2px);
      border-color:rgba(99,102,241,.22);
      box-shadow:0 28px 60px rgba(0,0,0,.34), 0 0 0 4px rgba(91,92,240,.06);
    }

    .rm-reel{
      position:relative;
      border-radius:22px;
      overflow:hidden;
      background:#000;
      aspect-ratio:9/16;
      width:100%;
      box-shadow:0 18px 40px rgba(0,0,0,.22);
    }

    .rm-reel::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 20%, transparent 70%, rgba(0,0,0,.12));
      pointer-events:none;
    }

    .rm-reel video{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      background:#000;
    }

    .rm-left-info{
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .rm-left-profile-card,
    .rm-left-stats-card,
    .rm-left-caption-card{
      padding:16px;
      border-radius:20px;
    }

    .rm-left-profile{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .rm-left-avatar{
      width:50px;
      height:50px;
      flex:0 0 50px;
      border-radius:999px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 28%),
        linear-gradient(135deg, #5b5cf0 0%, #7c3aed 55%, #4f46e5 100%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px rgba(91,92,240,.22);
    }

    .rm-left-profile-text{
      min-width:0;
    }

    .rm-left-username{
      font-weight:800;
      font-size:18px;
      line-height:1.15;
      letter-spacing:-.025em;
      color:#f8fafc;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .rm-left-date{
      margin-top:4px;
      font-size:12px;
      color:rgba(203,213,225,.72);
    }

    .rm-open-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:36px;
      padding:0 13px;
      border-radius:999px;
      text-decoration:none;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.09);
      color:#f8fafc;
      font-size:12px;
      font-weight:700;
      transition:transform var(--tr), border-color var(--tr), background var(--tr), box-shadow var(--tr), color var(--tr);
      box-shadow:0 8px 20px rgba(0,0,0,.16);
      white-space:nowrap;
    }

    .rm-open-link:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.16);
      color:#c7d2fe;
      box-shadow:0 14px 28px rgba(0,0,0,.24);
    }

    .rm-open-link__icon{
      width:16px;
      height:16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:0 0 16px;
    }

    .rm-left-stats-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin-top: 10px;
    }

    .rm-stat{
      display:flex;
      align-items:flex-start;
      gap:10px;
      min-height:76px;
      padding:13px 14px;
      border-radius:18px;
      transition:transform var(--tr), border-color var(--tr), background var(--tr), box-shadow var(--tr);
    }

    .rm-left .rm-stat{
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.07);
    }

    .rm-left .rm-stat:hover{
      transform:translateY(-1px);
      border-color:rgba(99,102,241,.18);
      background:rgba(255,255,255,.08);
      box-shadow:0 14px 26px rgba(0,0,0,.20);
    }

    .rm-stat__icon{
      width:18px;
      height:18px;
      flex:0 0 18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-top:1px;
    }

    .rm-left .rm-stat__icon{
      color:#818cf8;
    }

    .rm-left .rm-stat__label{
      font-size:11px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(226,232,240,.58);
    }

    .rm-left .rm-stat__value{
      font-size:19px;
      line-height:1.1;
      font-weight:800;
      color:#f8fafc;
      letter-spacing:-.03em;
      word-break:break-word;
    }

    .rm-left-caption-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }

    .rm-left-caption-toggle,
    .rm-link-btn{
      border:0;
      background:transparent;
      font-size:12px;
      font-weight:800;
      cursor:pointer;
      padding:0;
      transition:opacity var(--tr), transform var(--tr), color var(--tr);
    }

    .rm-link-btn{
      color:var(--primary);
    }

    .rm-link-btn:hover{
      opacity:.92;
      color:#4338ca;
      transform:translateY(-1px);
    }

    .rm-left-caption{
      font-size:13px;
      line-height:1.65;
      white-space:pre-wrap;
      color:#cbd5e1;
      word-break:break-word;
      position:relative;
    }

    .rm-left-caption.is-collapsed{
      max-height:92px;
      overflow:hidden;
    }

    .rm-left-caption.is-collapsed::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:38px;
      background:linear-gradient(to bottom, rgba(15,23,42,0), rgba(15,23,42,1));
      pointer-events:none;
    }

    .rm-left-caption-toggle{
      color:#a5b4fc;
    }

    .rm-left-caption-toggle:hover{
      opacity:.92;
      color:#c7d2fe;
      transform:translateY(-1px);
    }

    .rm-right{
      position:relative;
      padding:22px;
      overflow-y:auto;
      overflow-x:hidden;
      background:
        radial-gradient(circle at top right, rgba(91,92,240,.05), transparent 22%),
        radial-gradient(circle at 82% 14%, rgba(124,58,237,.04), transparent 18%),
        linear-gradient(180deg, rgba(248,251,255,.82), rgba(245,248,252,.96));
      scrollbar-width:thin;
      scrollbar-color:rgba(148,163,184,.45) transparent;
    }

    .rm-right::-webkit-scrollbar,
    .rm-left::-webkit-scrollbar{
      width:10px;
    }

    .rm-right::-webkit-scrollbar-track,
    .rm-left::-webkit-scrollbar-track{
      background:transparent;
    }

    .rm-right::-webkit-scrollbar-thumb,
    .rm-left::-webkit-scrollbar-thumb{
      background:rgba(148,163,184,.42);
      border-radius:999px;
      border:2px solid transparent;
      background-clip:padding-box;
    }

    .rm-appbar{
      position:sticky;
      top:-22px;
      z-index:8;
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:0 0 16px;
      padding-top:22px;
      margin-bottom:18px;
      background:linear-gradient(180deg, rgba(248,251,255,.95), rgba(248,251,255,.82));
      backdrop-filter:blur(16px) saturate(135%);
      border-bottom:1px solid rgba(148,163,184,.08);
    }

    .rm-appbar__top{
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-start;
    }

    .rm-appbar__title{
      margin:6px 0 0;
      font-size:30px;
      line-height:1.02;
      font-weight:900;
      letter-spacing:-.05em;
      color:var(--text);
    }

    .rm-header-actions{
      display:flex;
      margin-right:58px;
      gap:8px;
      justify-content:flex-end;
      flex-wrap:wrap;
      position:relative;
    }

    .rm-toolbar-btn,
    .rm-primary-btn,
    .reel-modal__lock-btn,
    .rm-icon-btn{
      appearance:none;
      border:0;
      cursor:pointer;
      transition:transform var(--tr), box-shadow var(--tr), opacity var(--tr), border-color var(--tr), background var(--tr), color var(--tr);
    }

    .rm-toolbar-btn,
    .rm-icon-btn{
      border:1px solid var(--border);
      background:rgba(255,255,255,.78);
      min-height:42px;
      padding:0 14px;
      border-radius:14px;
      font-weight:800;
      color:var(--text);
      box-shadow:var(--shadow-xs);
      backdrop-filter:blur(10px);
    }

    .rm-icon-btn{
      width:42px;
      padding:0;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:0 0 42px;
    }

    .rm-toolbar-btn:hover,
    .rm-icon-btn:hover{
      transform:translateY(-1px);
      background:#fff;
      border-color:var(--border-strong);
      box-shadow:0 14px 26px rgba(15,23,42,.08);
    }

    .rm-primary-btn,
    .reel-modal__lock-btn{
      position:relative;
      overflow:hidden;
      min-height:42px;
      padding:0 16px;
      border-radius:14px;
      font-weight:800;
      font-size:14px;
      color:#fff;
      background:linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 55%, var(--primary-3) 100%);
      box-shadow:0 18px 38px rgba(91,92,240,.22), inset 0 1px 0 rgba(255,255,255,.18);
    }

    .rm-primary-btn::before,
    .reel-modal__lock-btn::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.18) 50%, transparent 75%);
      transform:translateX(-130%);
      transition:transform .8s ease;
    }

    .rm-primary-btn:hover,
    .reel-modal__lock-btn:hover{
      transform:translateY(-1px);
      box-shadow:0 24px 42px rgba(91,92,240,.28), inset 0 1px 0 rgba(255,255,255,.18);
    }

    .rm-primary-btn:hover::before,
    .reel-modal__lock-btn:hover::before{
      transform:translateX(130%);
    }

    .rm-menu{
      position:relative;
    }

    .rm-menu__dropdown{
      position:absolute;
      top:calc(100% + 8px);
      right:0;
      min-width:180px;
      padding:8px;
      border-radius:16px;
      background:rgba(255,255,255,.96);
      border:1px solid var(--border);
      box-shadow:0 22px 50px rgba(15,23,42,.14);
      z-index:20;
      animation:fadeUp .18s ease;
    }

    .rm-menu__item{
      width:100%;
      border:0;
      background:transparent;
      color:var(--text);
      min-height:40px;
      border-radius:12px;
      padding:0 12px;
      text-align:left;
      font-weight:700;
      cursor:pointer;
      transition:background var(--tr), color var(--tr);
    }

    .rm-menu__item:hover{
      background:rgba(91,92,240,.08);
      color:var(--primary);
    }

    .rm-tabs-wrap{
      display:flex;
      align-items:center;
      justify-content:flex-start;
    }

    .rm-tabs{
      display:inline-flex;
      flex-wrap:wrap;
      gap:8px;
      padding:7px;
      border-radius:18px;
      background:rgba(255,255,255,.70);
      border:1px solid var(--border);
      box-shadow:var(--shadow-xs);
      backdrop-filter:blur(10px);
    }

    .rm-tab{
      border:1px solid transparent;
      background:transparent;
      color:var(--muted);
      min-height:40px;
      padding:0 14px;
      border-radius:13px;
      cursor:pointer;
      font-weight:800;
      font-size:13px;
      transition:transform var(--tr), color var(--tr), background var(--tr), box-shadow var(--tr), border-color var(--tr);
    }

    .rm-tab:hover{
      color:var(--text);
      background:rgba(15,23,42,.04);
    }

    .rm-tab.is-active{
      color:#fff;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      border-color:transparent;
      box-shadow:0 12px 24px rgba(91,92,240,.20);
      transform:translateY(-1px);
    }

    .rm-panels{ position:relative; }

    .rm-panel{
      display:none;
      animation:fadeUp .32s ease;
    }

    .rm-panel.is-active{ display:block; }

    .rm-section{ margin-top:18px; }

    .rm-grid-2{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }

    .rm-card{
      padding:20px;
      border-radius:22px;
    }

    .rm-hero-card{
      padding:22px;
      border-radius:24px;
      background:
        radial-gradient(circle at top right, rgba(91,92,240,.08), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.94));
    }

    .rm-empty-state__badge,
    .reel-modal__lock-badge{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:0 12px;
      border-radius:999px;
      background:rgba(91,92,240,.10);
      color:#4f46e5;
      font-size:12px;
      font-weight:800;
      margin-bottom:14px;
      border:1px solid rgba(91,92,240,.10);
    }

    .rm-hero-main{
      display:grid;
      grid-template-columns:1fr 280px;
      gap:18px;
      align-items:start;
      margin-bottom:18px;
    }

    .rm-top-meta-item{ margin-bottom:14px; }

    .rm-topic{
      font-weight:900;
      font-size:34px;
      line-height:1.06;
      color:var(--text);
      letter-spacing:-.05em;
      max-width:18ch;
    }

    .rm-meta-line{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .rm-meta-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:38px;
      padding:0 12px;
      border-radius:999px;
      background:rgba(255,255,255,.80);
      border:1px solid var(--border);
      color:var(--text);
      font-size:13px;
      font-weight:800;
      box-shadow:var(--shadow-xs);
    }

    .rm-hero-summary-inline{
      margin-top:16px;
      padding:15px 16px;
      border-radius:18px;
      background:rgba(91,92,240,.06);
      border:1px solid rgba(91,92,240,.10);
      color:var(--text-soft);
      line-height:1.68;
      font-size:14px;
    }

    .rm-score-card{
      background:linear-gradient(180deg, #111827 0%, #0f172a 100%);
      color:#fff;
      border-radius:22px;
      padding:18px;
      min-height:100%;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      gap:18px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 22px 44px rgba(15,23,42,.14);
      border:1px solid rgba(255,255,255,.05);
    }

    .rm-score-label{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.10em;
      opacity:.72;
      font-weight:800;
    }

    .rm-score-topline{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:14px;
    }

    .rm-score-value-wrap{
      display:flex;
      align-items:flex-end;
      gap:6px;
    }

    .rm-score-value{
      font-size:58px;
      line-height:1;
      font-weight:900;
      letter-spacing:-.05em;
      margin:0;
    }

    .rm-score-total{
      font-size:16px;
      line-height:1.2;
      font-weight:700;
      color:rgba(255,255,255,.58);
      padding-bottom:8px;
    }

    .rm-score-badge{
      min-height:32px;
      padding:0 12px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight:800;
      background:rgba(255,255,255,.10);
      color:#fff;
      border:1px solid rgba(255,255,255,.10);
      white-space:nowrap;
    }

    .rm-rating-scale{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .rm-rating-scale__track{
      position:relative;
      height:14px;
      border-radius:999px;
      background:
        linear-gradient(90deg,
          #ef4444 0%,
          #f59e0b 35%,
          #eab308 55%,
          #22c55e 78%,
          #16a34a 100%);
      overflow:visible;
      box-shadow:
        inset 0 1px 2px rgba(0,0,0,.18),
        0 8px 22px rgba(0,0,0,.16);
    }

    .rm-rating-scale__fill{
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:50%;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
      mix-blend-mode:screen;
      pointer-events:none;
    }

    .rm-rating-scale__marker{
      position:absolute;
      top:50%;
      left:50%;
      width:20px;
      height:20px;
      border-radius:999px;
      background:#fff;
      border:4px solid #0f172a;
      transform:translate(-50%, -50%);
      box-shadow:0 6px 18px rgba(0,0,0,.28);
      transition:left .55s cubic-bezier(.2,.8,.2,1);
    }

    .rm-rating-scale__labels{
      display:flex;
      justify-content:space-between;
      gap:12px;
      font-size:11px;
      font-weight:700;
      color:rgba(255,255,255,.68);
    }

    .rm-progress-wrap{
      width:100%;
      margin-top:8px;
    }

    .rm-progress-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:8px;
      font-size:12px;
      color:rgba(255,255,255,.74);
      font-weight:700;
    }

    .rm-progress{
      position:relative;
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
      box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
    }

    .rm-progress__bar{
      position:absolute;
      inset:0 auto 0 0;
      width:82%;
      border-radius:999px;
      background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--primary-3));
      box-shadow:0 0 18px rgba(91,92,240,.30);
      transition:width .55s cubic-bezier(.2,.8,.2,1);
    }

    .rm-score-caption{
      font-size:13px;
      line-height:1.45;
      color:rgba(255,255,255,.82);
    }

    .rm-kpis{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:12px;
      margin-bottom:18px;
    }

    .rm-kpi{
      background:rgba(255,255,255,.72);
      border:1px solid rgba(148,163,184,.12);
      border-radius:18px;
      padding:14px;
      transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr), background var(--tr);
      box-shadow:var(--shadow-xs);
    }

    .rm-kpi:hover{
      transform:translateY(-1px);
      border-color:rgba(91,92,240,.14);
      background:#fff;
      box-shadow:0 14px 28px rgba(15,23,42,.06);
    }

    .rm-kpi__value{
      font-size:19px;
      font-weight:900;
      color:var(--text);
      letter-spacing:-.03em;
    }

    .rm-subgrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }

    .rm-chips{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top: 10px;
    }

    .rm-chip{
      display:inline-flex;
      align-items:center;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      font-weight:800;
      font-size:13px;
      border:1px solid rgba(148,163,184,.12);
      background:rgba(255,255,255,.82);
      color:var(--text);
      box-shadow:var(--shadow-xs);
      transition:transform var(--tr), box-shadow var(--tr), background var(--tr);
    }

    .rm-chip:hover{
      transform:translateY(-1px);
      background:#fff;
      box-shadow:0 10px 22px rgba(15,23,42,.06);
    }

    .rm-chip--violet{ background:rgba(109,40,217,.10); border-color:rgba(109,40,217,.14); color:#6b21a8; }
    .rm-chip--green{ background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.14); color:#166534; }
    .rm-chip--amber{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.16); color:#92400e; }

    .rm-section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
      flex-wrap:wrap;
    }

    .rm-section-title{
      margin:0 0 12px;
      font-weight:900;
      font-size:19px;
      color:var(--text);
      letter-spacing:-.03em;
    }

    .rm-summary-box,
    .rm-highlight-box,
    .rm-transcript,
    .rm-list-card,
    .rm-timeline-content,
    .rm-mini{
      background:rgba(255,255,255,.72);
      border:1px solid rgba(148,163,184,.12);
      border-radius:18px;
      box-shadow:var(--shadow-xs);
    }

    .rm-summary-box,
    .rm-highlight-box{
      padding:16px 18px;
      color:var(--text-soft);
      line-height:1.68;
      white-space:pre-wrap;
      font-size:14px;
    }

    .rm-highlight-box{
      background:linear-gradient(135deg, rgba(91,92,240,.10), rgba(255,255,255,.82));
      color:#1e293b;
      font-weight:700;
    }

    .rm-transcript{
      padding:16px 18px;
      color:var(--text-soft);
      line-height:1.72;
      font-size:15px;
      white-space:pre-wrap;
      position:relative;
      background:#fff;
    }

    .rm-transcript.is-collapsed{
      max-height:220px;
      overflow:hidden;
    }

    .rm-transcript.is-collapsed::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:56px;
      background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    }

    .rm-transcript-toolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:14px;
    }

    .rm-subtabs{
      display:inline-flex;
      gap:8px;
      padding:6px;
      border-radius:14px;
      background:rgba(241,245,249,.92);
      border:1px solid rgba(148,163,184,.14);
    }

    .rm-subtab{
      border:1px solid transparent;
      background:transparent;
      min-height:36px;
      padding:0 12px;
      border-radius:10px;
      font-weight:800;
      font-size:13px;
      color:var(--muted);
      cursor:pointer;
      transition:all var(--tr);
    }

    .rm-subtab:hover{
      background:rgba(15,23,42,.04);
      color:var(--text);
    }

    .rm-subtab.is-active{
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#fff;
      box-shadow:0 10px 20px rgba(91,92,240,.18);
    }

    .rm-transcript-actions{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }

    .rm-timeline{
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .rm-timeline-item{
      display:grid;
      grid-template-columns:84px 1fr;
      gap:12px;
      align-items:start;
    }

    .rm-time{
      position:relative;
      top:10px;
      font-size:12px;
      font-weight:800;
      color:var(--muted);
    }

    .rm-timeline-content{
      padding:15px 16px;
      transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr), background var(--tr);
    }

    .rm-timeline-content:hover,
    .rm-mini:hover{
      transform:translateY(-1px);
      border-color:rgba(91,92,240,.14);
      background:#fff;
      box-shadow:0 14px 28px rgba(15,23,42,.06);
    }

    .rm-badge{
      display:inline-flex;
      align-items:center;
      height:24px;
      padding:0 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      background:rgba(91,92,240,.10);
      color:#4f46e5;
      margin-bottom:8px;
      border:1px solid rgba(91,92,240,.10);
    }

    .rm-timeline-title{
      font-weight:900;
      font-size:18px;
      color:var(--text);
      margin-bottom:8px;
      letter-spacing:-.03em;
    }

    .rm-timeline-text{
      color:var(--text-soft);
      line-height:1.56;
    }

    .rm-stat-grid{
      display:grid;
      gap:12px;
    }

    .rm-mini{
      padding:14px 16px;
      transition:transform var(--tr), border-color var(--tr), box-shadow var(--tr), background var(--tr);
      background:rgba(255,255,255,.72);
    }

    .rm-mini-title{
      font-weight:900;
      margin-bottom:8px;
      color:var(--text);
      font-size:15px;
      letter-spacing:-.02em;
    }

    .rm-mini-body{
      color:var(--text-soft);
      white-space:pre-wrap;
      line-height:1.58;
      font-size:14px;
    }

    .rm-list-card{
      padding:16px 18px;
      line-height:1.68;
      color:var(--text-soft);
      font-size:14px;
    }

    #rmRepl,
    #rmTactics{
      white-space:unset;
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    #rmTactics > div,
    #rmRepl > div{
      position:relative;
      padding-left:18px;
    }

    #rmTactics > div::before,
    #rmRepl > div::before{
      content:"";
      position:absolute;
      left:0;
      top:.72em;
      width:7px;
      height:7px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow:0 0 0 4px rgba(91,92,240,.08);
    }

    .reel-modal__lock{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:12;
      padding:20px;
    }

    .reel-modal__lock::before{
      content:"";
      position:absolute;
      inset:0;
      backdrop-filter:blur(16px) saturate(120%);
      background:linear-gradient(180deg, rgba(248,251,255,.58), rgba(248,251,255,.74));
    }

    .reel-modal__lock-card{
      position:relative;
      width:min(490px, 96%);
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.96));
      border-radius:28px;
      padding:28px;
      box-shadow:var(--shadow-lg);
      border:1px solid rgba(255,255,255,.65);
      text-align:center;
      animation:fadeUp .4s ease;
    }

    .reel-modal__lock-title{
      font-weight:900;
      font-size:22px;
      margin-bottom:8px;
      letter-spacing:-.04em;
      color:var(--text);
    }

    .reel-modal__lock-sub{
      color:var(--text-soft);
      margin-bottom:16px;
      line-height:1.65;
      font-size:14px;
    }

    .reel-modal__lock-btn{
      width:100%;
      min-height:48px;
      border-radius:16px;
      font-size:14px;
    }

    .reel-modal__lock-btn:disabled{
      opacity:.65;
      cursor:not-allowed;
    }

    .reel-modal__pill{
      background:rgba(255,255,255,.18);
      padding:2px 8px;
      border-radius:999px;
      margin-left:8px;
    }

    .reel-modal__lock-note{
      margin-top:10px;
      color:var(--danger);
      font-size:13px;
      line-height:1.45;
      min-height:18px;
    }

    .reel-modal__loader{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      background:rgba(15,23,42,.96);
      color:#fff;
      padding:12px 16px;
      border-radius:14px;
      z-index:14;
      font-weight:800;
      box-shadow:0 18px 40px rgba(15,23,42,.18);
      letter-spacing:-.01em;
      border:1px solid rgba(255,255,255,.08);
    }

    .reel-modal__loader::before{
      content:"";
      display:inline-block;
      width:14px;
      height:14px;
      margin-right:10px;
      border-radius:999px;
      border:2px solid rgba(255,255,255,.26);
      border-top-color:#fff;
      vertical-align:-2px;
      animation:spin 1s linear infinite;
    }

    .reel-modal__lock[hidden]{
    display:none !important;
  }

    .rm-right.is-locked{
      overflow:hidden !important;
    }

    .rm-skeleton{
      position:absolute;
      inset:0;
      padding:160px 20px 20px;
      background:rgba(248,251,255,.72);
      backdrop-filter:blur(8px);
      z-index:11;
      overflow:hidden;
    }

    .rm-skeleton-card{
      background:rgba(255,255,255,.82);
      border:1px solid rgba(255,255,255,.65);
      border-radius:22px;
      box-shadow:var(--shadow-sm);
      padding:18px;
      margin-bottom:16px;
    }

    .rm-skeleton-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }

    .rm-skel{
      position:relative;
      overflow:hidden;
      border-radius:12px;
      background:linear-gradient(90deg, #e8edf5, #f4f7fb, #e8edf5);
      background-size:200% 100%;
      animation:shimmerBg 1.5s linear infinite;
    }

    .rm-skel::after{
      content:"";
      position:absolute;
      inset:0;
      transform:translateX(-100%);
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
      animation:shimmer 1.25s infinite;
    }

    .rm-skel--title{
      width:38%;
      height:22px;
      margin-bottom:14px;
    }

    .rm-skel--line{
      height:14px;
      margin-bottom:10px;
    }

    .rm-skel--line.short{
      width:62%;
    }

    .rm-skel--box{
      height:120px;
    }

    .rm-toast{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:10000;
      background:rgba(15,23,42,.96);
      color:#fff;
      padding:12px 14px;
      border-radius:14px;
      box-shadow:0 18px 40px rgba(15,23,42,.18);
      font-weight:800;
      border:1px solid rgba(255,255,255,.08);
      animation:toastIn .28s ease;
    }

    @keyframes spin{ to{ transform:rotate(360deg);} }
    @keyframes shimmer{ 100%{ transform:translateX(100%);} }
    @keyframes shimmerBg{ 100%{ background-position:-200% 0;} }

    @keyframes fadeIn{
      from{ opacity:0; }
      to{ opacity:1; }
    }

    @keyframes modalIn{
      from{
        opacity:0;
        transform:translateY(18px) scale(.985);
      }
      to{
        opacity:1;
        transform:translateY(0) scale(1);
      }
    }

    @keyframes fadeUp{
      from{
        opacity:0;
        transform:translateY(10px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    @keyframes toastIn{
      from{
        opacity:0;
        transform:translateY(8px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    @media (max-width: 1180px){
      .rm-layout{
        grid-template-columns:350px 1fr;
      }

      .rm-hero-main{
        grid-template-columns:1fr;
      }

      .rm-kpis{
        grid-template-columns:repeat(2, 1fr);
      }

      .rm-grid-2,
      .rm-subgrid,
      .rm-skeleton-grid{
        grid-template-columns:1fr;
      }

      .rm-topic{
        max-width:unset;
      }
    }

    @media (max-width: 980px){
      .reel-modal__dialog{
        width:95vw;
        height:93vh;
        margin:3.5vh auto;
        border-radius:24px;
      }

      .rm-layout{
        grid-template-columns:1fr;
        grid-template-rows:auto minmax(0, 1fr);
      }

      .rm-left{
        padding-bottom:10px;
        overflow:hidden;
        border-right:0;
        border-bottom:1px solid rgba(148,163,184,.10);
      }

      .rm-left-sticky{
        position:static;
      }

      .rm-right{
        padding:16px;
      }

      .rm-reel{
        max-height:38vh;
      }

      .rm-appbar__top{
        flex-direction:column;
        align-items:stretch;
      }

      .rm-header-actions{
        justify-content:flex-start;
        width:100%;
        margin-right:0;
      }

      .rm-appbar__title{
        font-size:24px;
      }

      .rm-topic{
        font-size:26px;
      }

      .rm-timeline-item{
        grid-template-columns:1fr;
        gap:8px;
      }

      .rm-time{
        top:0;
      }

      .rm-skeleton{
        padding:200px 16px 16px;
      }
    }

    @media (max-width: 640px){
      .demo-wrap{
        padding:20px;
      }

      .reel-modal__dialog{
        width:100vw;
        height:100vh;
        margin:0;
        border-radius:0;
      }

      .rm-left,
      .rm-right{
        padding:14px;
      }

      .rm-kpis{
        grid-template-columns:1fr;
      }

      .rm-tabs{
        width:100%;
      }

      .rm-tab{
        flex:1 1 calc(50% - 8px);
        text-align:center;
      }

      .rm-left-stats-grid{
        grid-template-columns:1fr 1fr;
      }

      .rm-appbar{
        top:-14px;
      }

      .reel-modal__close{
        top:12px;
        right:12px;
      }

      .rm-transcript-toolbar{
        align-items:stretch;
      }

      .rm-subtabs,
      .rm-transcript-actions{
        width:100%;
      }

      .rm-transcript-actions{
        justify-content:flex-start;
      }
    }

    @media (prefers-reduced-motion: reduce){
      *,
      *::before,
      *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
      }
    }

    .history-row,
.reel-row {
  will-change: transform, opacity;
}

.history-row.is-new,
.reel-row.is-new {
  animation: historyReveal .45s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes historyReveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.history-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.js-load-more-history {
  transition: transform .18s ease, opacity .18s ease;
}

.js-load-more-history:hover {
  transform: translateY(-1px);
}

.js-load-more-history.is-loading {
  opacity: .65;
  pointer-events: none;
  transform: scale(.98);
}

.history-list {
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

.history-list.is-searching {
  opacity: .45;
  transform: translateY(6px);
  filter: blur(3px);
  pointer-events: none;
}

.history-list.is-search-ready .history-row,
.history-list.is-search-ready .reel-row {
  animation: searchResultReveal .38s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes searchResultReveal {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.99);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

#historySearchInput.is-searching {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .16);
}

.favorite-btn {
  /* width: 34px; */
  /* height: 34px; */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  /* top: 10px;
  right: 10px; */
  /* border-radius: 999px; */
  font-size: 24px;
  width: 55px;
  top: 0;
  bottom: 0;
  right: 0;
  border: none;
  border-top-right-radius: 22px;
  border-end-end-radius: 22px;
  /* border: 1px solid rgba(50,50,50,.12); */
  background: rgba(70,70,70,.06);
  color: rgba(80,80,80,.45);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease;
}

.favorite-btn:hover {
  transform: translateY(-1px) scale(1.04);
  color: #facc15;
  background: rgba(250,204,21,.12);
}

.favorite-btn.is-active {
  color: #facc15;
  background: rgba(250,204,21,.16);
  border-color: rgba(250,204,21,.28);
}

/* =========================================================
   HISTORY PAGE RESPONSIVE PATCH
   Insert at the VERY END of the existing <style>
========================================================= */

:root{
  --tr:.18s ease;
  --shadow-xs:0 6px 16px rgba(15,23,42,.05);
  --card-soft:rgba(255,255,255,.78);
  --text-soft:#475569;
}

html{
  -webkit-text-size-adjust:100%;
}

body{
  overflow-x:hidden;
}

img,
video{
  max-width:100%;
}

.workspace-shell,
.main-workspace,
.page-stack,
.hero-card,
.section-card,
.history-row,
.reel-row,
.reel-modal__dialog,
.rm-layout,
.rm-left,
.rm-right{
  min-width:0;
}

.main-workspace{
  padding:clamp(14px, 2vw, 30px);
}

.page-stack{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
}

.hero-title{
  font-size:clamp(28px, 3.2vw, 46px);
}

.hero-card__inner,
.section-card__body{
  padding:clamp(20px, 2.3vw, 34px);
}

.section-card__header{
  padding:clamp(20px, 2vw, 30px) clamp(20px, 2.3vw, 34px) 16px;
}

/* Large monitors */
@media (min-width:1600px){
  .workspace-shell{
    grid-template-columns:280px minmax(0, 1fr);
  }

  .app-sidebar{
    width:280px;
  }

  .page-stack{
    max-width:1480px;
  }

  .hero-stats{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .reel-modal__dialog{
    width:min(1680px, 96vw);
    height:min(1000px, 94vh);
  }

  .rm-layout{
    grid-template-columns:420px minmax(0, 1fr);
  }
}

/* Small laptops: keep sidebar on left */
@media (min-width:1025px) and (max-width:1180px){
  .workspace-shell{
    grid-template-columns:220px minmax(0, 1fr) !important;
  }

  .app-sidebar{
    width:220px !important;
    min-height:100vh !important;
    position:sticky !important;
    top:0 !important;
    border-right:1px solid rgba(201,211,223,.7) !important;
    border-bottom:0 !important;
  }

  .app-sidebar__brand{
    min-height:64px;
  }

  .app-sidebar__logo{
    max-width:145px;
  }

  .app-sidebar__item{
    min-height:40px;
    padding-inline:10px;
    font-size:13px;
  }

  .sidebar-card{
    padding:12px;
  }

  .hero-stats{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }

  .history-row--media,
  .reel-row{
    grid-template-columns:64px minmax(0,1fr) auto;
  }

  .thumb,
  .reel-thumb{
    width:64px;
    height:86px;
  }
}

/* =========================================================
   MOBILE SIDEBAR DRAWER
========================================================= */

.mobile-appbar,
.mobile-sidebar-backdrop,
.app-sidebar__mobile-close{
  display:none;
}

@media (max-width:1024px){
  body.mobile-nav-open{
    overflow:hidden;
  }

  .workspace-shell{
    display:block !important;
    min-height:100vh;
  }

  .mobile-appbar{
    position:sticky;
    top:0;
    z-index:3000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:64px;
    padding:10px 14px;
    border-bottom:1px solid rgba(201,211,223,.72);
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 12px 32px rgba(15,23,42,.06);
  }

  .mobile-appbar__brand{
    display:flex;
    align-items:center;
    min-width:0;
    text-decoration:none;
  }

  .mobile-appbar__logo{
    display:block;
    width:auto;
    max-width:132px;
    max-height:34px;
    object-fit:contain;
  }

  .mobile-appbar__right{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
  }

  .mobile-token-pill{
    min-height:40px;
    padding:6px 12px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:8px;
    background:linear-gradient(135deg, rgba(97,95,255,.10), rgba(138,99,255,.08));
    border:1px solid rgba(97,95,255,.14);
    box-shadow:0 8px 20px rgba(97,95,255,.08);
  }

  .mobile-token-pill__label{
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#64748b;
  }

  .mobile-token-pill__value{
    min-width:18px;
    font-size:15px;
    line-height:1;
    font-weight:900;
    color:#302fd8;
    text-align:right;
  }

  .mobile-menu-btn{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border:1px solid rgba(201,211,223,.9);
    border-radius:14px;
    background:#fff;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(15,23,42,.06);
  }

  .mobile-menu-btn span{
    width:18px;
    height:2px;
    border-radius:999px;
    background:#0f172a;
    display:block;
    transition:transform .18s ease, opacity .18s ease;
  }

  body.mobile-nav-open .mobile-menu-btn span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }

  body.mobile-nav-open .mobile-menu-btn span:nth-child(2){
    opacity:0;
  }

  body.mobile-nav-open .mobile-menu-btn span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }

  .mobile-sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:3900;
    display:block;
    background:rgba(15,23,42,.34);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }

  .mobile-sidebar-backdrop[hidden]{
    display:none !important;
  }

  body.mobile-nav-open .mobile-sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .app-sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    z-index:4000 !important;

    width:min(340px, calc(100vw - 28px)) !important;
    height:100dvh !important;
    min-height:100dvh !important;

    padding:14px !important;
    padding-top:54px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;

    border-right:1px solid rgba(201,211,223,.88) !important;
    border-bottom:0 !important;
    border-radius:0 26px 26px 0;

    background:
      radial-gradient(circle at top right, rgba(97,95,255,.12), transparent 28%),
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,251,244,.96)) !important;

    box-shadow:26px 0 70px rgba(15,23,42,.18) !important;
    backdrop-filter:blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(140%) !important;

    overflow-y:auto !important;
    transform:translateX(-108%);
    transition:transform .24s cubic-bezier(.16, 1, .3, 1);
  }

  body.mobile-nav-open .app-sidebar{
    transform:translateX(0);
  }

  .app-sidebar__mobile-close{
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    border:1px solid rgba(201,211,223,.9);
    border-radius:13px;
    background:#fff;
    color:#0f172a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(15,23,42,.06);
  }

  .app-sidebar__top{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:18px !important;
  }

  .app-sidebar__brand{
    min-height:62px !important;
    justify-content:center !important;
    border-radius:20px !important;
  }

  .app-sidebar__logo{
    max-width:150px !important;
  }

  .app-sidebar__nav-wrap{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    overflow:visible !important;
    padding-bottom:0 !important;
  }

  .app-sidebar__section{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }

  .app-sidebar__label{
    display:block !important;
    padding:0 10px !important;
    font-size:11px !important;
  }

  .app-sidebar__nav{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
  }

  .app-sidebar__item{
    min-height:44px !important;
    padding:0 12px !important;
    border-radius:15px !important;
    font-size:14px !important;
    white-space:normal !important;
  }

  .app-sidebar__item.is-active::before{
    left:0 !important;
    top:9px !important;
    bottom:9px !important;
    width:4px !important;
    height:auto !important;
    right:auto !important;
  }

  .app-sidebar__bottom{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    padding-top:18px !important;
    margin-top:auto !important;
  }

  .app-sidebar .sidebar-card{
    display:block !important;
    padding:14px !important;
    border-radius:20px !important;
  }

  .app-sidebar .sidebar-card__row{
    display:flex !important;
    margin-bottom:10px !important;
  }

  .app-sidebar .sidebar-progress,
  .app-sidebar .sidebar-card__meta,
  .app-sidebar .sidebar-card__link{
    display:block !important;
  }

  .app-sidebar .sidebar-card__link{
    display:inline-flex !important;
  }

  .app-sidebar .sidebar-profile{
    display:flex !important;
    width:100% !important;
    padding:10px 12px !important;
    border-radius:20px !important;
  }

  .main-workspace{
    padding-top:14px !important;
  }
}

/* =========================================================
   HISTORY PAGE CONTENT RESPONSIVE
========================================================= */

@media (max-width:960px){
  .hero-stats{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .hero-stat{
    padding:14px;
  }

  .hero-stat__value{
    font-size:26px;
  }

  .toolbar{
    align-items:stretch;
  }

  .toolbar-left,
  .toolbar-right{
    width:100%;
  }

  .toolbar-left{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
  }

  .toolbar-right{
    justify-content:flex-start;
  }

  .search-input{
    min-width:0;
    width:100%;
  }

  .history-row{
    grid-template-columns:minmax(0, 1fr);
    gap:12px;
  }

  .history-row--media,
  .reel-row{
    grid-template-columns:72px minmax(0, 1fr);
  }

  .row-actions,
  .reel-actions{
    grid-column:1 / -1;
    justify-content:flex-start;
    margin-right:0 !important;
    padding-top:2px;
  }
}

@media (max-width:760px){
  .main-workspace{
    padding:12px !important;
  }

  .page-stack{
    gap:12px;
  }

  .hero-card,
  .section-card{
    border-radius:22px;
  }

  .hero-card__inner,
  .section-card__header,
  .section-card__body{
    padding:18px !important;
  }

  .hero-title{
    font-size:28px;
    letter-spacing:-.035em;
  }

  .hero-subtitle,
  .section-subtitle{
    font-size:14px;
    line-height:1.55;
  }

  .hero-stats{
    grid-template-columns:1fr;
    gap:10px;
  }

  .hero-stat{
    border-radius:18px;
  }

  .history-tabs{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .history-tab{
    width:100%;
    min-height:42px;
  }

  .toolbar-left,
  .toolbar-right{
    display:grid;
    grid-template-columns:1fr;
  }

  .toolbar-left > *,
  .toolbar-right > *{
    width:100%;
  }

  .ghost-btn,
  .primary-btn,
  .mini-btn{
    width:100%;
    justify-content:center;
  }

  .history-row,
  .reel-row{
    border-radius:18px;
  }

  .history-row--media,
  .reel-row{
    grid-template-columns:58px minmax(0, 1fr);
    gap:10px;
    align-items:start;
    padding:12px 54px 12px 12px;
  }

  .history-row:not(.history-row--media){
    padding:12px 54px 12px 12px;
  }

  .thumb,
  .reel-thumb{
    width:58px;
    height:78px;
    border-radius:14px;
  }

  .thumb__play svg,
  .reel-thumb__play svg{
    width:22px;
    height:22px;
  }

  .row-title,
  .reel-title{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  .row-sub,
  .reel-url{
    white-space:normal;
    overflow-wrap:anywhere;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  .row-actions,
  .reel-actions{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    width:100%;
  }

  .favorite-btn{
    width:44px;
    border-top-right-radius:18px;
    border-end-end-radius:18px;
    font-size:21px;
  }

  .empty-state{
    padding:26px 16px;
    border-radius:20px;
  }

  .empty-state__icon{
    width:54px;
    height:54px;
    border-radius:18px;
  }

  .empty-state__title{
    font-size:20px;
  }

  .toast,
  .rm-toast{
    left:10px;
    right:10px;
    bottom:10px;
    text-align:center;
  }
}

@media (max-width:520px){
  .mobile-appbar{
    min-height:58px;
    padding:8px 10px;
  }

  .mobile-appbar__logo{
    max-width:118px;
    max-height:30px;
  }

  .mobile-token-pill{
    min-height:38px;
    padding:5px 10px;
    gap:6px;
  }

  .mobile-token-pill__label{
    display:none;
  }

  .mobile-token-pill__value{
    font-size:14px;
  }

  .mobile-menu-btn{
    width:40px;
    height:40px;
    flex-basis:40px;
    border-radius:13px;
  }

  .app-sidebar{
    width:min(326px, calc(100vw - 18px)) !important;
    border-radius:0 22px 22px 0;
  }

  .hero-title{
    font-size:25px;
  }

  .hero-stat__value{
    font-size:24px;
  }

  .row-meta,
  .reel-meta{
    gap:6px 10px;
  }
}

/* =========================================================
   MODAL RESPONSIVE FIXES
========================================================= */

.rm-tabs-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.rm-tabs-wrap::-webkit-scrollbar{
  display:none;
}

.rm-tabs{
  flex-wrap:nowrap;
  min-width:max-content;
}

.rm-tab{
  flex:0 0 auto;
  white-space:nowrap;
}

@media (max-width:980px){
  .reel-modal__dialog{
    width:96vw;
    height:94vh;
    margin:3vh auto;
    border-radius:24px;
  }

  .rm-layout{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0, 1fr);
  }

  .rm-left{
    max-height:42vh;
    overflow:auto;
    border-right:0;
    border-bottom:1px solid rgba(148,163,184,.12);
  }

  .rm-left-sticky{
    position:static;
    display:grid;
    grid-template-columns:minmax(190px, 260px) minmax(0, 1fr);
    grid-template-areas:
      "top top"
      "video info";
    align-items:start;
    gap:14px;
  }

  .rm-left-topbar{
    grid-area:top;
  }

  .rm-video-link-wrap{
    grid-area:video;
  }

  .rm-left-info{
    grid-area:info;
  }

  .rm-reel{
    max-height:34vh;
  }

  .rm-right{
    padding:16px;
  }

  .rm-appbar{
    top:-16px;
    padding-top:16px;
  }

  .rm-header-actions{
    margin-right:48px;
  }

  .rm-topic{
    max-width:none;
    font-size:clamp(24px, 4vw, 30px);
  }

  .rm-score-value{
    font-size:50px;
  }

  .rm-kpis{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .rm-grid-2,
  .rm-subgrid,
  .rm-skeleton-grid{
    grid-template-columns:1fr;
  }

  .rm-timeline-item{
    grid-template-columns:1fr;
  }

  .rm-time{
    top:0;
  }
}

@media (max-width:640px){
  .reel-modal__dialog{
    width:100vw;
    height:100vh;
    margin:0;
    border-radius:0;
  }

  .reel-modal__close{
    top:10px;
    right:10px;
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:22px;
  }

  .rm-left{
    max-height:45vh;
    padding:12px;
  }

  .rm-left-sticky{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .rm-left-topbar{
    padding-right:44px;
  }

  .rm-left-frame{
    padding:10px;
    border-radius:22px;
  }

  .rm-reel{
    max-height:30vh;
    border-radius:18px;
  }

  .rm-left-profile-card,
  .rm-left-stats-card,
  .rm-left-caption-card{
    padding:12px;
    border-radius:16px;
  }

  .rm-left-avatar{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .rm-left-username{
    font-size:16px;
  }

  .rm-left-stats-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .rm-stat{
    min-height:auto;
    padding:10px;
    border-radius:14px;
  }

  .rm-left .rm-stat__value{
    font-size:15px;
  }

  .rm-right{
    padding:12px;
  }

  .rm-appbar{
    top:-12px;
    padding-top:12px;
    margin-bottom:12px;
  }

  .rm-appbar__title{
    font-size:23px;
    padding-right:44px;
  }

  .rm-header-actions{
    margin-right:0;
    display:grid;
    grid-template-columns:1fr auto;
    width:100%;
  }

  .rm-primary-btn{
    width:100%;
    padding-inline:12px;
    font-size:13px;
  }

  .rm-toolbar-btn{
    min-width:74px;
    padding-inline:12px;
  }

  .rm-card,
  .rm-hero-card{
    padding:16px;
    border-radius:18px;
  }

  .rm-hero-main{
    grid-template-columns:1fr;
    gap:14px;
  }

  .rm-topic{
    font-size:24px;
  }

  .rm-meta-line{
    display:grid;
    grid-template-columns:1fr;
  }

  .rm-meta-pill{
    width:100%;
    justify-content:space-between;
  }

  .rm-score-card{
    border-radius:18px;
    padding:16px;
  }

  .rm-score-value{
    font-size:44px;
  }

  .rm-kpis{
    grid-template-columns:1fr;
    gap:10px;
  }

  .rm-transcript-toolbar{
    align-items:stretch;
  }

  .rm-subtabs{
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
  }

  .rm-subtabs::-webkit-scrollbar{
    display:none;
  }

  .rm-subtab{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .rm-transcript-actions{
    width:100%;
  }

  .rm-transcript-actions .rm-toolbar-btn{
    width:100%;
  }
}

@media (max-width:420px){
  .rm-left{
    max-height:48vh;
  }

  .rm-left-stats-grid{
    grid-template-columns:1fr;
  }

  .rm-header-actions{
    grid-template-columns:1fr;
  }

  .rm-toolbar-btn{
    width:100%;
  }

  .rm-score-topline{
    align-items:flex-start;
    flex-direction:column;
  }
}

.app-sidebar__item.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.app-sidebar__badge {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;   
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.12);
  white-space: nowrap;
}


.reel-thumb {
  position: relative;
  overflow: hidden;
  background: #111;
}

.reel-thumb__image,
.reel-thumb__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.reel-thumb__placeholder {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(135deg, #171717, #050505);
}

.reel-thumb__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, .18);
}

.reel-thumb__play svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
}

.mini-btn.js-analyze {
      display: flex;
      align-items: center;
    }


/* =========================================================
   TOKEN COST BADGES
   Search History paid actions
========================================================= */

.rm-primary-btn,
.reel-modal__lock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}

/* Keep content above the existing shine animation */
.action-label,
.action-cost {
  position: relative;
  z-index: 1;
}

.action-label {
  min-width: 0;
}

/* Token cost badge */
.action-cost {
  flex: 0 0 auto;

  min-height: 27px;
  padding: 0 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.15);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  color: #fff;

  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.01em;

  white-space: nowrap;
  pointer-events: none;
}

.action-cost__icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  display: block;
}

/* Disabled/loading states */
.rm-primary-btn:disabled,
.reel-modal__lock-btn:disabled {
  opacity: 0.68;
  cursor: not-allowed;
}

.rm-primary-btn:disabled .action-cost,
.reel-modal__lock-btn:disabled .action-cost {
  opacity: 0.72;
}

@media (max-width: 480px) {
  .rm-primary-btn,
  .reel-modal__lock-btn {
    gap: 7px;
  }

  .action-cost {
    min-height: 25px;
    padding-inline: 7px;
    font-size: 10px;
  }
}

/* Hide protected page until authentication is confirmed */
#searchHistoryApp[hidden] {
  display: none !important;
}