:root {
  --navy: #315d9c;
  --navy-deep: #263a58;
  --teal: #35a99d;
  --teal-soft: #dcf6f1;
  --blue: #568ff0;
  --amber: #d99a41;
  --amber-soft: #fff1dc;
  --red: #dc6d6d;
  --red-soft: #ffebeb;
  --ink: #293b55;
  --muted: #718097;
  --line: rgba(208, 220, 232, .72);
  --surface: rgba(255, 255, 255, .7);
  --background: #eef7fc;
  --shadow: 0 20px 55px rgba(66, 94, 139, .13), inset 0 1px 0 rgba(255, 255, 255, .8);
  --radius: 22px;
  font-family: "M PLUS Rounded 1c", "Yu Gothic UI", Meiryo, sans-serif;
}

html { background: #edf8fc; }
body {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(circle at 3% 4%, rgba(72, 207, 224, .25), transparent 28rem),
    radial-gradient(circle at 95% 88%, rgba(169, 130, 246, .2), transparent 32rem),
    linear-gradient(135deg, #eefbff 0%, #f7f5ff 50%, #fff7f2 100%);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

.eyebrow { color: #628aa6; }
.eyebrow.dark { color: #5685a7; }
.muted { color: var(--muted); }

/* Login */
.login-layout {
  position: relative;
  width: min(1240px, 100%);
  min-height: 100vh;
  grid-template-columns: minmax(420px, 1.12fr) minmax(390px, .78fr);
  gap: clamp(38px, 7vw, 110px);
  margin: 0 auto;
  padding: 54px clamp(28px, 5vw, 72px);
}
.login-brand {
  overflow: visible;
  padding: clamp(42px, 5vw, 72px) 0;
  color: var(--ink);
  background: transparent;
}
.login-brand::before {
  width: 420px;
  height: 420px;
  top: -170px;
  left: -190px;
  right: auto;
  border: 0;
  background: radial-gradient(circle, rgba(74, 205, 224, .24), transparent 68%);
}
.login-brand::after { display: none; }
.brand-mark {
  color: white;
  border: 1px solid rgba(255, 255, 255, .85);
  background: linear-gradient(145deg, #55d3c8, #558eff 65%, #8b70e8);
  box-shadow: 0 14px 28px rgba(78, 125, 211, .25), inset 0 1px 2px rgba(255, 255, 255, .75);
}
.login-brand h1 {
  color: #263b58;
  font-size: clamp(39px, 4.5vw, 64px);
  line-height: 1.32;
  letter-spacing: -.055em;
}
.login-brand h1::first-line { color: #293d59; }
.brand-copy { color: #64758b; font-size: 15px; line-height: 2; }
.brand-points { gap: 10px; }
.brand-points span {
  color: #597086;
  border: 1px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .48);
  box-shadow: 0 8px 24px rgba(71, 101, 142, .07);
  backdrop-filter: blur(16px);
}
.login-panel { padding: 44px 0; background: transparent; }
.login-card {
  width: min(430px, 100%);
  padding: 42px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 30px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 30px 80px rgba(60, 86, 135, .18), inset 0 1px 0 white;
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}
.login-card h2 { color: #2b3e59; font-size: 30px; letter-spacing: -.035em; }
.login-card > .muted { margin-bottom: 25px; font-size: 12px; }
.login-footer { color: #8996a8; }
.demo-accounts {
  border: 1px solid rgba(255, 255, 255, .8);
  background: rgba(232, 245, 247, .58);
}
.demo-accounts button { color: #436b98; border-color: rgba(130, 175, 203, .35); background: rgba(255, 255, 255, .78); }

/* Shared controls and glass surfaces */
input, select, textarea {
  min-width: 0;
  color: var(--ink);
  border: 1px solid rgba(150, 171, 194, .3);
  border-radius: 13px;
  background: rgba(250, 252, 255, .76);
  box-shadow: inset 0 1px 1px rgba(79, 101, 129, .03);
}
input:focus, select:focus, textarea:focus {
  border-color: #77a6f2;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 4px rgba(85, 139, 255, .1);
}
.button { border-radius: 13px; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary {
  color: white;
  background: linear-gradient(105deg, #5798f7, #517fe2 58%, #7669da);
  box-shadow: 0 13px 26px rgba(73, 121, 215, .25), inset 0 1px 1px rgba(255, 255, 255, .45);
}
.button.primary:hover { background: linear-gradient(105deg, #4d8fed, #4775d5 58%, #6d61ce); }
.button.ghost { color: #587087; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .58); }
.card, .form-card, .table-card {
  border: 1px solid rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .68);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

/* Main shell */
.app-layout { --sidebar-width: 268px; background: transparent; }
.sidebar {
  inset: 18px auto 18px 18px;
  width: 230px;
  height: auto;
  padding: 22px 15px 18px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 27px;
  background: linear-gradient(160deg, rgba(45, 65, 94, .9), rgba(43, 57, 83, .78));
  box-shadow: 0 25px 65px rgba(37, 53, 83, .25), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(28px) saturate(125%);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
}
.app-logo { padding: 0 8px 24px; }
.app-logo small { color: #a8b7cb; }
.uploaded-app-logo { border-radius: 9px; }
.nav-item { color: #b8c5d6; border: 1px solid transparent; border-radius: 12px; font-size: 12px; font-weight: 700; }
.nav-item span { color: #93a8c1; }
.nav-item:hover, .nav-item.active {
  color: white;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.nav-item.active span { color: #a9e6dd; }
.nav-caption { color: #94a5ba; }
.sidebar-user { border-color: rgba(255, 255, 255, .12); }
.sidebar-user small { color: #9cadc2; }
.avatar { color: #48627e; border: 2px solid rgba(255, 255, 255, .8); border-radius: 12px; background: #d8f2ee; }
.content { margin-left: var(--sidebar-width); padding: 38px clamp(24px, 3.5vw, 54px) 24px; }
.page-view { width: min(1280px, 100%); }
.page-heading h1 { color: #293d59; letter-spacing: -.045em; }
.server-clock, .date-chip { border-color: rgba(91, 139, 207, .3); }
.server-clock strong { color: #345a8e; }
.mobile-header {
  color: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .75);
  background: rgba(240, 249, 253, .75);
  backdrop-filter: blur(22px);
}

/* Feature surfaces */
.notice { border: 1px solid rgba(255, 255, 255, .75) !important; box-shadow: 0 12px 30px rgba(66, 94, 139, .08); backdrop-filter: blur(16px); }
.notice.warning { color: #8a612d; background: rgba(255, 240, 217, .76); }
.notice.info { color: #327d74; background: rgba(221, 247, 242, .76); }
.punch-button {
  color: #566a80;
  border-color: rgba(255, 255, 255, .82);
  border-radius: 17px;
  background: rgba(255, 255, 255, .56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 22px rgba(72, 104, 140, .07);
}
.punch-button:hover:not(:disabled), .punch-button.recommended { border-color: rgba(86, 154, 227, .45); background: rgba(255, 255, 255, .87); box-shadow: 0 14px 30px rgba(76, 126, 181, .15); }
.punch-button.wake-up { color: #9a702d; background: rgba(255, 248, 221, .68); }
.punch-button.departure { color: #3f78bd; background: rgba(231, 243, 255, .7); }
.punch-button.arrival { color: #2e8e82; background: rgba(225, 248, 243, .7); }
.punch-button.clock-out { color: #7158ac; background: rgba(241, 235, 255, .72); }
.punch-button.break-in, .punch-button.break-out { color: #a06b2d; background: rgba(255, 239, 220, .7); }
.punch-icon { border-color: rgba(255, 255, 255, .85); border-radius: 13px; background: rgba(255, 255, 255, .7); }
.break-meter, .timeline.empty { border: 1px solid rgba(255, 255, 255, .7); background: rgba(241, 247, 249, .62); }
.event-item { border-radius: 10px; background: rgba(239, 248, 248, .67); }
.event-item.auto { background: rgba(255, 247, 232, .75); }
.stat-card { border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .62); box-shadow: 0 14px 35px rgba(66, 94, 139, .1), inset 0 1px 0 white; backdrop-filter: blur(18px); }
.stat-card strong { color: #2c405d; }
.table-card { border-radius: var(--radius); }
.table-toolbar, .filter-grid { border-color: rgba(210, 221, 231, .65); background: rgba(255, 255, 255, .24); }
th { color: #7d8ca0; background: rgba(240, 245, 249, .62); }
td { border-color: rgba(219, 228, 235, .72); }
tbody tr { transition: background .18s; }
tbody tr:hover { background: rgba(255, 255, 255, .48); }
.state-label { color: #4a6e92; background: rgba(226, 239, 249, .78); }
.state-label.on_break { color: #9b6b2d; background: rgba(255, 238, 213, .82); }
.state-label.completed { color: #2b8177; background: rgba(218, 244, 239, .82); }
.badge { border: 1px solid rgba(255, 255, 255, .7); }
.badge.neutral { color: #6f7e91; background: rgba(235, 240, 245, .76); }
.badge.success { color: #287e73; background: rgba(218, 245, 240, .82); }
.badge.warning { color: #9a6825; background: rgba(255, 238, 210, .84); }
.form-card { border-radius: var(--radius); }
.tab-list { border: 1px solid rgba(255, 255, 255, .72); background: rgba(225, 235, 241, .58); backdrop-filter: blur(16px); }
.tab-button.active { color: #3a6396; background: rgba(255, 255, 255, .85); }
.logo-preview { border-color: rgba(152, 177, 198, .4); background: rgba(241, 247, 250, .62); }
.shift-matrix .person-column { background: rgba(255, 255, 255, .9); }
.shift-matrix thead .person-column { background: rgba(241, 246, 249, .95); }
.shift-cell-off { color: #6f7e8d; background: rgba(218, 225, 230, .82); }
.shift-cell-work { background: rgba(247, 252, 253, .78); }
.shift-cell-completed { background: rgba(217, 245, 239, .86); }
.registration-page { background: transparent; }
.registration-card { border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .72); backdrop-filter: blur(26px); }
.modal { border: 1px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .86); box-shadow: 0 30px 80px rgba(46, 65, 97, .25); backdrop-filter: blur(30px); }
.modal::backdrop { background: rgba(53, 70, 98, .3); backdrop-filter: blur(5px); }
.toast { background: rgba(43, 61, 88, .92); backdrop-filter: blur(16px); }

@media (max-width: 980px) {
  .login-layout { grid-template-columns: 1fr; width: min(690px, 100%); gap: 34px; padding-block: 76px 40px; }
  .login-brand { align-items: center; padding: 20px 0 0; text-align: center; }
  .login-brand h1 { font-size: clamp(38px, 8vw, 54px); }
  .brand-points { justify-content: center; }
  .login-panel { padding: 0; }
  .app-layout { --sidebar-width: 228px; }
  .sidebar { width: 202px; padding-inline: 11px; }
}

@media (max-width: 720px) {
  .login-layout { display: grid; padding: 76px 14px 34px; }
  .login-brand { display: flex; }
  .login-brand .brand-mark { margin-bottom: 24px; }
  .login-brand h1 { font-size: 36px; }
  .brand-copy { margin: 18px 0; font-size: 13px; }
  .login-card { padding: 30px 23px; border-radius: 25px; }
  .mobile-brand { display: none; }
  .sidebar { inset: 10px auto 10px -270px; width: 250px; border-radius: 24px; }
  .sidebar.open { left: 10px; }
  .mobile-header button { color: #3c5572; }
  .content { margin-left: 0; padding-top: 25px; }
  .page-heading h1 { font-size: 30px; }
  .card, .form-card, .table-card { backdrop-filter: blur(18px) saturate(135%); }
  .stat-card { backdrop-filter: blur(14px); }
}

@media (max-width: 420px) {
  .login-layout { padding-inline: 10px; }
  .login-brand h1 { font-size: 32px; }
  .brand-points span { padding: 7px 10px; font-size: 10px; }
  .login-card { padding: 26px 18px; }
  .punch-button { border-radius: 15px; }
}