#notificationIsland { position:fixed; top:max(18px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:100000; width:max-content; max-width:calc(100vw - 28px); pointer-events:none; }
#notificationIsland[hidden] { display:none !important; }
.notification-island { --island-accent:#85e5bd; box-sizing:border-box; display:flex; align-items:center; gap:13px; width:max-content; min-width:0; max-width:min(460px, calc(100vw - 28px)); padding:14px 16px 14px 18px; border-radius:36px; border:1px solid rgba(255,255,255,.17); background:linear-gradient(145deg,rgba(36,39,53,.98),rgba(17,20,30,.98)); color:#fff; box-shadow:0 14px 40px rgba(18,22,38,.24),inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); pointer-events:auto; overflow:hidden; }
.notification-island[data-tone="info"] { --island-accent:#a9c9ff; }
.notification-island.is-closing { pointer-events:none; }
.notification-island[data-tone="error"] { --island-accent:#ffacb8; }
.island-signal { display:flex; align-items:center; justify-content:center; gap:3px; width:26px; height:28px; flex:none; }
.island-signal i { display:block; width:4px; height:8px; border-radius:5px; background:var(--island-accent); box-shadow:0 0 9px color-mix(in srgb,var(--island-accent) 25%,transparent); animation:islandSignal 1.5s ease-in-out infinite; }
.island-signal i:nth-child(2) { height:17px; animation-delay:.15s; }
.island-signal i:nth-child(3) { height:11px; animation-delay:.3s; }
.island-copy { min-width:0; max-width:340px; overflow-wrap:anywhere; text-align:left; line-height:1.5; }
.island-title { color:#fff; font:600 14px/1.5 'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; }
.island-detail { color:#c6cbd9; font:400 12px/1.5 'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; margin-top:3px; }
.island-detail[hidden] { display:none; }
.notification-island .island-dismiss { display:grid; place-items:center; flex:none; width:26px; height:26px; padding:5px; margin:0 0 0 2px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:#c9ceda; cursor:pointer; }
.notification-island .island-dismiss:hover { background:rgba(255,255,255,.18); color:#fff; }
.island-dismiss svg { display:block; width:16px; height:16px; }
.island-dismiss:focus-visible { outline:2px solid var(--island-accent); outline-offset:3px; }
@keyframes islandSignal { 0%,100% { transform:scaleY(.75); opacity:.65; } 50% { transform:scaleY(1.15); opacity:1; } }
@media (max-width:520px) { #notificationIsland { top:max(12px, env(safe-area-inset-top)); }.notification-island { gap:10px; padding:12px 13px 12px 15px; border-radius:30px; }.island-copy { max-width:calc(100vw - 132px); } }
@media (prefers-reduced-motion:reduce) { .island-signal i { animation:none; } }