.gubaria-insta360-page {
  min-height: 100vh;
  color: #ecfdf5;
  background: radial-gradient(circle at 15% -10%, rgba(16, 185, 129, .17), transparent 38%), #020806;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.gubaria-insta360 { box-sizing: border-box; min-height: 100vh; padding-top: var(--gubaria-admin-bar-height); }
.gubaria-insta360 * { box-sizing: border-box; }
.insta360-operator-nav { display:flex; flex-wrap:wrap; gap:.65rem; max-width:1480px; margin:0 auto; padding:calc(env(safe-area-inset-top, 0px) + .8rem) clamp(1rem, 3vw, 2.5rem) 0; }
.insta360-operator-nav a, a[data-uncleven-insta360-nav="true"] { min-height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(110,231,183,.3); border-radius:.8rem; padding:.55rem .9rem; background:rgba(6,78,59,.22); color:#d1fae5; font-size:.82rem; font-weight:800; text-decoration:none; }
.insta360-operator-nav a[aria-current="page"], a[data-uncleven-insta360-nav="true"][aria-current="page"] { border-color:#6ee7b7; background:rgba(16,185,129,.24); }
.insta360-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: clamp(34px, 5vw, 72px) clamp(18px, 5vw, 72px) 34px; border-bottom: 1px solid rgba(110, 231, 183, .18); background: linear-gradient(125deg, rgba(6, 78, 59, .22), transparent 54%); }
.insta360-hero p, .insta360-card-title p { margin: 0 0 7px; color: #6ee7b7; font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.insta360-hero h1 { margin: 0; font: 900 clamp(2rem, 5vw, 4.7rem)/.95 Georgia, serif; letter-spacing: -.045em; }
.insta360-hero > div > span { display: block; margin-top: 14px; color: #a7c8b8; font-size: clamp(.92rem, 2vw, 1.08rem); }
.insta360-hero-badge { display: grid; min-width: 135px; place-items: center; border: 1px solid rgba(134, 239, 172, .34); border-radius: 20px; padding: 17px; background: rgba(6, 95, 70, .24); }
.insta360-hero-badge b { color: #86efac; font-size: 1.7rem; }.insta360-hero-badge small { color: #a7c8b8; }
.insta360-main { display: grid; gap: 22px; width: min(1180px, calc(100% - 30px)); margin: 0 auto; padding: 28px 0 72px; }
.insta360-notice { position: sticky; z-index: 20; top: calc(var(--gubaria-admin-bar-height) + 10px); border: 1px solid rgba(96, 165, 250, .45); border-radius: 14px; padding: 13px 16px; color: #dbeafe; background: rgba(23, 37, 84, .96); box-shadow: 0 14px 40px rgba(0, 0, 0, .3); font-weight: 750; }
.insta360-notice[data-kind="success"] { border-color: rgba(52, 211, 153, .45); color: #d1fae5; background: rgba(6, 78, 59, .96); }
.insta360-notice[data-kind="error"] { border-color: rgba(248, 113, 113, .5); color: #fee2e2; background: rgba(69, 10, 10, .97); }
.insta360-notice[data-kind="warning"] { border-color: rgba(251, 191, 36, .5); color: #fef3c7; background: rgba(69, 26, 3, .97); }
.insta360-card { border: 1px solid rgba(110, 231, 183, .2); border-radius: 24px; padding: clamp(18px, 3vw, 30px); background: rgba(5, 22, 16, .92); box-shadow: 0 22px 60px rgba(0, 0, 0, .2); }
.insta360-card-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.insta360-card-title h2 { margin: 0; font-size: clamp(1.2rem, 3vw, 1.75rem); }.insta360-card-title > span { border: 1px solid rgba(110, 231, 183, .24); border-radius: 999px; padding: 7px 11px; color: #a7f3d0; background: rgba(16, 185, 129, .08); font-size: .75rem; font-weight: 800; }
.insta360-help { margin: 0 0 18px; color: #a7c8b8; line-height: 1.65; }
.insta360-sdk-note { margin: 0 0 14px; border: 1px solid rgba(251, 191, 36, .32); border-radius: 12px; padding: 11px 13px; color: #fde68a; background: rgba(120, 53, 15, .18); font-size: .82rem; line-height: 1.55; }
.insta360-mode-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }.insta360-mode-picker label { cursor: pointer; }.insta360-mode-picker input { position: absolute; opacity: 0; }.insta360-mode-picker span { display: block; border: 1px solid rgba(110, 231, 183, .18); border-radius: 14px; padding: 13px 14px; background: rgba(2, 8, 6, .45); }.insta360-mode-picker b, .insta360-mode-picker small { display: block; }.insta360-mode-picker small { margin-top: 4px; color: #8fb4a2; }.insta360-mode-picker input:checked + span { border-color: #86efac; background: rgba(16, 185, 129, .13); box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .22); }
.insta360-mode-picker input:focus-visible + span, .insta360-audio input:focus-visible + i { outline: 3px solid rgba(110, 231, 183, .58); outline-offset: 3px; }.insta360-mode-picker input:disabled + span { cursor: not-allowed; opacity: .5; }
.insta360-drop { display: grid; min-height: 148px; place-items: center; align-content: center; border: 1.5px dashed rgba(110, 231, 183, .44); border-radius: 18px; padding: 24px; text-align: center; cursor: pointer; background: rgba(16, 185, 129, .045); transition: 160ms ease; }
.insta360-drop:hover, .insta360-drop:focus-within { border-color: #6ee7b7; background: rgba(16, 185, 129, .09); }.insta360-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }.insta360-drop strong { font-size: 1.08rem; }.insta360-drop span { margin-top: 7px; color: #8fb4a2; font-size: .84rem; }
.insta360-selected, .insta360-jobs { display: grid; gap: 10px; margin-top: 15px; }.insta360-empty { margin: 8px 0; color: #78998a; text-align: center; }
.insta360-selected { gap: 15px; }
.insta360-source-card { display: grid; gap: 13px; border: 1px solid rgba(110, 231, 183, .19); border-radius: 18px; padding: 15px; background: rgba(2, 8, 6, .42); }
.insta360-source-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.insta360-source-card > header > div:first-child span, .insta360-source-card > header > div:first-child small { display: block; }
.insta360-source-card > header > div:first-child span { color: #a7f3d0; font-size: .78rem; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.insta360-source-card > header > div:first-child small { margin-top: 3px; color: #78998a; }
.insta360-source-card > header > div:last-child { display: flex; gap: 6px; }
.insta360-source-card > header button { min-width: 40px; min-height: 38px; padding: 6px 9px; font-size: .74rem; }
.insta360-source-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.insta360-source-upload, .insta360-source-record { position: relative; display: grid; min-height: 76px; place-content: center; border: 1px dashed rgba(110, 231, 183, .34); border-radius: 13px; padding: 10px; text-align: center; cursor: pointer; background: rgba(16, 185, 129, .045); }
.insta360-source-upload:hover, .insta360-source-record:hover, .insta360-source-upload:focus-within, .insta360-source-record:focus-within { border-color: #6ee7b7; background: rgba(16, 185, 129, .09); }
.insta360-source-record.is-disabled { cursor: not-allowed; opacity: .56; }
.insta360-source-upload input, .insta360-source-record input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.insta360-source-upload strong, .insta360-source-upload small, .insta360-source-record strong, .insta360-source-record small { display: block; }
.insta360-source-upload small, .insta360-source-record small { margin-top: 4px; color: #8fb4a2; font-size: .7rem; }
.insta360-source-files, .insta360-preview-descriptions { display: grid; gap: 7px; }
.insta360-source-error { margin: 0; border-left: 3px solid #f87171; padding-left: 10px; color: #fecaca; font-size: .78rem; }
.insta360-add-video { width: 100%; margin-top: 14px; }
.insta360-file { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(110, 231, 183, .14); border-radius: 13px; padding: 11px 13px; background: rgba(2, 8, 6, .52); }.insta360-file span { min-width: 0; }.insta360-file strong, .insta360-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.insta360-file small { margin-top: 3px; color: #8fb4a2; }.insta360-file i { border-radius: 8px; padding: 6px 8px; color: #052e21; background: #86efac; font-size: .66rem; font-style: normal; font-weight: 950; }
.insta360-file-group { display: grid; gap: 7px; border: 1px solid rgba(110, 231, 183, .15); border-radius: 15px; padding: 9px; background: rgba(2, 8, 6, .24); }.insta360-file-group > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 2px; }.insta360-file-group > header > span { color: #a7f3d0; font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }.insta360-file-group > header > div { display: flex; gap: 5px; }.insta360-file-group > header button { min-width: 38px; min-height: 36px; padding: 5px 9px; font-size: .74rem; }
.insta360-upload-progress, .insta360-progress { overflow: hidden; height: 8px; margin-top: 16px; border-radius: 999px; background: #0d2b20; }.insta360-upload-progress i, .insta360-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #10b981, #bef264); transition: width 180ms ease; }.insta360-upload-copy { min-height: 20px; margin: 8px 0 0; color: #8fb4a2; font-size: .78rem; }
.insta360-actions, .insta360-job-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }
.gubaria-insta360 button { min-height: 44px; border: 1px solid #86efac; border-radius: 12px; padding: 9px 15px; color: #042d1f; background: #86efac; font: inherit; font-weight: 900; cursor: pointer; }.gubaria-insta360 button:hover:not(:disabled) { background: #bbf7d0; }.gubaria-insta360 button:disabled { cursor: not-allowed; opacity: .45; }.gubaria-insta360 button.secondary { border-color: rgba(110, 231, 183, .25); color: #c8ead9; background: rgba(16, 185, 129, .08); }.gubaria-insta360 button.danger { border-color: rgba(248, 113, 113, .45); color: #fecaca; background: rgba(127, 29, 29, .3); }.gubaria-insta360 button.ghost { margin-left: auto; }
.insta360-panorama { position: relative; overflow: hidden; border: 1px solid rgba(110, 231, 183, .28); border-radius: 18px; background: #020806; touch-action: none; }.insta360-panorama canvas { display: block; width: 100%; aspect-ratio: 16/9; cursor: grab; }.insta360-panorama canvas:active { cursor: grabbing; }.insta360-panorama-hint { position: absolute; right: 12px; bottom: 12px; border-radius: 999px; padding: 7px 10px; color: #d1fae5; background: rgba(2, 8, 6, .74); font-size: .72rem; font-weight: 750; pointer-events: none; }
.insta360-seek { display: grid; grid-template-columns: auto minmax(100px, 1fr) auto; align-items: center; gap: 12px; margin-top: 13px; }.insta360-seek input { width: 100%; accent-color: #86efac; }.insta360-seek span { color: #a7c8b8; font-variant-numeric: tabular-nums; }
.insta360-angle { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }.insta360-angle span { border: 1px solid rgba(110, 231, 183, .16); border-radius: 10px; padding: 8px 11px; color: #8fb4a2; background: rgba(2, 8, 6, .45); font-size: .78rem; }.insta360-angle i { font-style: normal; }.insta360-angle b { margin-left: 5px; color: #ecfdf5; font-variant-numeric: tabular-nums; }
.insta360-render-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 18px; margin-top: 25px; padding-top: 24px; border-top: 1px solid rgba(110, 231, 183, .15); }.insta360-description-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-weight: 900; }.insta360-description small { display: block; margin-top: 4px; color: #8fb4a2; font-weight: 500; }.insta360-description textarea { width: 100%; resize: vertical; border: 1px solid rgba(110, 231, 183, .25); border-radius: 14px; padding: 14px; color: #ecfdf5; background: #020b08; font: inherit; line-height: 1.55; }.insta360-description textarea:focus { border-color: #6ee7b7; outline: 3px solid rgba(16, 185, 129, .14); }
.insta360-render-options { display: grid; gap: 13px; }.insta360-render-options > div { display: grid; gap: 7px; }.insta360-render-options label { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(110, 231, 183, .15); border-radius: 12px; padding: 10px; cursor: pointer; }.insta360-render-options input { accent-color: #86efac; }.insta360-render-options label span, .insta360-render-options label small { display: block; }.insta360-render-options label small { margin-top: 3px; color: #8fb4a2; font-size: .72rem; }.insta360-audio { justify-content: space-between; }.insta360-audio input { position: absolute; opacity: 0; }.insta360-audio i { position: relative; width: 48px; height: 26px; border-radius: 999px; background: #29463a; }.insta360-audio i::after { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; content: ''; background: #a7c8b8; transition: 160ms ease; }.insta360-audio input:checked + i { background: #10b981; }.insta360-audio input:checked + i::after { left: 26px; background: white; }.insta360-voice { overflow-wrap: anywhere; margin: 0 !important; color: #8fb4a2; font-size: .72rem; }.insta360-voice code { color: #a7f3d0; }.insta360-render-button { width: 100%; margin-top: 18px; font-size: 1rem !important; }
.insta360-final-player { width: 100%; border: 1px solid rgba(110, 231, 183, .25); border-radius: 20px; background: #000; }
.insta360-job { border: 1px solid rgba(110, 231, 183, .14); border-radius: 16px; padding: 15px; background: rgba(2, 8, 6, .48); }.insta360-job-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.insta360-job-head div strong, .insta360-job-head div span { display: block; }.insta360-job-head div span { margin-top: 3px; color: #8fb4a2; font-size: .8rem; }.insta360-job-head > b { color: #86efac; font-variant-numeric: tabular-nums; }.insta360-job-files { margin: 9px 0 0; overflow: hidden; color: #78998a; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }.insta360-job-error { margin: 10px 0 0; color: #fecaca; }.insta360-cleanup { display: inline-block; margin-top: 10px; color: #fcd34d; font-size: .74rem; font-weight: 800; }.insta360-cleanup.is-clean { color: #6ee7b7; }.insta360-cleanup.is-failed { color: #fecaca; }
.gubaria-insta360 button.insta360-opus { border-color: rgba(96, 165, 250, .48); color: #bfdbfe; background: rgba(30, 64, 175, .16); }.gubaria-insta360 button.insta360-opus.is-ready { border-color: rgba(52, 211, 153, .48); color: #a7f3d0; }.gubaria-insta360 button.insta360-opus.is-warning { border-color: rgba(251, 191, 36, .48); color: #fde68a; }
.insta360-storage { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.insta360-storage span, .insta360-storage > strong { border: 1px solid rgba(110, 231, 183, .16); border-radius: 999px; padding: 6px 9px; color: #a7c8b8; background: rgba(2, 8, 6, .5); font-size: .7rem; }
.insta360-storage span b { color: #ecfdf5; }.insta360-storage .is-clean { color: #6ee7b7; }.insta360-storage .is-failed, .insta360-storage > strong { border-color: rgba(248, 113, 113, .4); color: #fecaca; }

@media (max-width: 760px) {
  .insta360-hero { align-items: start; padding-top: 30px; }.insta360-hero-badge { display: none; }.insta360-main { width: min(100% - 18px, 1180px); padding-top: 16px; }.insta360-card { border-radius: 18px; }.insta360-card-title { align-items: start; }.insta360-card-title > span { max-width: 45%; text-align: center; }.insta360-mode-picker { grid-template-columns: 1fr; }.insta360-render-grid { grid-template-columns: 1fr; }.insta360-description-head { align-items: stretch; flex-direction: column; }.insta360-seek { grid-template-columns: auto 1fr; }.insta360-seek span { grid-column: 1 / -1; text-align: right; }.insta360-actions > button { flex: 1 1 150px; }.gubaria-insta360 button.ghost { margin-left: 0; }.insta360-panorama-hint { right: 7px; bottom: 7px; max-width: calc(100% - 14px); font-size: .65rem; }.insta360-source-card { padding: 12px; }.insta360-source-card > header { align-items: flex-start; }.insta360-source-card > header > div:last-child { flex-wrap: wrap; justify-content: flex-end; }.insta360-source-controls { grid-template-columns: 1fr; }.insta360-source-upload, .insta360-source-record { min-height: 64px; }.insta360-job-actions > button { flex: 1 1 145px; }
}