/* UI Skills: interface-design + baseline-ui.
   Intent: a student finding, writing and organising an internship record.
   Hierarchy: work title first, dates and category second, actions third.
   Palette: paper, blue binding, dark ink; blue communicates navigation/action.
   Depth: quiet edges and one subtle card shadow. No decorative gradients.
   Typography: existing Thai font, readable 14px body, 28px page headings.
   Spacing: 4px base; 16px controls, 24px cards, 32px page sections.
   Screen only: printable internship documents keep their existing layout. */
@media screen {
    :root {
        --work-paper: #fff;
        --work-canvas: #f6f8fb;
        --work-inset: #f8fafc;
        --work-ink: #1a3045;
        --work-secondary: #50647a;
        --work-muted: #62758a;
        --work-line: #dfe6ee;
        --work-soft-line: #edf1f5;
        --work-blue-paper: color-mix(in srgb, var(--primary) 7%, white);
        --work-blue-edge: color-mix(in srgb, var(--primary) 20%, white);
        --work-card-shadow: 0 1px 2px rgb(15 23 42 / 3%);
        --work-radius: 16px;
        --bg-body: var(--work-canvas);
        --text-primary: var(--work-ink);
        --text-secondary: var(--work-secondary);
        --border-light: var(--work-line);
        --primary-soft: var(--work-blue-paper);
        --primary-border: var(--work-blue-edge);
        --radius-card: var(--work-radius);
        --shadow-card: var(--work-card-shadow);
    }
    body { color: var(--work-ink); background: var(--work-canvas); font-size: 14px; -webkit-font-smoothing: antialiased; }
    h1, h2, h3, h4 { text-wrap: balance; }
    p { text-wrap: pretty; }
    button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
    input, textarea { caret-color: var(--primary); }
    a { text-underline-offset: .2em; }
    input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
    :focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
    button:disabled { opacity: .48; }
    .workspace-header, .admin-console .workspace-header { background: var(--work-paper); box-shadow: none; padding-inline: 28px; border-color: var(--work-line); }
    .workspace-header .header-brand { gap: 28px; min-width: 0; }
    .workspace-brand { gap: 12px; }
    .workspace-brand > span { color: var(--work-ink); font-size: 18px; font-weight: 700; }
    .workspace-brand small { font-size: 9px; color: var(--work-muted); }
    .workspace-context { border-left: 1px solid var(--work-line); padding-left: 28px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .workspace-context strong { font-size: 13px; font-weight: 600; color: var(--work-ink); white-space: nowrap; }
    .workspace-context small { color: var(--work-muted); font-size: 11px; }
    .workspace-header .lang-toggle { background: var(--work-paper); color: var(--work-secondary); height: 40px; border-radius: 10px; }
    .workspace-header .profile-btn { background: var(--work-inset); border-radius: 10px; padding: 6px 12px 6px 6px; }
    .workspace-header .profile-btn img { border-radius: 8px; }
    .workspace-header .profile-info-text strong { font-size: 12px; color: var(--work-ink); }
    .workspace-header .shell-signout { color: var(--work-secondary); border-color: transparent; }
    .workspace-sidebar, .admin-console .workspace-sidebar { padding: 24px 16px 0; background: var(--work-inset); border-color: var(--work-line); }
    .workspace-sidebar .menu-title, .admin-console .workspace-sidebar .menu-title { font-size: 11px; font-weight: 600; margin-bottom: 12px; padding-inline: 12px; }
    .workspace-sidebar .menu-list { gap: 4px; }
    .workspace-sidebar .menu-item, .admin-console .workspace-sidebar .menu-item { min-height: 44px; padding: 12px; border-radius: 10px; font-size: 13px; color: var(--work-secondary); transition: background .16s ease, color .16s ease; }
    .workspace-sidebar .menu-item > i, .admin-console .workspace-sidebar .menu-item > i { font-size: 20px; color: var(--work-muted); }
    .workspace-sidebar .menu-title, .admin-console .workspace-sidebar .menu-title, .workspace-header .workspace-brand small { color: var(--work-muted); }
    .workspace-sidebar .menu-item.active, .admin-console .workspace-sidebar .menu-item.active { background: #e5f0fa; color: #085c9e; box-shadow: none; }
    .nav-current-dot { width: 5px; height: 5px; }
    .shell-sidebar-footer { padding: 20px 8px; border-color: var(--work-line); }
    .shell-sidebar-footer strong { font-size: 12px; }
    .shell-sidebar-footer small { font-size: 10px; }
    .shell-sidebar-footer img { border-radius: 8px; }
    .public-browse-notice { background: var(--work-blue-paper); border-color: var(--work-blue-edge); color: var(--work-secondary); border-radius: 12px; font-size: 12px; }
    .content-padding, .admin-console .dashboard-scroll { padding: 32px; }
    .hero-banner { background: transparent; border: 0; border-radius: 0; padding: 8px 0 28px; box-shadow: none; gap: 28px; margin-bottom: 0; }
    .hero-banner::after { display: none; }
    .hero-info h2 { color: var(--work-ink); font-size: 28px; line-height: 1.5; font-weight: 600; letter-spacing: -.02em; }
    .hero-banner p { color: var(--work-secondary); font-size: 13px; }
    .work-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--primary); font-size: 11px; font-weight: 600; margin: 0 0 12px; }
    .hero-record-summary { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 8px 0 8px 24px; }
    .hero-record-summary strong { color: var(--work-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
    .hero-record-summary span { color: var(--work-secondary); }
    .hero-record-summary > div + div { border-left-color: var(--work-line); }
    .section-title { color: var(--work-ink); font-size: 17px; font-weight: 600; margin-block: 28px 16px; border: 0; padding-bottom: 0; }
    .module-grid { gap: 0; border: 1px solid var(--work-line); border-radius: 16px; overflow: hidden; background: var(--work-paper); }
    .module-card { display: flex; flex-direction: row; align-items: center; gap: 18px; background: var(--work-paper); border: 0; border-radius: 0; padding: 24px; box-shadow: none; transition: background .16s ease; }
    .module-card:nth-child(odd) { border-right: 1px solid var(--work-line); }
    .module-card:nth-child(n+3) { border-top: 1px solid var(--work-line); }
    .module-card:hover { transform: none; box-shadow: none; background: var(--work-inset); }
    .module-card .module-icon { flex-shrink: 0; color: var(--primary); background: transparent; border: 0; border-radius: 0; width: 32px; height: 40px; font-size: 27px; }
    .module-text h3 { color: var(--work-ink); font-size: 15px; line-height: 1.7; font-weight: 600; }
    .module-text p { color: var(--work-secondary); font-size: 12px; line-height: 1.85; }
    .widget-card, .form-panel, .box-card, .history-day, .time-history-card, .merger-card,
    .admin-console .stat-card, .admin-console .console-card, .admin-console .settings-card,
    .admin-console .chart-section, .profile-summary, .profile-form-card {
        background: var(--work-paper); border-color: var(--work-line); border-radius: var(--work-radius); box-shadow: var(--work-card-shadow);
    }
    .intern-bar-fill { background: var(--primary); }
    .workspace-showcase { background: var(--primary); box-shadow: none; border-radius: 24px; }
    .workspace-showcase::before { display: none; }
    .workspace-showcase h2 { line-height: 1.6; }
    .workspace-showcase h2 span { color: #fff; }
    .workspace-showcase > p, .showcase-tools small, .showcase-footer { color: #e3f1fc; }
    .showcase-tools { border-radius: 12px; }
    .showcase-tools > div > i:last-child { color: #fff; }
    .controls-panel { background: var(--work-paper); border-color: var(--work-line); }
    .panel-header { border-color: var(--work-line); background: var(--work-paper); }
    .panel-header h2, .panel-header h3 { color: var(--work-ink); font-weight: 600; }
    .tabs { background: var(--work-inset); border: 1px solid var(--work-line); border-radius: 10px; padding: 4px; }
    .tab-btn { min-height: 40px; border-radius: 7px; }
    .tab-btn.active { background: var(--work-paper); box-shadow: 0 1px 2px rgb(15 23 42 / 6%); color: var(--primary); }
    .preview-panel, #preview-wrapper { background: #e9eef4; border-color: var(--work-line); }
    .iframe-container { background: #e9eef4; border: 1px solid var(--work-line); box-shadow: none; border-radius: 16px; }
    .iframe-container .pdf-page, .preview-panel .pdf-page { box-shadow: 0 4px 16px rgb(22 40 57 / 12%); }
    .btn-outline, .console-button { border-radius: 10px; border-color: var(--work-line); color: var(--work-secondary); background: var(--work-paper); min-height: 40px; font-weight: 500; }
    .btn-outline:hover, .console-button:hover { color: var(--primary); border-color: var(--work-blue-edge); background: var(--work-blue-paper); }
    .btn-save, .btn-primary, .btn-merge, .btn-export, .export-pdf, .btn-google { min-height: 44px; border-radius: 10px; background: var(--primary); font-weight: 600; box-shadow: none; }
    .btn-save:hover, .btn-primary:hover, .btn-merge:hover, .btn-export:hover, .export-pdf:hover, .btn-google:hover { box-shadow: none; transform: none; background: var(--primary-hover); }
    .record-danger, .btn-danger { color: #b42335; }
    .record-danger:hover, .btn-danger:hover { color: #a51d2d; border-color: #f0c7cd; background: #fff5f6; }
    .app-input, .setting-input, .form-group input:not([type=checkbox]):not([type=radio]):not([type=color]), .form-group select, .form-group textarea {
        background: var(--work-inset); border-color: var(--work-line); border-radius: 10px; color: var(--work-ink); min-height: 44px;
    }
    .app-input:focus, .setting-input:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus { background: var(--work-paper); border-color: var(--primary); box-shadow: 0 0 0 2px var(--work-blue-paper); }
    input::placeholder, textarea::placeholder { color: var(--work-muted); opacity: 1; }
    .form-panel, .box-card, .history-day, .time-history-card, .widget-card { box-shadow: none; }
    .panel-header { padding: 20px 24px; }
    .panel-body { padding: 24px; }
    .btn-company-edit { background: var(--work-paper); border-color: var(--work-line); color: var(--work-secondary); box-shadow: none; }
    .btn-company-edit:hover { transform: none; box-shadow: none; background: var(--work-blue-paper); color: var(--primary); }
    .public-browse-notice { padding: 12px 20px; margin-bottom: 20px; background: var(--work-inset); border-radius: 0; border-inline: 0; color: var(--work-secondary); }
    .workspace-ai-entry { display: flex; align-items: center; gap: 20px; padding: 26px 28px; border-radius: 16px; background: #096fba; color: #fff; text-decoration: none; transition: background .16s ease; }
    .workspace-ai-entry:hover { background: #075f9f; }
    .workspace-ai-entry > i:first-child { font-size: 30px; }
    .workspace-ai-entry > div { flex: 1; min-width: 0; }
    .workspace-ai-entry h2 { margin: 0 0 6px; font-size: 21px; font-weight: 600; }
    .workspace-ai-entry p { margin: 0; font-size: 13px; line-height: 1.8; color: #e8f4ff; }
    .workspace-ai-entry > span { font-size: 13px; font-weight: 600; white-space: nowrap; }
    .workspace-ai-entry > i:last-child { font-size: 20px; }
    .right-sidebar .news-feed { display: grid; gap: 16px; }
    .news-card { box-shadow: none; }
    .news-card:hover { box-shadow: none; }
    .content-padding, .dashboard-widgets > *, .main-footer > div { min-width: 0; }
    .main-footer > div { overflow-wrap: anywhere; }
    .main-content:has(> .content-padding) { overflow-x: hidden; }
    .record-actions, .archive-action-dock { background: var(--work-paper); border-color: var(--work-line); border-radius: 16px; box-shadow: 0 4px 20px rgb(15 23 42 / 10%); padding: 16px; }
    .record-selection-count { color: var(--work-secondary); font-variant-numeric: tabular-nums; }
    .record-select-all { padding: 12px 16px; background: var(--work-blue-paper); border: 1px solid var(--work-blue-edge); border-radius: 10px; color: var(--work-secondary); }
    .record-history-heading h4 { font-size: 18px; }
    .archive-tabs { width: fit-content; max-width: 100%; padding: 4px; background: var(--work-inset); border: 1px solid var(--work-line); border-radius: 12px; gap: 4px; }
    .archive-tabs button { border: 0; background: transparent; color: var(--work-secondary); min-height: 40px; border-radius: 8px; padding: 8px 16px; font-size: 13px; }
    .archive-tabs button.active { background: var(--work-paper); color: var(--primary); box-shadow: 0 1px 3px rgb(15 23 42 / 8%); font-weight: 600; }
    .archive-tabs button:hover:not(.active) { color: var(--work-ink); }
    .trash-card { padding: 24px; }
    .trash-kind { color: var(--primary); background: var(--work-blue-paper); }
    .trash-details dt, .trash-meta { color: var(--work-muted); }
    .trash-details dd { color: var(--work-ink); }
    .profile-page-heading h1 { color: var(--work-ink); font-size: 30px; }
    .profile-heading-icon { border: 0; background: var(--work-blue-paper); border-radius: 16px; }
    .profile-cover { background: var(--primary); }
    .profile-eyebrow { color: var(--primary); font-weight: 600; }
    .profile-form-heading, .settings-header { border-color: var(--work-line); }
    .admin-console .admin-page-heading h2 { font-size: 28px; color: var(--work-ink); font-weight: 600; }
    .admin-console th { background: var(--work-inset); color: var(--work-secondary); font-weight: 500; }
    .admin-console .badge-admin { color: var(--primary); background: var(--work-blue-paper); border-color: var(--work-blue-edge); }
    .admin-console .stat-info h3, .storage-metric > strong { font-variant-numeric: tabular-nums; }
    .storage-metric, .storage-bucket, .storage-file { box-shadow: var(--work-card-shadow); border-color: var(--work-line); border-radius: var(--work-radius); }
    .empty-state { color: var(--work-secondary); }
    .empty-state p { line-height: 1.8; }
    @media (max-width: 1100px) {
        .workspace-context { display: none; }
        .content-padding, .admin-console .dashboard-scroll { padding: 24px; }
    }
    @media (max-width: 768px) {
        .workspace-header, .admin-console .workspace-header { padding-inline: 12px; }
        .workspace-header .header-brand { gap: 4px; }
        .workspace-brand { gap: 8px; }
        .workspace-brand > span { font-size: 14px; }
        .workspace-header .header-actions { gap: 4px; }
        .workspace-header .profile-btn { padding: 4px; }
        .workspace-header .mobile-toggle { min-width: 40px; min-height: 40px; }
        .workspace-sidebar, .admin-console .workspace-sidebar { padding-inline: 16px; }
        .content-padding, .admin-console .dashboard-scroll { padding: 24px 16px; }
        .hero-banner { padding: 0 0 24px; text-align: left; align-items: stretch; }
        .hero-record-summary { justify-content: flex-start; padding: 0; }
        .workspace-ai-entry { padding: 22px 20px; gap: 14px; flex-wrap: wrap; }
        .workspace-ai-entry > div { flex-basis: calc(100% - 48px); }
        .workspace-ai-entry > span { margin-left: 44px; }
        .workspace-ai-entry h2 { font-size: 19px; }
        .panel-header, .panel-body { padding: 20px 16px; }
        .hero-info h2 { font-size: 24px; }
        .module-grid { gap: 0; }
        .module-card { padding: 20px; gap: 16px; border-radius: 0; }
        .module-card:nth-child(odd) { border-right: 0; }
        .module-card:nth-child(n+2) { border-top: 1px solid var(--work-line); }
        .module-card .module-icon { width: 28px; height: 36px; font-size: 24px; }
        .module-text h3 { font-size: 14px; }
        .module-text p { font-size: 12px; }
        .archive-tabs { width: auto; }
        .archive-tabs button { flex: 1 1 auto; padding-inline: 12px; }
        .profile-page-heading h1 { font-size: 26px; }
        .profile-page .profile-main { padding: 24px 16px; }
        .record-actions, .archive-action-dock { padding: 12px; }
        .app-input, .form-group input:not([type=checkbox]):not([type=radio]), .form-group select, .form-group textarea { font-size: 16px; }
    }
}