/* Flat application chrome. Hardware canvases and standalone pages keep their layout. */
.thinpad-app {
  --tp-bg: #f5f7fa;
  --tp-surface: #fff;
  --tp-raised: #f0f3f8;
  --tp-hover: #e8eef6;
  --tp-border: #dce3ed;
  --tp-text: #263449;
  --tp-muted: #59697d;
  --tp-link: #245bb5;
  --tp-primary: #285fc5;
  --ui-selected: #e9f0ff;
  --ui-selected-text: #2456aa;
  --ui-input-border: #8795a8;
  --ui-success-bg: #e8f5ec;
  --ui-success: #25633c;
  --ui-info-bg: #e9f2fb;
  --ui-info: #285d87;
  --ui-warning-bg: #fff2d7;
  --ui-warning: #77520d;
  --ui-danger-bg: #fceced;
  --ui-danger: #a13242;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[data-theme="dark"] .thinpad-app {
  --tp-bg: #121923;
  --tp-surface: #1b2532;
  --tp-raised: #242f3e;
  --tp-hover: #2b394c;
  --tp-border: #334155;
  --tp-text: #e3eaf4;
  --tp-muted: #a6b5c9;
  --tp-link: #99c4ff;
  --tp-primary: #2c63c5;
  --ui-selected: #253a59;
  --ui-selected-text: #bed8ff;
  --ui-input-border: #6b7f99;
  --ui-success-bg: #213c32;
  --ui-success: #a7dfbe;
  --ui-info-bg: #20394c;
  --ui-info: #acd7f5;
  --ui-warning-bg: #433822;
  --ui-warning: #f2d293;
  --ui-danger-bg: #452b35;
  --ui-danger: #ffb7c1;
}
html[data-theme] .thinpad-app { background: var(--tp-bg); color: var(--tp-text); }
.thinpad-app h1, .thinpad-app h2, .thinpad-app h3, .thinpad-app h4 { font-weight: 600; line-height: 1.35; }
.thinpad-app h1 { font-size: 28px; letter-spacing: -.5px; margin: 0 0 12px; }
.thinpad-app h2 { font-size: 23px; }
.thinpad-app h4 { font-size: 16px; margin-bottom: 16px; }
.thinpad-app label { font-weight: 500; }
.thinpad-app .page-heading { margin-bottom: 26px; }
.thinpad-app .page-heading p { color: var(--tp-muted); margin: 0; }
.thinpad-app main > .container { padding-bottom: 16px; }
.thinpad-app main > .container > hr { display: none; }
.thinpad-app footer { margin: 28px auto 0; padding: 22px 16px 28px; border: 0; color: var(--tp-muted); font-size: 12px; }
.thinpad-app footer p { margin: 3px 0; }

/* One quiet navigation bar; active destinations use a soft accent. */
html[data-theme] .thinpad-app .navbar-default {
  background: var(--tp-surface); border: 0; border-bottom: 1px solid var(--tp-border);
  border-radius: 0; box-shadow: none; margin-bottom: 32px; min-height: 64px;
}
html[data-theme] .thinpad-app .navbar-brand { height: 64px; padding-top: 21px; padding-bottom: 21px; color: var(--tp-text); font-size: 18px; font-weight: 650; letter-spacing: -.4px; }
.thinpad-app .navbar-brand::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 2px; background: var(--tp-primary); vertical-align: 2px; }
html[data-theme] .thinpad-app .navbar-nav > li > a { color: var(--tp-muted); border-radius: 7px; padding: 9px 11px; margin: 13px 2px; line-height: 20px; font-weight: 500; }
html[data-theme] .thinpad-app .navbar-nav > .active > a,
html[data-theme] .thinpad-app .navbar-nav > .active > a:hover { background: var(--ui-selected); color: var(--ui-selected-text); }
html[data-theme] .thinpad-app .navbar-nav > li > a:hover,
html[data-theme] .thinpad-app .navbar-nav > li > a:focus { background: var(--tp-raised); color: var(--tp-text); }
.thinpad-app .navbar-toggle { margin-top: 14px; margin-bottom: 14px; border-radius: 7px; padding: 10px; }
.thinpad-app .navbar-btn.theme-toggle { margin-top: 13px; margin-bottom: 13px; min-height: 38px; }

/* Flat surfaces, restrained borders and consistent spacing. */
html[data-theme] .thinpad-app .panel,
html[data-theme] .thinpad-app .well,
html[data-theme] .thinpad-app .modal-content {
  background: var(--tp-surface); color: var(--tp-text); border: 1px solid var(--tp-border);
  border-radius: 10px; box-shadow: none;
}
.thinpad-app .panel { margin-bottom: 24px; }
html[data-theme] .thinpad-app .panel > .panel-heading {
  padding: 15px 20px; background: transparent; color: var(--tp-text);
  border-bottom: 1px solid var(--tp-border); border-radius: 10px 10px 0 0; font-weight: 600;
}
.thinpad-app .panel-title { font-size: 15px; }
.thinpad-app .panel-body { padding: 20px; }
.thinpad-app .panel-footer { padding: 12px 20px; border-radius: 0 0 10px 10px; }
.thinpad-app .well { padding: 16px 18px; }
.thinpad-app .modal-header { padding: 18px 22px; }
.thinpad-app .modal-title { font-size: 18px; font-weight: 600; }
.thinpad-app .modal-body { padding: 22px; }
.thinpad-app .modal-footer { padding: 16px 22px; }
.thinpad-app .close { font-weight: 400; opacity: .75; }
html[data-theme] .thinpad-app .panel-success > .panel-heading { color: var(--ui-success); }
html[data-theme] .thinpad-app .panel-info > .panel-heading { color: var(--ui-info); }
.thinpad-app .alert { border-radius: 8px; box-shadow: none; padding: 14px 18px; }
.thinpad-app .alert-dismissible { padding-right: 36px; }
html[data-theme] .thinpad-app .list-group-item { background: transparent; color: var(--tp-text); border-color: var(--tp-border); padding: 12px 14px; }
html[data-theme] .thinpad-app .list-group-item.active { background: var(--ui-selected); color: var(--ui-selected-text); border-color: var(--tp-border); }
html[data-theme] .thinpad-app a.list-group-item:hover { background: var(--tp-raised); color: var(--tp-text); }
.thinpad-app .list-group-item:first-child { border-radius: 7px 7px 0 0; }
.thinpad-app .list-group-item:last-child { border-radius: 0 0 7px 7px; }
.thinpad-app .nav-pills > li > a { border-radius: 7px; padding: 9px 14px; font-weight: 500; }
html[data-theme] .thinpad-app .nav-pills > li.active > a { background: var(--ui-selected); color: var(--ui-selected-text); }
.thinpad-app .nav-tabs > li > a { border-radius: 7px 7px 0 0; padding: 11px 14px; }

/* Clear action hierarchy without gradients, embossed text or inset shadows. */
.thinpad-app .btn { border-radius: 7px; padding: 8px 14px; line-height: 20px; font-weight: 500; box-shadow: none; text-shadow: none; background-image: none; }
.thinpad-app .btn:active, .thinpad-app .btn.active { box-shadow: none; }
.thinpad-app .btn-xs { padding: 3px 9px; font-size: 12px; line-height: 18px; border-radius: 5px; }
.thinpad-app .btn-sm { padding: 6px 11px; }
.thinpad-app .btn-lg { padding: 11px 18px; font-size: 15px; }
html[data-theme] .thinpad-app .btn-default { background: var(--tp-surface); color: var(--tp-text); border-color: var(--tp-border); }
html[data-theme] .thinpad-app .btn-default:hover,
html[data-theme] .thinpad-app .btn-default:focus { background: var(--tp-raised); border-color: var(--ui-input-border); }
html[data-theme] .thinpad-app .btn-primary { background: var(--tp-primary); border-color: var(--tp-primary); color: #fff; }
html[data-theme] .thinpad-app .btn-primary:hover,
html[data-theme] .thinpad-app .btn-primary:focus { background: #204fa8; border-color: #204fa8; color: #fff; }
html[data-theme] .thinpad-app .btn-danger-soft { background: var(--ui-danger-bg); color: var(--ui-danger); border-color: transparent; }
html[data-theme] .thinpad-app .btn-danger-soft:hover { border-color: var(--ui-danger); }
.thinpad-app .management-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.thinpad-app .form-control { border-radius: 7px; min-height: 38px; padding: 8px 11px; box-shadow: none; font-size: 14px; }
html[data-theme] .thinpad-app .form-control { border-color: var(--ui-input-border); background: var(--tp-surface); color: var(--tp-text); }
html[data-theme] .thinpad-app .form-control:focus { border-color: var(--tp-link); box-shadow: 0 0 0 2px var(--ui-selected); }
html[data-theme] .thinpad-app .form-control[disabled],
html[data-theme] .thinpad-app .form-control[readonly] { background: var(--tp-raised); color: var(--tp-muted); }
.thinpad-app .input-group .form-control { border-radius: 0 7px 7px 0; }
.thinpad-app .input-group-addon { border-radius: 7px 0 0 7px; }
.thinpad-app input[type="file"] { max-width: 100%; }
.thinpad-app input[type="file"]::file-selector-button { padding: 7px 11px; margin-right: 10px; border: 1px solid var(--tp-border); border-radius: 6px; background: var(--tp-raised); color: var(--tp-text); cursor: pointer; }

/* Airier tables; long data remains in the existing scroll containers. */
.thinpad-app .table > thead > tr > th { font-size: 12px; font-weight: 600; color: var(--tp-muted); background: var(--tp-raised); border-bottom: 1px solid var(--tp-border); }
.thinpad-app .table > thead > tr > th,
.thinpad-app .table > tbody > tr > td,
.thinpad-app .table > tbody > tr > th { padding: 11px 13px; vertical-align: middle; border-top-color: var(--tp-border); }
.thinpad-app .table-condensed > tbody > tr > td { padding: 9px 11px; }
.thinpad-app .table caption { padding: 12px 14px; color: var(--tp-muted); font-size: 13px; }
.thinpad-app .table-scroll { border-radius: 7px; }
.thinpad-app .table .label { white-space: nowrap; overflow-wrap: normal; }
.thinpad-app .label, .thinpad-app .badge { padding: 4px 7px; border-radius: 4px; font-size: 12px; font-weight: 500; }
html[data-theme] .thinpad-app .label-default { color: var(--tp-muted); background: var(--tp-raised); }
html[data-theme] .thinpad-app .label-primary { color: var(--ui-selected-text); background: var(--ui-selected); }
html[data-theme] .thinpad-app .label-success { color: var(--ui-success); background: var(--ui-success-bg); }
html[data-theme] .thinpad-app .label-info { color: var(--ui-info); background: var(--ui-info-bg); }
html[data-theme] .thinpad-app .label-warning { color: var(--ui-warning); background: var(--ui-warning-bg); }
html[data-theme] .thinpad-app .label-danger { color: var(--ui-danger); background: var(--ui-danger-bg); }
.thinpad-app .pager li > a { border-radius: 7px; padding: 6px 13px; }
.thinpad-app pre { border-radius: 7px; padding: 14px 16px; }

/* Give the entry screens the same calm surfaces as the rest of the app. */
.thinpad-app[data-page="signin"] .form-signin { max-width: 400px; margin: 0 auto 20px; padding: 26px; border: 1px solid var(--tp-border); border-radius: 10px; background: var(--tp-surface); }
.thinpad-app[data-page="signin"] .form-signin-heading { font-size: 21px; margin: 0 0 22px; }
.thinpad-app[data-page="signin"] .form-signin .form-control { border-radius: 7px; margin: 0 0 12px; padding: 11px 12px; font-size: 15px; }
.thinpad-app[data-page="signin"] #register { background: var(--tp-surface); color: var(--tp-text); border-color: var(--tp-border); }
.thinpad-app[data-page="upload"] #upload_page > .col-lg-6 { padding: 26px; border: 1px solid var(--tp-border); border-radius: 10px; background: var(--tp-surface); }
.thinpad-app[data-page="upload"] #upload_page { margin-left: 0; margin-right: 0; }
.thinpad-app[data-page="management"] .tab-content > .tab-pane > hr { margin: 14px 0 24px; border-color: var(--tp-border); }
.thinpad-app[data-page="management"] .table-scroll { background: var(--tp-surface); border: 1px solid var(--tp-border); }
.thinpad-app .sep-column:not(:last-child) { border-right-color: var(--tp-border); }

/* Feedback is also served by deployments with page-local legacy colors. */
.thinpad-app #feedback-page .feedback-item {
  background: var(--tp-surface); border-color: var(--tp-border); border-radius: 10px;
}
.thinpad-app #feedback-page .feedback-details { border-top-color: var(--tp-border); }
.thinpad-app #feedback-page .feedback-toolbar h2 small { color: var(--tp-muted); }
.thinpad-app #feedback-page .feedback-item-heading > .label { flex-shrink: 0; white-space: nowrap; }
.thinpad-app #feedback-page .feedback-title { line-height: 1.5; }
.thinpad-app #feedback-page .feedback-image img {
  background: var(--tp-raised); border-color: var(--tp-border); border-radius: 6px;
}
.thinpad-app #feedback-page .feedback-empty {
  background: var(--tp-raised); color: var(--tp-muted); border-radius: 10px;
}
html[data-theme] .thinpad-app #feedback-page .form-control::placeholder {
  color: var(--tp-muted); opacity: 1;
}
html[data-theme] .thinpad-app #feedback-page fieldset[disabled] .form-control {
  background: var(--tp-raised); color: var(--tp-muted);
}
@media (max-width: 1199px) {
  .thinpad-app .navbar-nav > li > a { margin: 3px 12px; }
  .thinpad-app .navbar-btn.theme-toggle { margin-left: 15px; }
}
@media (max-width: 767px) {
  .thinpad-app .navbar-default { margin-bottom: 22px; }
  .thinpad-app h1 { font-size: 24px; }
  .thinpad-app .panel-body, .thinpad-app .modal-body { padding: 16px; }
  .thinpad-app .panel > .panel-heading { padding: 13px 16px; }
  .thinpad-app[data-page="signin"] .container-fluid { padding-left: 0; padding-right: 0; }
  .thinpad-app[data-page="signin"] .form-signin { padding: 22px; }
  .thinpad-app[data-page="signin"] .container-fluid > .row { margin-left: 0; margin-right: 0; }
  .thinpad-app[data-page="upload"] #upload_page > .col-lg-6 { padding: 20px; }
}