* { font-family: 'Inter', sans-serif; box-sizing: border-box; }

    body {
      background: linear-gradient(160deg, #fce7ff 0%, #e8f0ff 50%, #e7fff4 100%);
      color: #1e293b;
      min-height: 100vh;
      overscroll-behavior: none;
    }

    /* ---- Top bar ---- */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid #e9d9ff;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: 0 2px 12px rgba(124,58,237,0.07);
    }

    .topbar-title {
      font-size: 20px;
      font-weight: 700;
      color: #7c3aed;
      white-space: nowrap;
    }

    .topbar-brand {
      min-width: 0;
    }

    .topbar-sub {
      font-size: 11px;
      color: #94a3b8;
      margin-top: 1px;
    }

    /* ---- Connection chip ---- */
    .conn-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f5f0ff;
      border: 1.5px solid #ddd6fe;
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #7c3aed;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .topbar-right {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .topbar-device {
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    .hamburger-btn {
      display: none;
      width: 38px;
      height: 38px;
      border: 1.5px solid #ddd6fe;
      border-radius: 10px;
      background: #ffffff;
      color: #7c3aed;
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }

    .hamburger-menu {
      position: fixed;
      top: 64px;
      right: 12px;
      z-index: 65;
      width: min(240px, calc(100vw - 24px));
      background: #ffffff;
      border: 1.5px solid #ddd6fe;
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(124, 58, 237, 0.18);
      padding: 10px;
    }

    .menu-btn {
      width: 100%;
      padding: 11px 12px;
      border: 1.5px solid #fecdd3;
      border-radius: 10px;
      background: #fff1f2;
      color: #9f1239;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
    }

    .menu-info {
      font-size: 11px;
      color: #64748b;
      margin: 0 0 8px;
      word-break: break-word;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .dot-on  { background: #10b981; box-shadow: 0 0 6px #10b981; animation: glow 2s ease-in-out infinite; }
    .dot-off { background: #f87171; }

    @keyframes glow {
      0%, 100% { box-shadow: 0 0 4px #10b981; }
      50% { box-shadow: 0 0 12px #10b981; }
    }

    /* ---- Main ---- */
    main {
      padding: 14px 12px 80px;
      max-width: 600px;
      margin: 0 auto;
    }

    /* ---- Section ---- */
    .section {
      background: white;
      border: 1.5px solid #ede9fe;
      border-radius: 20px;
      padding: 18px 16px;
      margin-bottom: 14px;
      box-shadow: 0 2px 12px rgba(124,58,237,0.05);
    }

    .section-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: #a78bfa;
      margin-bottom: 12px;
    }

    /* ---- Tab Navigation ---- */
    .tab-nav {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
      gap: 8px;
      background: white;
      border: 1.5px solid #ede9fe;
      border-radius: 20px;
      padding: 8px;
      margin-bottom: 14px;
      box-shadow: 0 2px 12px rgba(124,58,237,0.05);
    }

    .tab-btn {
      min-width: 0;
      background: transparent;
      border: 2px solid transparent;
      border-radius: 14px;
      padding: 12px 8px;
      font-size: 13px;
      font-weight: 600;
      color: #94a3b8;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: normal;
      -webkit-tap-highlight-color: transparent;
      line-height: 1.2;
      min-height: 44px;
      overflow-wrap: anywhere;
    }

    .tab-btn:hover {
      background: #f8fafc;
      color: #7c3aed;
    }

    .tab-active {
      background: linear-gradient(135deg, #7c3aed, #a78bfa);
      color: white;
      border-color: #7c3aed;
      box-shadow: 0 4px 12px rgba(124,58,237,0.3);
    }

    .tab-active:hover {
      background: linear-gradient(135deg, #6d28d9, #8b5cf6);
      color: white;
    }

    /* ---- Tab Content ---- */
    .tab-content {
      display: none;
      animation: fadeIn 0.3s ease-out;
    }

    .tab-content-active {
      display: block;
    }

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

    /* ---- Connect button ---- */
    .btn-connect {
      width: 100%;
      padding: 16px;
      background: linear-gradient(135deg, #a78bfa, #7c3aed);
      color: white;
      font-size: 16px;
      font-weight: 700;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      letter-spacing: 0.3px;
      box-shadow: 0 4px 16px rgba(124,58,237,0.3);
    }

    .btn-connect:active { transform: scale(0.97); }

    .btn-disconnect {
      width: 100%;
      padding: 16px;
      background: linear-gradient(135deg, #fca5a5, #ef4444);
      color: white;
      font-size: 16px;
      font-weight: 700;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      box-shadow: 0 4px 16px rgba(239,68,68,0.25);
    }

    .btn-disconnect:active { transform: scale(0.97); }

    .nav-connect,
    .nav-disconnect {
      width: auto;
      min-width: 104px;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13px;
      line-height: 1;
      box-shadow: none;
      flex-shrink: 0;
    }

    /* ---- Status values ---- */
    .state-row {
      display: flex;
      gap: 10px;
    }

    .state-pill {
      flex: 1;
      background: linear-gradient(135deg, #f5f0ff, #eff9ff);
      border: 1.5px solid #ddd6fe;
      border-radius: 14px;
      padding: 12px 14px;
      min-width: 0;
    }

    .state-pill-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #94a3b8;
      margin-bottom: 4px;
    }

    .state-pill-value {
      font-size: 18px;
      font-weight: 700;
      color: #7c3aed;
      text-transform: capitalize;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ---- Command buttons ---- */
    .cmd-grid {
      display: grid;
      gap: 10px;
    }

    .cmd-grid-5 { grid-template-columns: repeat(5, 1fr); }
    .cmd-grid-3 { grid-template-columns: repeat(3, 1fr); }

    @media (max-width: 768px) {
      .cmd-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 430px) {
      .cmd-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 360px) {
      .cmd-grid-5,
      .cmd-grid-3 { grid-template-columns: 1fr; }
    }

    .cmd-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 14px 6px;
      border-radius: 16px;
      border: 2px solid transparent;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      gap: 5px;
      line-height: 1.2;
      text-align: center;
    }

    .cmd-btn .icon { font-size: 24px; line-height: 1; }

    .cmd-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }

    .cmd-btn:not(:disabled):active {
      transform: scale(0.93);
    }

    .cmd-btn:not(:disabled):hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }

    /* Emotion — pastel */
    .e-happy    { background: #fffbeb; border-color: #fde68a; color: #92400e; }
    .e-sleepy   { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; }
    .e-surprised{ background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
    .e-wink     { background: #fdf2f8; border-color: #fbcfe8; color: #9d174d; }
    .e-angry    { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
    .e-motion-auto { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

    /* Action — pastel */
    .a-standup  { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
    .a-sit      { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
    .a-sleep    { background: #f8fafc; border-color: #cbd5e1; color: #475569; }
    .a-wave     { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
    .a-walk     { background: #ecfeff; border-color: #a5f3fc; color: #164e63; }
    .a-stop     { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }

    /* Active state */
    .cmd-btn.active-cmd {
      box-shadow: 0 0 0 3px rgba(124,58,237,0.25);
      filter: brightness(0.95) saturate(1.3);
    }

    /* ---- Log ---- */
    .log-section {
      padding-bottom: 12px;
    }

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

    .log-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .log-box {
      background: #fafafa;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      height: 160px;
      overflow-y: auto;
      padding: 10px 12px;
      font-family: 'Courier New', monospace;
      font-size: 11px;
      margin-top: 12px;
    }

    .log-box::-webkit-scrollbar { width: 4px; }
    .log-box::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

    .log-line { padding: 3px 0; line-height: 1.5; }
    .log-line.ok   { color: #059669; }
    .log-line.err  { color: #dc2626; }
    .log-line.info { color: #2563eb; }
    .log-line.warn { color: #d97706; }

    .log-clear {
      background: none;
      border: 1.5px solid #e2e8f0;
      color: #94a3b8;
      border-radius: 8px;
      padding: 4px 10px;
      font-size: 11px;
      cursor: pointer;
      margin: 0;
    }

    .log-clear:active { background: #f1f5f9; }

    /* ---- Info box ---- */
    .uuid-row {
      font-family: 'Courier New', monospace;
      font-size: 11px;
      padding: 8px 0;
      border-bottom: 1px solid #f1f5f9;
    }

    .uuid-row:last-child { border-bottom: none; }
    .uuid-label { color: #94a3b8; font-size: 10px; text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
    .uuid-val { color: #64748b; word-break: break-all; }

    /* ---- PWA Install CTA ---- */
    .install-cta {
      position: fixed;
      right: 14px;
      bottom: 14px;
      z-index: 70;
      border: none;
      border-radius: 999px;
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
      color: #ffffff;
      background: linear-gradient(135deg, #7c3aed, #6366f1);
      box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.15s ease, box-shadow 0.2s ease;
    }

    .install-cta:active {
      transform: scale(0.96);
    }

    .install-cta:hover {
      box-shadow: 0 10px 26px rgba(99, 102, 241, 0.45);
      transform: translateY(-1px);
    }

    @media (max-width: 768px) {
      .hamburger-btn {
        display: inline-flex;
      }

      .topbar {
        padding: 10px 12px;
      }

      .topbar-sub,
      .topbar-device {
        display: none !important;
      }

      .conn-chip {
        padding: 6px 10px;
        font-size: 12px;
      }

      .nav-connect {
        min-width: 92px;
        padding: 10px 11px;
        font-size: 12px;
      }

      .nav-disconnect {
        display: none !important;
      }
      
      .tab-nav {
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
        padding: 6px;
        gap: 6px;
      }
      
      .tab-btn {
        padding: 10px 12px;
        font-size: 12px;
      }
    }

    @media (max-width: 380px) {
      .topbar-title {
        font-size: 18px;
      }

      .conn-chip {
        padding: 8px;
      }

      .conn-chip #conn-label {
        display: none;
      }

      .nav-connect {
        min-width: 84px;
        padding: 10px 9px;
      }

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

    /* ---- Hidden ---- */
    .hidden { display: none !important; }

    /* ---- Messages ---- */
    .message-input-row {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
    }

    .message-input {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 14px;
      color: #1e293b;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .message-input:focus {
      outline: none;
      border-color: #7c3aed;
      box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
    }

    .message-input:disabled {
      background: #f8fafc;
      color: #94a3b8;
      cursor: not-allowed;
    }

    .message-input::placeholder {
      color: #94a3b8;
    }

    .btn-send-message {
      background: linear-gradient(135deg, #7c3aed, #6366f1);
      color: #ffffff;
      border: none;
      border-radius: 12px;
      padding: 12px 24px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.2s ease;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }

    .btn-send-message:hover:not(:disabled) {
      box-shadow: 0 6px 20px rgba(124,58,237,0.35);
      transform: translateY(-1px);
    }

    .btn-send-message:active:not(:disabled) {
      transform: scale(0.96);
    }

    .btn-send-message:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .message-history {
      background: #fafafa;
      border: 1.5px solid #e2e8f0;
      border-radius: 14px;
      min-height: 120px;
      max-height: 300px;
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .message-history::-webkit-scrollbar { width: 4px; }
    .message-history::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

    .message-info {
      text-align: center;
      color: #94a3b8;
      font-size: 12px;
      padding: 20px;
      font-style: italic;
    }

    .message-bubble {
      max-width: 80%;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13px;
      line-height: 1.4;
      word-wrap: break-word;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .message-sent {
      background: linear-gradient(135deg, #7c3aed, #6366f1);
      color: #ffffff;
      align-self: flex-end;
      border-bottom-right-radius: 4px;
    }

    .message-received {
      background: #ffffff;
      color: #1e293b;
      border: 1.5px solid #e2e8f0;
      align-self: flex-start;
      border-bottom-left-radius: 4px;
    }

    .message-text {
      font-weight: 500;
    }

    .message-time {
      font-size: 10px;
      opacity: 0.7;
      align-self: flex-end;
    }

    /* ---- Quick Messages ---- */
    .quick-messages {
      margin-bottom: 12px;
      padding: 12px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1.5px solid #e2e8f0;
    }

    .quick-msg-label {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    .quick-msg-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 8px;
    }

    .quick-msg-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .quick-msg-btn:hover:not(:disabled) {
      background: #f1f5f9;
      border-color: #cbd5e1;
      transform: translateY(-1px);
    }

    .quick-msg-btn:active:not(:disabled) {
      transform: scale(0.96);
    }

    .quick-msg-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }

    .quick-msg-gladiator {
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      border-color: #fbbf24;
      color: #92400e;
      font-weight: 700;
      grid-column: span 2;
    }

    .quick-msg-gladiator:hover:not(:disabled) {
      background: linear-gradient(135deg, #fde68a, #fcd34d);
      box-shadow: 0 4px 12px rgba(251,191,36,0.3);
    }

    @media (max-width: 768px) {
      .message-input-row {
        flex-direction: column;
      }
      
      .btn-send-message {
        width: 100%;
      }
      
      .message-bubble {
        max-width: 85%;
      }
      
      .quick-msg-grid {
        grid-template-columns: 1fr 1fr;
      }
      
      .quick-msg-gladiator {
        grid-column: span 2;
      }
    }
    
    /* ---- Message Icon ---- */
    .message-icon {
      font-size: 14px;
      margin-bottom: 4px;
      opacity: 0.7;
    }
    
    /* ---- Message Playing Indicator ---- */
    .message-playing {
      margin-top: 12px;
      padding: 14px;
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      border: 2px solid #fbbf24;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 4px 12px rgba(251,191,36,0.2);
      transform: translateY(10px);
      opacity: 0;
      transition: all 0.3s ease-out;
    }
    
    .message-playing.playing-active {
      transform: translateY(0);
      opacity: 1;
    }
    
    .playing-icon {
      font-size: 28px;
      animation: pulse 1.5s ease-in-out infinite;
    }
    
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }
    
    .playing-text {
      flex: 1;
      min-width: 0;
    }
    
    .playing-label {
      font-size: 11px;
      font-weight: 700;
      color: #92400e;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }
    
    .playing-message-text {
      font-size: 13px;
      font-weight: 600;
      color: #78350f;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .playing-timer {
      font-size: 18px;
      font-weight: 700;
      color: #92400e;
      background: rgba(255,255,255,0.5);
      padding: 6px 12px;
      border-radius: 8px;
      min-width: 45px;
      text-align: center;
    }
    
    @keyframes slideIn {
      from {
        transform: translateX(-20px);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
    
    .e-vomit { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
    
    /* ---- Weather Widget ---- */
    .weather-widget {
      background: linear-gradient(135deg, #e0f2fe, #bae6fd);
      border: 2px solid #7dd3fc;
      border-radius: 14px;
      padding: 16px;
    }
    
    .weather-loading {
      text-align: center;
      padding: 20px;
      color: #0c4a6e;
      font-size: 14px;
    }
    
    .weather-data {
      margin-bottom: 12px;
    }
    
    .weather-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
    }
    
    .weather-icon-large {
      font-size: 56px;
      line-height: 1;
    }
    
    .weather-main {
      flex: 1;
      min-width: 0;
    }
    
    .weather-temp {
      font-size: 32px;
      font-weight: 700;
      color: #0c4a6e;
      line-height: 1;
      margin-bottom: 4px;
    }
    
    .weather-desc {
      font-size: 14px;
      color: #075985;
      text-transform: capitalize;
      overflow-wrap: anywhere;
    }
    
    .weather-details {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    
    .weather-detail {
      flex: 1;
      min-width: 120px;
      background: rgba(255,255,255,0.6);
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 13px;
      color: #0c4a6e;
      overflow-wrap: anywhere;
    }
    
    .detail-label {
      font-weight: 600;
      display: block;
      margin-bottom: 2px;
    }
    
    .weather-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    
    .btn-weather {
      flex: 1;
      min-width: 140px;
      padding: 12px 16px;
      border: 2px solid #0ea5e9;
      border-radius: 10px;
      background: #ffffff;
      color: #0369a1;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .btn-weather:hover:not(:disabled) {
      background: #e0f2fe;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(14,165,233,0.2);
    }
    
    .btn-weather:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .btn-weather.btn-send {
      background: linear-gradient(135deg, #0ea5e9, #0284c7);
      color: #ffffff;
      border-color: #0284c7;
    }
    
    .btn-weather.btn-send:hover:not(:disabled) {
      background: linear-gradient(135deg, #0284c7, #0369a1);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(14,165,233,0.35);
    }
    
    /* ---- Pomodoro Widget ---- */
    .pomodoro-widget {
      --pomodoro-accent: #ef4444;
      --pomodoro-accent-soft: rgba(251, 146, 60, 0.22);
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 247, 237, 0.64)),
        linear-gradient(135deg, #fff7ed, #fef3c7 54%, #fee2e2);
      border: 2px solid #fdba74;
      border-radius: 18px;
      padding: 18px;
      box-shadow: 0 12px 32px rgba(234, 88, 12, 0.12);
    }
    
    .pomodoro-display {
      text-align: center;
      margin-bottom: 16px;
    }

    .pomodoro-topline {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    
    .pomodoro-mode {
      color: #ffffff;
      background: linear-gradient(135deg, #7c3aed, #a855f7);
      box-shadow: 0 6px 16px rgba(124, 58, 237, 0.22);
    }

    .pomodoro-widget.pomodoro-break-mode {
      --pomodoro-accent: #10b981;
      --pomodoro-accent-soft: rgba(16, 185, 129, 0.2);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(236, 253, 245, 0.72)),
        linear-gradient(135deg, #ecfdf5, #d1fae5 54%, #e0f2fe);
      border-color: #6ee7b7;
      box-shadow: 0 12px 32px rgba(16, 185, 129, 0.12);
    }

    .pomodoro-widget.pomodoro-break-mode .pomodoro-mode {
      background: linear-gradient(135deg, #059669, #10b981);
      box-shadow: 0 6px 16px rgba(16, 185, 129, 0.22);
    }

    .pomodoro-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.7px;
      text-transform: uppercase;
      line-height: 1.1;
    }

    .pomodoro-chip-muted {
      max-width: 100%;
      color: #7c2d12;
      background: rgba(255, 255, 255, 0.68);
      border: 1px solid rgba(251, 146, 60, 0.42);
      box-shadow: 0 4px 12px rgba(154, 52, 18, 0.08);
      overflow-wrap: anywhere;
      text-transform: none;
      letter-spacing: 0;
    }

    .pomodoro-ring {
      --progress: 0deg;
      width: min(230px, 72vw);
      aspect-ratio: 1;
      margin: 0 auto;
      border-radius: 50%;
      padding: 13px;
      background:
        conic-gradient(var(--pomodoro-accent) var(--progress), var(--pomodoro-accent-soft) 0deg),
        linear-gradient(135deg, #fff7ed, #ffffff);
      box-shadow:
        inset 0 0 0 1px rgba(234, 88, 12, 0.16),
        0 16px 36px rgba(239, 68, 68, 0.18);
    }

    .pomodoro-ring-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 28%, #ffffff 0%, #fff7ed 62%, #fed7aa 100%);
      border: 1px solid rgba(251, 146, 60, 0.32);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 10px 24px rgba(255, 255, 255, 0.75);
    }
    
    .pomodoro-timer {
      font-size: clamp(40px, 13vw, 56px);
      font-weight: 700;
      color: #7c2d12;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      letter-spacing: 0;
    }

    .pomodoro-subtitle {
      margin-top: 8px;
      font-size: 11px;
      font-weight: 700;
      color: #ea580c;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    .pomodoro-controls {
      display: flex;
      gap: 10px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    
    .btn-pomodoro {
      flex: 1;
      min-width: 90px;
      padding: 12px 14px;
      border: 2px solid rgba(251, 146, 60, 0.52);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.78);
      color: #9a3412;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
      box-shadow: 0 5px 14px rgba(154, 52, 18, 0.08);
    }
    
    .btn-pomodoro:hover:not(:disabled) {
      background: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(234, 88, 12, 0.18);
    }
    
    .btn-pomodoro:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .btn-pomodoro.btn-send {
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
      color: #ffffff;
      border-color: #f59e0b;
      flex-basis: 100%;
    }
    
    .btn-pomodoro.btn-send:hover:not(:disabled) {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      box-shadow: 0 4px 14px rgba(251,191,36,0.35);
    }
    
    .pomodoro-config {
      display: flex;
      gap: 12px;
      padding-top: 14px;
      border-top: 1px solid rgba(234, 88, 12, 0.2);
    }
    
    .config-row {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .config-row label {
      font-size: 11px;
      font-weight: 700;
      color: #9a3412;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    
    .config-row input {
      padding: 8px 12px;
      border: 2px solid #fdba74;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.84);
      color: #7c2d12;
      font-size: 14px;
      font-weight: 600;
      text-align: center;
    }
    
    .config-row input:focus {
      outline: none;
      border-color: #f59e0b;
      box-shadow: 0 0 0 3px rgba(251,191,36,0.2);
    }
    
    /* ---- Date/Time Widget ---- */
    .datetime-widget {
      background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
      border: 2px solid #c084fc;
      border-radius: 14px;
      padding: 16px;
      text-align: center;
    }
    
    .datetime-display {
      margin-bottom: 14px;
    }
    
    .datetime-time {
      font-size: clamp(30px, 10vw, 42px);
      font-weight: 700;
      color: #581c87;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      margin-bottom: 6px;
    }
    
    .datetime-date {
      font-size: 16px;
      font-weight: 600;
      color: #7c3aed;
      overflow-wrap: anywhere;
    }
    
    .btn-datetime {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #a855f7;
      border-radius: 10px;
      background: linear-gradient(135deg, #a855f7, #9333ea);
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .btn-datetime:hover:not(:disabled) {
      background: linear-gradient(135deg, #9333ea, #7e22ce);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(168,85,247,0.35);
    }
    
    .btn-datetime:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    @media (max-width: 768px) {
      main {
        padding-left: 10px;
        padding-right: 10px;
      }

      .section {
        padding: 14px 12px;
        border-radius: 16px;
      }

      .weather-widget,
      .pomodoro-widget,
      .datetime-widget {
        padding: 12px;
        border-radius: 12px;
      }

      .weather-row {
        flex-direction: column;
        text-align: center;
        gap: 8px;
      }

      .weather-icon-large {
        font-size: 44px;
      }
      
      .weather-details {
        flex-direction: column;
        gap: 8px;
      }
      
      .weather-detail {
        min-width: auto;
      }
      
      .pomodoro-controls {
        flex-direction: column;
      }
      
      .btn-pomodoro {
        min-width: auto;
      }

      .pomodoro-config {
        flex-direction: column;
        gap: 10px;
      }
      
      .datetime-time {
        font-size: 36px;
      }
    }

    @media (max-width: 380px) {
      .weather-temp {
        font-size: 28px;
      }

      .pomodoro-timer {
        font-size: 34px;
      }

      .datetime-time {
        font-size: 30px;
      }
    }

/* ---- Clean public theme ---- */
:root {
  --page: #f6f7f9;
  --surface: #ffffff;
  --surface-muted: #f2f4f7;
  --surface-soft: #f8fafc;
  --line: #d8dee8;
  --line-soft: #e6eaf0;
  --text: #1f2937;
  --muted: #667085;
  --muted-2: #98a2b3;
  --primary: #176b5b;
  --primary-hover: #125449;
  --primary-soft: #e8f3f0;
  --danger: #b42318;
  --danger-soft: #fff1f0;
  --ok: #16825d;
  --warn: #9a6700;
  --focus: rgba(23, 107, 91, 0.18);
  --shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
}

body {
  background: var(--page);
  color: var(--text);
}

.topbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 8px rgba(17, 24, 39, 0.05);
}

.topbar-title {
  color: var(--text);
  font-weight: 700;
}

.topbar-sub,
.topbar-device,
.menu-info,
.uuid-label,
.uuid-val,
.message-info {
  color: var(--muted);
}

.conn-chip {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--text);
}

.hamburger-btn,
.hamburger-menu,
.section,
.tab-nav {
  background: var(--surface);
  border-color: var(--line-soft);
  box-shadow: var(--shadow);
}

.hamburger-btn {
  width: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 8px;
  color: var(--text);
}

.hamburger-lines,
.hamburger-lines::before,
.hamburger-lines::after {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.hamburger-lines {
  position: relative;
}

.hamburger-lines::before,
.hamburger-lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.hamburger-lines::before {
  top: -6px;
}

.hamburger-lines::after {
  top: 6px;
}

.hamburger-menu,
.section,
.tab-nav,
.cmd-btn,
.message-input,
.btn-send-message,
.message-history,
.quick-messages,
.quick-msg-btn,
.message-playing,
.weather-widget,
.weather-detail,
.btn-weather,
.pomodoro-widget,
.pomodoro-chip,
.pomodoro-ring,
.pomodoro-ring-inner,
.btn-pomodoro,
.config-row input,
.datetime-widget,
.btn-datetime,
.install-cta,
.menu-btn,
.log-clear {
  border-radius: 8px;
}

.section {
  border: 1px solid var(--line-soft);
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.04);
}

.section-label,
.quick-msg-label,
.state-pill-label,
.playing-label,
.config-row label {
  color: var(--muted);
  letter-spacing: 0.7px;
}

.tab-nav {
  border: 1px solid var(--line-soft);
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.04);
}

.tab-btn {
  color: var(--muted);
  border-radius: 7px;
}

.tab-btn:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.tab-active,
.tab-active:hover {
  background: var(--text);
  border-color: var(--text);
  color: #ffffff;
  box-shadow: none;
}

.btn-connect,
.btn-send-message,
.btn-weather.btn-send,
.btn-datetime,
.install-cta {
  background: var(--primary);
  color: #ffffff;
  box-shadow: none;
}

.btn-connect:hover:not(:disabled),
.btn-send-message:hover:not(:disabled),
.btn-weather.btn-send:hover:not(:disabled),
.btn-datetime:hover:not(:disabled),
.install-cta:hover {
  background: var(--primary-hover);
  box-shadow: 0 6px 18px rgba(23, 107, 91, 0.18);
}

.btn-disconnect,
.menu-btn {
  background: var(--danger-soft);
  border: 1px solid #fecdca;
  color: var(--danger);
  box-shadow: none;
}

.dot-on {
  background: var(--ok);
  box-shadow: none;
  animation: none;
}

.dot-off {
  background: #d92d20;
}

.cmd-btn,
.quick-msg-btn,
.btn-weather,
.btn-pomodoro {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: none;
}

.cmd-btn .icon {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.cmd-btn:not(:disabled):hover,
.quick-msg-btn:hover:not(:disabled),
.btn-weather:hover:not(:disabled),
.btn-pomodoro:hover:not(:disabled) {
  background: var(--surface-muted);
  border-color: #c8d0dc;
  box-shadow: none;
  transform: translateY(-1px);
}

.e-happy,
.e-sleepy,
.e-surprised,
.e-wink,
.e-vomit,
.e-angry,
.e-motion-auto,
.a-standup,
.a-sit,
.a-sleep,
.a-wave,
.a-walk,
.a-stop,
.quick-msg-gladiator {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

.cmd-btn.active-cmd {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-hover);
  box-shadow: 0 0 0 3px var(--focus);
  filter: none;
}

.state-pill {
  background: var(--surface-soft);
  border-color: var(--line-soft);
}

.state-pill-value {
  color: var(--primary-hover);
}

.message-input,
.message-history,
.quick-messages,
.log-box {
  background: var(--surface-soft);
  border-color: var(--line-soft);
}

.message-input:focus,
.config-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus);
}

.message-sent {
  background: var(--primary);
  color: #ffffff;
}

.message-received {
  background: var(--surface);
  border-color: var(--line-soft);
  color: var(--text);
}

.message-playing,
.weather-widget,
.pomodoro-widget,
.datetime-widget {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: none;
}

.playing-icon {
  min-width: 44px;
  color: var(--primary-hover);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  animation: none;
}

.playing-label,
.playing-message-text,
.playing-timer {
  color: var(--text);
}

.playing-timer {
  background: var(--surface-muted);
}

.weather-loading,
.weather-temp,
.weather-desc,
.weather-detail {
  color: var(--text);
}

.weather-icon-large {
  width: 86px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  background: var(--primary-soft);
  border: 1px solid #c9dfd9;
  color: var(--primary-hover);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.weather-detail {
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
}

.pomodoro-widget {
  --pomodoro-accent: var(--primary);
  --pomodoro-accent-soft: #e5e7eb;
  overflow: visible;
}

.pomodoro-mode,
.pomodoro-widget.pomodoro-break-mode .pomodoro-mode {
  background: var(--text);
  color: #ffffff;
  box-shadow: none;
}

.pomodoro-widget.pomodoro-break-mode {
  --pomodoro-accent: var(--ok);
  --pomodoro-accent-soft: #e5e7eb;
  background: var(--surface);
  border-color: var(--line-soft);
  box-shadow: none;
}

.pomodoro-chip-muted {
  color: var(--muted);
  background: var(--surface-soft);
  border-color: var(--line-soft);
  box-shadow: none;
}

.pomodoro-ring {
  background: conic-gradient(var(--pomodoro-accent) var(--progress), var(--pomodoro-accent-soft) 0deg);
  box-shadow: none;
}

.pomodoro-ring-inner {
  background: var(--surface);
  border-color: var(--line-soft);
  box-shadow: none;
}

.pomodoro-timer,
.datetime-time {
  color: var(--text);
}

.pomodoro-subtitle,
.datetime-date {
  color: var(--muted);
}

.btn-pomodoro,
.config-row input {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

.pomodoro-config {
  border-top-color: var(--line-soft);
}

.btn-pomodoro.btn-send,
.btn-pomodoro.btn-send:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: none;
}

.btn-datetime {
  border-color: var(--primary);
}

.log-section {
  display: none !important;
}

@media (max-width: 768px) {
  .hamburger-btn {
    min-width: 38px;
    height: 36px;
  }

  .weather-icon-large {
    width: auto;
    min-width: 82px;
    font-size: 12px;
  }
}

/* ---- Child friendly SVG app theme ---- */
:root {
  --page: #eef8f6;
  --surface: #ffffff;
  --surface-muted: #f3f8fb;
  --surface-soft: #f9fbfd;
  --line: #d7e5ea;
  --line-soft: #e4eef2;
  --text: #253041;
  --muted: #667789;
  --primary: #168a78;
  --primary-hover: #0f6e60;
  --primary-soft: #dff4ef;
  --sun: #fff3bf;
  --sun-line: #f5c04d;
  --sky: #dff2ff;
  --sky-line: #7cc3ed;
  --mint: #def7e8;
  --mint-line: #75c993;
  --peach: #ffe4d6;
  --peach-line: #ef9d75;
  --berry: #f9d9e6;
  --berry-line: #dc7ba1;
  --lilac: #ece5ff;
  --lilac-line: #a796e4;
  --shadow: 0 10px 26px rgba(50, 72, 92, 0.11);
}

body {
  background:
    linear-gradient(180deg, #eef8f6 0%, #f8fbfd 42%, #fff9f2 100%);
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ui-icon {
  width: 1.35em;
  height: 1.35em;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: #dcebef;
}

.topbar-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #263548;
}

.brand-icon {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.conn-chip {
  background: #f7fbfc;
}

.btn-connect,
.btn-disconnect,
.btn-send-message,
.btn-weather,
.btn-pomodoro,
.btn-datetime,
.quick-msg-btn,
.log-clear,
.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-connect,
.btn-send-message,
.btn-datetime,
.install-cta {
  background: linear-gradient(180deg, #1fa08d, #168a78);
  border: 1px solid #0f7466;
  color: #ffffff;
}

.btn-connect:hover:not(:disabled),
.btn-send-message:hover:not(:disabled),
.btn-datetime:hover:not(:disabled),
.install-cta:hover {
  background: linear-gradient(180deg, #1b927f, #0f6e60);
}

.action-carousel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.carousel-arrow {
  width: 42px;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfe3e8;
  border-radius: 999px;
  background: #ffffff;
  color: #168a78;
  box-shadow: 0 7px 18px rgba(50, 72, 92, 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel-arrow .ui-icon {
  width: 22px;
  height: 22px;
}

.tab-nav {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: #ffffff;
  border-color: #dcebef;
  padding: 10px;
  gap: 9px;
  margin-bottom: 0;
  overscroll-behavior-x: contain;
}

.tab-nav::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  flex: 0 0 132px;
  min-height: 58px;
  flex-direction: column;
  gap: 5px;
  background: #f7fbfc;
  border: 1px solid #e0edf1;
  color: #596b7d;
  scroll-snap-align: center;
}

.tab-btn .ui-icon {
  width: 22px;
  height: 22px;
}

.tab-active,
.tab-active:hover {
  background: #dff4ef;
  border-color: #8bd2c5;
  color: #0f6e60;
  box-shadow: inset 0 -3px 0 rgba(22, 138, 120, 0.2);
}

.section {
  border-color: #deebef;
  box-shadow: var(--shadow);
}

.cmd-btn {
  min-height: 92px;
  gap: 8px;
  border-width: 1.5px;
  font-size: 12px;
}

.cmd-btn .ui-icon {
  width: 30px;
  height: 30px;
}

.cmd-btn span {
  display: block;
}

.e-happy {
  background: var(--sun);
  border-color: var(--sun-line);
  color: #835b00;
}

.e-sleepy {
  background: var(--lilac);
  border-color: var(--lilac-line);
  color: #5548a6;
}

.e-surprised {
  background: var(--sky);
  border-color: var(--sky-line);
  color: #246b92;
}

.e-wink {
  background: var(--berry);
  border-color: var(--berry-line);
  color: #8d3560;
}

.e-vomit {
  background: var(--mint);
  border-color: var(--mint-line);
  color: #26794b;
}

.e-angry {
  background: var(--peach);
  border-color: var(--peach-line);
  color: #9b4d2e;
}

.e-motion-auto {
  background: #e6f5ff;
  border-color: #84c8ef;
  color: #236787;
}

.cmd-btn.active-cmd {
  background: #ffffff;
  border-color: var(--primary);
  color: var(--primary-hover);
  box-shadow: 0 0 0 4px rgba(22, 138, 120, 0.18);
}

.quick-messages {
  background: #f7fbfc;
}

.quick-msg-btn {
  min-height: 46px;
  background: #ffffff;
  color: #334155;
}

.quick-msg-btn .ui-icon {
  color: var(--primary);
}

.quick-msg-gladiator {
  background: #fff3bf;
  border-color: #f5c04d;
  color: #765300;
}

.message-history {
  background: #f7fbfc;
}

.message-sent {
  background: #168a78;
}

.message-playing {
  background: #fff7d7;
  border-color: #f5d166;
}

.playing-icon {
  min-width: 48px;
  display: inline-flex;
  justify-content: center;
  color: #9a6a00;
}

.playing-icon .ui-icon {
  width: 30px;
  height: 30px;
}

.weather-widget {
  background: #eaf7ff;
  border-color: #b8ddf2;
}

.weather-icon-large {
  width: 98px;
  min-height: 72px;
  flex-direction: column;
  gap: 6px;
  background: #fff7d7;
  border-color: #f5d166;
  color: #825d00;
}

.weather-icon-large .ui-icon {
  width: 32px;
  height: 32px;
}

.detail-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-label .ui-icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.btn-weather {
  background: #ffffff;
  border-color: #9ed4ee;
  color: #246b92;
}

.pomodoro-widget {
  background: #fff8e8;
  border-color: #f1d58f;
}

.pomodoro-mode,
.pomodoro-widget.pomodoro-break-mode .pomodoro-mode {
  background: #168a78;
}

.pomodoro-ring {
  background: conic-gradient(var(--pomodoro-accent) var(--progress), #f3dfad 0deg);
}

.pomodoro-ring-inner {
  background: #fffdf8;
}

.btn-pomodoro {
  background: #ffffff;
  border-color: #ead39a;
  color: #7b5a10;
}

.datetime-widget {
  background: #f2edff;
  border-color: #cabdf0;
}

.datetime-date {
  color: #65559c;
}

@media (max-width: 430px) {
  .action-carousel {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
  }

  .carousel-arrow {
    width: 34px;
  }

  .tab-btn {
    flex-basis: 112px;
    min-height: 54px;
    font-size: 11px;
  }

  .cmd-btn {
    min-height: 84px;
  }
}