/* Reset & base */
*,*::before,*::after
{
 box-sizing:border-box;
 margin:0;
 padding:0;
}

html,body
{
 height:100%;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 font-size:14px;
 color:#1a1a1a;
 background:#f5f5f5;
}

.hidden
{
 display:none !important;
}

/* Sign-in overlay */
#sign-in-overlay
{
 position:fixed;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#e8eaed;
 z-index:1000;
}

.sign-in-box
{
 text-align:center;
 background:#fff;
 padding:48px 64px;
 border-radius:12px;
 box-shadow:0 2px 16px rgba(0,0,0,0.12);
}

.sign-in-box h1
{
 font-size:32px;
 font-weight:600;
 color:#202124;
 margin-bottom:4px;
}

.sign-in-box p
{
 font-size:16px;
 color:#5f6368;
 margin-bottom:32px;
}

#sign-in-btn
{
 padding:12px 32px;
 font-size:15px;
 font-weight:500;
 color:#fff;
 background:#1a73e8;
 border:none;
 border-radius:6px;
 cursor:pointer;
 transition:background 0.15s;
}

#sign-in-btn:hover
{
 background:#1557b0;
}

/* App layout */
#app
{
 display:flex;
 flex-direction:column;
 height:100vh;
}

/* Toolbar */
#toolbar
{
 display:flex;
 align-items:center;
 gap:12px;
 padding:8px 16px;
 background:#fff;
 border-bottom:1px solid #dadce0;
 flex-shrink:0;
 height:52px;
}

.toolbar-left
{
 flex-shrink:0;
}

.logo
{
 font-size:20px;
 font-weight:700;
 color:#1a73e8;
 user-select:none;
}

.toolbar-center
{
 flex:1;
 display:flex;
 max-width:720px;
 margin:0 auto;
}

#search-input
{
 flex:1;
 padding:8px 12px;
 font-size:14px;
 border:1px solid #dadce0;
 border-right:none;
 border-radius:8px 0 0 8px;
 outline:none;
 background:#f1f3f4;
 transition:background 0.15s,border-color 0.15s;
}

#search-input:focus
{
 background:#fff;
 border-color:#1a73e8;
}

#search-btn
{
 padding:8px 14px;
 font-size:14px;
 border:1px solid #dadce0;
 border-radius:0 8px 8px 0;
 background:#f1f3f4;
 cursor:pointer;
 transition:background 0.15s;
}

#search-btn:hover
{
 background:#e0e0e0;
}

.toolbar-right
{
 display:flex;
 align-items:center;
 gap:10px;
 flex-shrink:0;
}

#refresh-btn
{
 padding:6px 10px;
 font-size:18px;
 border:1px solid #dadce0;
 border-radius:6px;
 background:#fff;
 cursor:pointer;
 transition:background 0.15s;
}

#refresh-btn:hover
{
 background:#f1f3f4;
}

#user-email
{
 font-size:13px;
 color:#5f6368;
 max-width:180px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}

#sign-out-btn
{
 padding:6px 14px;
 font-size:13px;
 color:#5f6368;
 border:1px solid #dadce0;
 border-radius:6px;
 background:#fff;
 cursor:pointer;
 transition:background 0.15s;
}

#sign-out-btn:hover
{
 background:#f1f3f4;
}

/* Content area */
#content
{
 display:flex;
 flex:1;
 overflow:hidden;
}

/* Sidebar */
#sidebar
{
 width:200px;
 flex-shrink:0;
 background:#fff;
 border-right:1px solid #dadce0;
 overflow-y:auto;
 padding:8px 0;
}

#label-list
{
 list-style:none;
}

#label-list li
{
 padding:8px 16px;
 font-size:14px;
 cursor:pointer;
 border-radius:0 20px 20px 0;
 margin-right:8px;
 transition:background 0.12s;
 display:flex;
 justify-content:space-between;
 align-items:center;
 user-select:none;
}

#label-list li:hover
{
 background:#f1f3f4;
}

#label-list li.active
{
 background:#d3e3fd;
 font-weight:600;
 color:#1a73e8;
}

#label-list li .label-name
{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}

#label-list li .label-count
{
 font-size:12px;
 color:#5f6368;
 flex-shrink:0;
 margin-left:8px;
}

#label-list li.active .label-count
{
 color:#1a73e8;
}

.label-separator
{
 height:1px;
 background:#dadce0;
 margin:8px 16px;
}

/* Main panel */
#main-panel
{
 flex:1;
 display:flex;
 flex-direction:column;
 overflow:hidden;
}

/* Message list panel */
#message-list-panel
{
 height:45%;
 min-height:180px;
 display:flex;
 flex-direction:column;
 border-bottom:2px solid #dadce0;
 resize:vertical;
 overflow:hidden;
}

#message-list-header
{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:8px 16px;
 background:#f8f9fa;
 border-bottom:1px solid #dadce0;
 flex-shrink:0;
}

#message-list-title
{
 font-weight:600;
 font-size:14px;
}

#message-count
{
 font-size:12px;
 color:#5f6368;
}

#message-list
{
 flex:1;
 overflow-y:auto;
 background:#fff;
}

.message-row
{
 display:flex;
 align-items:center;
 padding:8px 16px;
 border-bottom:1px solid #f1f3f4;
 cursor:pointer;
 transition:background 0.1s;
 gap:12px;
}

.message-row:hover
{
 background:#f1f3f4;
}

.message-row.selected
{
 background:#e8f0fe;
}

.message-row.unread
{
 font-weight:600;
}

.message-row.unread .msg-snippet
{
 color:#3c4043;
}

.msg-from
{
 width:200px;
 flex-shrink:0;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:13px;
}

.msg-subject-snippet
{
 flex:1;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:13px;
}

.msg-subject
{
 color:#202124;
}

.msg-snippet
{
 color:#5f6368;
 font-weight:400;
}

.msg-date
{
 flex-shrink:0;
 font-size:12px;
 color:#5f6368;
 width:80px;
 text-align:right;
}

.message-row.unread .msg-date
{
 color:#202124;
 font-weight:600;
}

/* Pagination */
#pagination
{
 display:flex;
 justify-content:center;
 gap:12px;
 padding:6px 16px;
 background:#f8f9fa;
 border-top:1px solid #dadce0;
 flex-shrink:0;
}

#pagination button
{
 padding:4px 14px;
 font-size:13px;
 border:1px solid #dadce0;
 border-radius:4px;
 background:#fff;
 cursor:pointer;
 transition:background 0.15s;
}

#pagination button:hover:not(:disabled)
{
 background:#e8eaed;
}

#pagination button:disabled
{
 opacity:0.4;
 cursor:default;
}

/* Reading pane */
#reading-pane
{
 flex:1;
 overflow-y:auto;
 background:#fff;
 padding:0;
}

#reading-pane-placeholder
{
 display:flex;
 align-items:center;
 justify-content:center;
 height:100%;
 color:#80868b;
 font-size:15px;
 user-select:none;
}

#reading-pane-content
{
 padding:20px 24px;
}

#msg-header
{
 margin-bottom:16px;
 padding-bottom:16px;
 border-bottom:1px solid #e8eaed;
}

#msg-subject
{
 font-size:20px;
 font-weight:600;
 color:#202124;
 margin-bottom:8px;
 word-break:break-word;
}

#msg-meta
{
 display:flex;
 justify-content:space-between;
 align-items:center;
 font-size:13px;
 margin-bottom:4px;
}

#msg-meta #msg-from
{
 font-weight:600;
 color:#202124;
}

#msg-meta #msg-date
{
 color:#5f6368;
 flex-shrink:0;
}

#msg-to
{
 font-size:13px;
 color:#5f6368;
}

#msg-body
{
 margin-top:8px;
}

#msg-body iframe
{
 width:100%;
 border:none;
 min-height:300px;
}

#msg-body pre
{
 white-space:pre-wrap;
 word-break:break-word;
 font-family:inherit;
 font-size:14px;
 line-height:1.6;
}

#msg-body pre a
{
 color:#1a73e8;
}

/* Loading spinner */
#loading
{
 position:fixed;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 background:rgba(255,255,255,0.7);
 z-index:500;
}

.spinner
{
 width:40px;
 height:40px;
 border:4px solid #dadce0;
 border-top-color:#1a73e8;
 border-radius:50%;
 animation:spin 0.8s linear infinite;
}

@keyframes spin
{
 to
 {
  transform:rotate(360deg);
 }
}

/* Empty/error states */
.empty-state
{
 display:flex;
 align-items:center;
 justify-content:center;
 height:100%;
 color:#80868b;
 font-size:14px;
 padding:24px;
 text-align:center;
}

.error-banner
{
 padding:10px 16px;
 background:#fce8e6;
 color:#c5221f;
 font-size:13px;
 border-bottom:1px solid #f5c6cb;
}