/* Generated from the sharing page support rules. */
.shared-support{--blue:#0869e8;--line:#e4eaf3;--muted:#768297;--ios-blue:#007aff;--ios-bluefill:#eaf3ff;--ios-text:#1d1d1f;--ios-sub:#86868b;--ios-panel:#fff;--ios-fill:#f4f4f7;--ios-line:#e8e8ed;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;color:#172338}
.shared-support .primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;font-size:14px;font-weight:700;min-height:42px;padding:0 18px;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}.shared-support .primary-btn{border:1px solid var(--blue);background:var(--blue);color:white;box-shadow:0 6px 15px rgba(8,105,232,.14)}.shared-support .primary-btn:hover{background:var(--deep);box-shadow:0 9px 20px rgba(8,105,232,.2);transform:translateY(-1px)}.shared-support .primary-btn:active{transform:scale(.98)}
/* Share page */.shared-support .unlock-card .primary-btn{height:48px}
/* Shared dialogs and chat */.shared-support.support-panel{width:min(100%,430px);height:min(660px,92dvh);background:white;border-radius:22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 75px rgba(7,22,42,.23)}.shared-support .panel-top{padding:17px 19px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.shared-support .panel-top strong{display:block;font-size:16px}.shared-support .panel-top small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.shared-support .icon-button{width:32px;height:32px;display:grid;place-items:center;border:0;background:#f1f4f8;color:#758297;border-radius:9px;font-size:21px;font-weight:300}.shared-support .ticket-list{display:flex;gap:7px;overflow:auto;padding:10px 15px;border-bottom:1px solid #eef1f6;min-height:51px}.shared-support .ticket-pill{white-space:nowrap;background:#f3f6fa;border:1px solid transparent;border-radius:9px;padding:6px 10px;font-size:11px;color:#65748a}.shared-support .ticket-pill.active{color:var(--blue);background:#edf5ff;border-color:#cfe3ff}.shared-support .chat-messages{flex:1;overflow:auto;padding:17px;display:flex;flex-direction:column;gap:11px}.shared-support .message{align-self:flex-start;max-width:86%;background:#f2f5f9;color:#23334a;padding:10px 12px;border-radius:12px 12px 12px 3px;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.shared-support .message.own{align-self:flex-end;background:#e8f2ff;color:#1154a1;border-radius:12px 12px 3px 12px}.shared-support .message small{display:block;font-size:10px;opacity:.6;margin-top:5px}.shared-support .message img,.shared-support .message video{max-width:100%;max-height:220px;border-radius:8px;display:block}.shared-support .chat-empty{margin:auto;color:#96a1b1;text-align:center;font-size:13px;line-height:1.7}.shared-support .chat-form{padding:12px 15px 15px;border-top:1px solid var(--line)}.shared-support .chat-form textarea{resize:none;width:100%;border:1px solid #e0e7f1;border-radius:10px;padding:10px 12px;font-size:13px}.shared-support .chat-actions{display:flex;align-items:center;gap:7px;margin-top:7px}.shared-support .chat-actions .primary-btn{margin-left:auto;min-height:34px;font-size:12px}.shared-support .chat-actions span{font-size:10px;color:#8a96a8;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Admin */.shared-support .admin-section-head .primary-btn{min-height:36px;font-size:12px}
@media(max-width:600px){.shared-support.support-panel{height:min(740px,97dvh);border-radius:18px}}

/* Copy feedback remains visible while the page is scrolled. */

/* Keep the brand readable even while the dedicated public theme is loading. */

/* Star Isle theme. Tabler supplies the component foundation; these rules shape the product. */
.shared-support .primary-btn {
  background: #1677f2;
  border: 1px solid #1677f2;
  color: #fff;
  border-radius: 12px;
  font-weight: 680;
  box-shadow: 0 5px 13px rgba(22, 119, 242, .14);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.shared-support .primary-btn:hover {
  background: #0967df;
  border-color: #0967df;
  color: #fff;
  box-shadow: 0 8px 18px rgba(22, 119, 242, .2);
  transform: translateY(-1px);
}
.shared-support .primary-btn:active { transform: translateY(0); }

/* Public share page */
.shared-support .unlock-card .primary-btn { height: 48px; margin-top: 16px; }

/* Admin */
.shared-support .admin-section-head .primary-btn { font-size: 12px; }
.shared-support .chat-form textarea {
  background: #f8fafc;
  border-color: #e0e7ef;
  border-radius: 11px;
  color: #26364b;
}
.shared-support .chat-form textarea:focus {
  background: #fff;
  border-color: #8dbcf8;
  box-shadow: 0 0 0 3px rgba(22,119,242,.09);
}
.shared-support .form-actions .primary-btn { min-height: 38px; }
.shared-support .login-card .primary-btn { height: 45px; }
.shared-support.support-panel { border-radius: 22px; }
@media (max-width: 600px) {
  .shared-support.support-panel { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .shared-support .primary-btn { transition: none; }
}

/* Flat blue workspace theme informed by the selected admin reference. */
.shared-support .primary-btn {
  background: #5d8ef4;
  border-color: #5d8ef4;
  border-radius: 7px;
  box-shadow: none;
}
.shared-support .primary-btn:hover {
  background: #427be9;
  border-color: #427be9;
  box-shadow: none;
}

/* Management workspace */
.shared-support.support-panel { border-radius: 10px; }

/* Phone share page in the same visual language */
.shared-support .unlock-card .primary-btn { height: 44px; }

/* Reading scale and typography */
.shared-support .primary-btn { font-weight: 600; }
.shared-support .unlock-card .primary-btn { height: 49px; font-size: 15px; }
.shared-support .rail-heading .primary-btn { padding: 7px 10px; min-height: 32px; font-size: 12px; }
.shared-support.support-panel .chat-form { position: relative; }
.shared-support .emoji-picker { position: absolute; bottom: 64px; left: 12px; z-index: 2; width: min(290px,calc(100% - 24px)); display: grid; grid-template-columns: repeat(6,1fr); gap: 3px; padding: 9px; border: 1px solid #dce7f7; border-radius: 12px; background: white; box-shadow: 0 12px 28px #1d355728; }
.shared-support .emoji-picker[hidden] { display: none; }
.shared-support .emoji-picker button { border: 0; border-radius: 7px; background: transparent; padding: 5px; font-size: 22px; cursor: pointer; }
.shared-support .emoji-picker button:hover { background: #f0f5ff; }
.shared-support .message.emoji-sticker { background: transparent; padding: 3px 5px; font-size: 36px; }
.shared-support .message.emoji-sticker small { font-size: 10px; }

/* Share-page editor and card management refinements. */
.shared-support .code-generator-foot .primary-btn { flex: none; min-height: 36px; }
@media (max-width: 520px) { .shared-support .code-generator-foot .primary-btn { width: 100%; } }

/* Reader mode and richer share-page formatting. */

/* Compact, WeChat-like composer with original cartoon stickers. */
.shared-support.support-panel .chat-form { padding:10px 13px 12px; }
.shared-support.support-panel .chat-form textarea { border:0; border-radius:0; padding:8px 3px; min-height:66px; outline:none; background:#fff; }
.shared-support.support-panel .chat-form textarea:focus { outline:none; }
.shared-support.support-panel .chat-actions { border-top:1px solid #edf1f7; padding-top:8px; margin-top:4px; gap:8px; }
.shared-support .chat-tool { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:#526276; cursor:pointer; }
.shared-support .chat-tool:hover,.shared-support .chat-tool[aria-expanded=true] { background:#edf4ff; color:#3972d0; }
.shared-support .chat-tool svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.shared-support.support-panel .emoji-picker { left:10px; right:10px; bottom:61px; width:auto; max-height:min(320px,50dvh); display:block; overflow:auto; padding:11px; }
.shared-support .sticker-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
.shared-support .sticker-grid button { display:grid; place-items:center; min-width:0; min-height:54px; padding:2px; border:0; border-radius:8px; background:#fff; cursor:pointer; }
.shared-support .sticker-grid button:hover { background:#edf5ff; }
.shared-support .sticker-art { display:inline-block; width:56px; height:56px; flex:none; background-image:url('/assets/stickers/blue-otter-24.png'); background-repeat:no-repeat; background-size:600% 400%; vertical-align:middle; }
.shared-support .sticker-art.sticker-extra { background-image:url('/assets/stickers/blue-otter-12.png'); background-size:600% 200%; }
.shared-support .sticker-grid .sticker-art { width:50px; height:50px; max-width:100%; }
.shared-support .message.custom-sticker { background:transparent; padding:2px 4px; }
.shared-support .message.custom-sticker .sticker-art { width:106px; height:106px; }
.shared-support .message.custom-sticker small { font-size:10px; }
.shared-support .attachment-menu { position:absolute; bottom:61px; left:52px; display:grid; gap:3px; padding:7px; border:1px solid #dce7f7; border-radius:10px; background:#fff; box-shadow:0 12px 28px #1d355728; z-index:3; }
.shared-support .attachment-menu[hidden] { display:none; }
.shared-support .attachment-menu button { min-width:104px; border:0; border-radius:6px; background:#fff; padding:8px 12px; text-align:left; color:#40536d; cursor:pointer; }
.shared-support .attachment-menu button:hover { background:#edf5ff; }
.shared-support .selected-file { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 9px; border-radius:7px; background:#eef5ff; color:#3d6b9b; font-size:11px; }
.shared-support .selected-file[hidden] { display:none; }
.shared-support .selected-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shared-support .selected-file button { border:0; background:transparent; color:#5c6b81; font-size:17px; cursor:pointer; }

/* Keep the full editor while showing its common actions first. */
.shared-support .ticket-create-empty { margin:auto; text-align:center; color:#7b899c; }
.shared-support .ticket-create-empty strong { display:block; color:#293a54; font-size:17px; }
.shared-support .ticket-create-empty p { margin:7px 0 18px; font-size:12px; }
.shared-support .ticket-create-empty .primary-btn { min-height:38px; padding:0 20px; }
.shared-support .ticket-create-form { display:grid; align-self:flex-start; width:100%; gap:9px; padding:4px 1px 14px; }
.shared-support .ticket-create-form h3 { margin:0; color:#293a54; font-size:17px; }
.shared-support .ticket-create-form p { margin:0 0 9px; color:#8390a2; font-size:12px; line-height:1.6; }
.shared-support .ticket-create-form label { color:#44556d; font-size:12px; font-weight:650; }
.shared-support .ticket-create-form input,.shared-support .ticket-create-form textarea { width:100%; border:1px solid #dce5f0; border-radius:9px; padding:11px 12px; color:#2e405a; background:#fff; font:inherit; font-size:13px; outline:none; }
.shared-support .ticket-create-form input:focus,.shared-support .ticket-create-form textarea:focus { border-color:#83aaf0; box-shadow:0 0 0 3px #e9f1ff; }
.shared-support .ticket-create-form textarea { resize:vertical; min-height:122px; }
.shared-support .ticket-create-form .primary-btn { justify-self:end; margin-top:7px; padding:0 21px; min-height:38px; }
.shared-support .ticket-create-form .primary-btn:disabled { opacity:.6; cursor:wait; }
.shared-support .ticket-create-attachments { display:grid; gap:7px; margin-top:3px; }
.shared-support .ticket-create-attachments .attachment-picker { justify-self:start; border:1px solid #c6d8f5; border-radius:8px; background:#f7faff; color:#386dc7; padding:8px 11px; font-size:12px; font-weight:700; cursor:pointer; }
.shared-support .ticket-create-attachments .attachment-picker:hover { background:#ebf3ff; }
.shared-support .ticket-create-attachments small { color:#8492a8; font-size:11px; }
.shared-support .ticket-draft-files { display:grid; gap:5px; }
.shared-support .ticket-draft-file { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:7px 9px; border-radius:7px; background:#eef5ff; color:#405c82; font-size:11px; }
.shared-support .ticket-draft-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shared-support .ticket-draft-file button { border:0; background:transparent; color:#7a879b; cursor:pointer; font-size:16px; }
.shared-support .ticket-create-actions { display:flex; justify-content:flex-end; }
.shared-support.support-panel:has(.ticket-create-form) { height:min(760px,92dvh); }
.shared-support.support-panel .chat-messages { min-height:0; }
.shared-support .ticket-create-form input[hidden] { display:none; }
.shared-support .ticket-list-item.needs-reply { border-left:3px solid #e8935d; background:#fffaf6; }
.shared-support .ticket-list-item.active { background:#edf5ff; }
.shared-support .ticket-list-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650; color:#35445b; }
.shared-support .ticket-list-status { color:#7b899c; font-size:11px; white-space:nowrap; }
.shared-support .ticket-list-item.needs-reply .ticket-list-status { color:#c46c3c; font-weight:750; }
/* Keep the public cards inside narrow in-app browser viewports. */

/* Tutorial media shares the text flow; video shape only applies before playback. */
/* Grouped management: statuses and login results remain visible when folded. */

/* Detail dialogs retain a compact group overview. */

/* Account configuration keeps the active pane and save controls in view. */

/* Task settings fill the editor and keep switches, intervals and notes aligned. */

/* Per-page public navigation names. */

/* Customer update progress remains readable on desktop and small screens. */

/* Public sharing: the approved iOS layout, isolated from the admin theme. */
/* Override the shared toolkit's one-screen body height so the canvas covers long pages. */.shared-support .share-detail-actions .primary-btn{background:var(--ios-blue);color:#fff}.shared-support .share-detail-actions .primary-btn img{filter:brightness(0) invert(1)}.shared-support .unlock-card .primary-btn{background:var(--ios-blue);border:0;border-radius:14px;min-height:44px;color:#fff}

.shared-support .primary-btn:hover{transform:none}

/* Browser confirmation: plain icons and compact desktop/mobile dialog. */

/* Keep tap feedback separate from positioning transforms. */

/* Compact first-use confirmation, without extra space around the device icon. */

/* Keep the tap target steady and size the modal from the video's intrinsic ratio. */
/* FAQ attachments keep their source aspect ratio. */

/* Inline credential icons remain visible when image requests fail. */

/* More tutorial categories scroll horizontally without squeezing their labels. */

/* Explicit edges and vh fallbacks keep dialogs visible on older iOS Safari. */

/* Confirmed first-use and two-change flow; inherit the system page palette. */
.shared-support .binding-flow-actions .primary-btn{width:100%;min-height:44px;border:0;border-radius:10px;background:#007aff;color:#fff;font-size:14px;font-weight:600}

/* Optional project identity on the opened sharing page. */
/* Animate the scrim separately so the panel retains a smooth, full-length entrance. */